diff --git a/package.json b/package.json index dc2907c..f63651a 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ "fflate": "^0.8.2", "flatbush": "^3.3.0", "js-angusj-clipper": "^1.2.1", + "pako": "^2.1.0", "pinia": "^3.0.2", "polylabel": "^1.1.0", "three": "npm:three-cf@^0.122.9", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 798658a..2670194 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -23,6 +23,9 @@ importers: js-angusj-clipper: specifier: ^1.2.1 version: 1.3.1 + pako: + specifier: ^2.1.0 + version: 2.1.0 pinia: specifier: ^3.0.2 version: 3.0.2(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3)) @@ -703,6 +706,9 @@ packages: engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} hasBin: true + pako@2.1.0: + resolution: {integrity: sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==} + path-browserify@1.0.1: resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==} @@ -1620,6 +1626,8 @@ snapshots: nanoid@3.3.11: {} + pako@2.1.0: {} + path-browserify@1.0.1: {} path-parse@1.0.7: {} diff --git a/src/components/MaterialAdjuster.vue b/src/components/MaterialAdjuster.vue index a6e137d..8be4fe9 100644 --- a/src/components/MaterialAdjuster.vue +++ b/src/components/MaterialAdjuster.vue @@ -27,7 +27,7 @@

纹理选择(DEBUG)

-
@@ -112,6 +112,7 @@ import CfFlex from "./CfFlex.vue"; import { DirectoryId } from "../api/Request"; import { IsNullOrWhitespace } from "../helpers/helper.string"; import { DeflateAsync } from "../helpers/helper.compression"; +import { ToDeflatedBase64 } from "../helpers/helper.material"; export interface MaterialRequest { /** 材质名 */ @@ -136,7 +137,7 @@ const debugMode = ref(false); const { CurrGeometry, Geometries, Material } = storeToRefs(scene); const enableTexture = ref(Material.value.useMap); const _textureSrc = ref(props.textureSrc); -const textureAdjustment = reactive({ +const textureAdjustment = ref({ wrapS: 0, wrapT: 0, rotation: 0, @@ -158,12 +159,12 @@ const materialInfo = reactive({ }); onMounted(() => { - scene.ChangeTextureAsync(_textureSrc.value); + scene.ChangeTextureFromUrlAsync(_textureSrc.value); }) watch(() => props.textureSrc, async (val) => { _textureSrc.value = val; - await scene.ChangeTextureAsync(_textureSrc.value); + await scene.ChangeTextureFromUrlAsync(_textureSrc.value); }); watch(model, async (val) => { @@ -178,6 +179,19 @@ watch(textureAdjustment, async (val) => { UpdateTexture(); }); +// 监听纹理更新 +watch(() => scene.CurrTexture, (val) => { + textureAdjustment.value = { + wrapS: val.wrapS, + wrapT: val.wrapT, + rotation: val.rotation, + repeatX: val.repeat.x, + repeatY: val.repeat.y, + moveX: val.offset.x, + moveY: val.offset.y + } +}) + async function UpdateMaterial() { Material.value.matalness = model.metallic; Material.value.roughness = model.roughness; @@ -188,7 +202,17 @@ async function UpdateMaterial() { } function UpdateTexture() { - scene.UpdateTexture(textureAdjustment); + const texture = scene.CurrTexture; + const val = textureAdjustment.value; + texture.wrapS = val.wrapS; + texture.wrapT = val.wrapT; + texture.anisotropy = 16; + texture.rotation = val.rotation; + texture.repeat.set(val.repeatX, val.repeatY); + texture.offset.set(val.moveX, val.moveY); + texture.needsUpdate = true; + + scene.Update(); } async function EnableTexture(enable: boolean) { @@ -208,7 +232,7 @@ async function HandleUpload() { name: materialInfo.materialName, logo: await scene.GenerateMaterialLogoAsync(), // jsonString -> Deflate -> BinaryString -> Base64 - file: btoa(String.fromCharCode(...await DeflateAsync(await scene.SerializeMaterialAsync()))) + file: ToDeflatedBase64(await scene.SerializeMaterialAsync()) }; emits('submit', data); return data; diff --git a/src/components/MaterialView.vue b/src/components/MaterialView.vue index 3053c03..f127c61 100644 --- a/src/components/MaterialView.vue +++ b/src/components/MaterialView.vue @@ -11,6 +11,7 @@ import { useScene } from '../stores/sceneStore'; import CfFlex from './CfFlex.vue'; import { GetConfig } from '../lib/libOutputConfig'; import { useEvent } from '../stores/eventStore'; +import { FromDeflateBase64 } from '../helpers/helper.material'; const scene = useScene(); const eventbus = useEvent(); @@ -21,10 +22,13 @@ const textureSrc = ref(config.textureSrc); // 禁用右键菜单 document.addEventListener('contextmenu', (e) => e.preventDefault()); -onMounted(() => { +onMounted(async () => { scene.Initial(container.value); + await HandleUpdateConfig(); + eventbus.Subscribe('submit', HandleUpload); eventbus.Subscribe('update-texture', HandleChangeTexture); + eventbus.Subscribe('update-config', HandleUpdateConfig) }); onBeforeUnmount(() => { @@ -41,6 +45,15 @@ function HandleChangeTexture() { textureSrc.value = config.textureSrc; } +async function HandleUpdateConfig() { + if (config.file && config.file.length > 0) { + console.log("base64", config.file); + const json = FromDeflateBase64(config.file); + await scene.ImportMaterialAsync(json); + } + textureSrc.value = config.textureSrc; +} +