添加编辑模式

src/components/MaterialAdjuster.vue

@@ -27,7 +27,7 @@
             <h3>纹理选择（DEBUG）</h3>
             <label>纹理链接</label>
             <input v-model.trim="_textureSrc" type="text" placeholder="在此键入纹理图像的URL..." />
-            <button class="btn-primary" @click="scene.ChangeTextureAsync(_textureSrc)"
+            <button class="btn-primary" @click="scene.ChangeTextureFromUrlAsync(_textureSrc)"
                 style="margin-left: 1em;">应用</button>
         </div>
         <div class="adjust-section">
@@ -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<TextureAdjustment>({
+const textureAdjustment = ref<TextureAdjustment>({
     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;

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;
+}
+
 </script>
 
 <style scoped lang="scss">