From 99613dbc83dd9d06136142f23d05a33ca05d2ba4 Mon Sep 17 00:00:00 2001
From: "2817212736@qq.com" <2817212736@qq.com>
Date: Thu, 29 May 2025 19:00:36 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=9D=90=E8=B4=A8=E5=AF=BC?=
 =?UTF-8?q?=E5=85=A5=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                        |  2 +-
 src/common/MaterialEditor.ts        | 15 ++++++-----
 src/components/MaterialAdjuster.vue | 42 +++++++++++++----------------
 src/stores/sceneStore.ts            | 19 +++++++------
 4 files changed, 40 insertions(+), 38 deletions(-)

diff --git a/package.json b/package.json
index 63ea726..b21e113 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "material-editor",
   "private": true,
-  "version": "1.0.7",
+  "version": "1.0.8",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/src/common/MaterialEditor.ts b/src/common/MaterialEditor.ts
index bd3a2ec..45a2e56 100644
--- a/src/common/MaterialEditor.ts
+++ b/src/common/MaterialEditor.ts
@@ -167,15 +167,17 @@ export class MaterialEditor
     private Material: PhysicalMaterialRecord;
     setMaterial(mat: PhysicalMaterialRecord)
     {
-        console.log("set", mat.Material);
         this.Material = mat;
-        this._MeshMaterial.copy(mat.Material);
+        // for (const child of this.ShowObject.children) {
+        //     if (child instanceof Mesh) {
+        //         child.material = mat.Material;
+        //     }
+        // }
 
-        let mtl = this._MeshMaterial;
-        console.log("set2", this._MeshMaterial)
+        console.log(mat.Material);
         
-        this.ShowMesh.material = mtl;
-
+        this._MeshMaterial.copy(mat.Material);
+        let mtl = this._MeshMaterial;
         if (mtl.metalness > 0.8)
             this.LoadMetalEnv().then(env =>
             {
@@ -214,6 +216,7 @@ export class MaterialEditor
 
     async Update()
     {
+        console.log("copy:", this.Material.Material.metalness);
         let mat = this.ShowMesh.material as MeshPhysicalMaterial;
         mat.needsUpdate = true;
 
diff --git a/src/components/MaterialAdjuster.vue b/src/components/MaterialAdjuster.vue
index 72c916f..5d67846 100644
--- a/src/components/MaterialAdjuster.vue
+++ b/src/components/MaterialAdjuster.vue
@@ -38,25 +38,25 @@
 
             <label>金属度</label>
             <CfFlex gap="1em">
-                <input v-model="Material.matalness" @change="UpdateMaterial" type="range" min="0" max="1" step="0.01" />
+                <input v-model="Material.matalness" @input="UpdateMaterial" type="range" min="0" max="1" step="0.01" />
                 <span>{{ Material.matalness }}</span>
             </CfFlex>
 
             <label>粗糙度</label>
             <CfFlex gap="1em">
-                <input v-model="Material.roughness" @change="UpdateMaterial" type="range" min="0" max="1" step="0.01" />
+                <input v-model="Material.roughness" @input="UpdateMaterial" type="range" min="0" max="1" step="0.01" />
                 <span>{{ Material.roughness }}</span>
             </CfFlex>
 
             <label>法线强度</label>
             <CfFlex gap="1em">
-                <input v-model="Material.bumpScale" @change="UpdateMaterial" type="range" min="0" max="1" step="0.01" />
+                <input v-model="Material.bumpScale" @input="UpdateMaterial" type="range" min="0" max="1" step="0.01" />
                 <span>{{ Material.bumpScale }}</span>
             </CfFlex>
 
             <label>高光</label>
             <CfFlex gap="1em">
-                <input v-model="Material.specular" @change="UpdateMaterial" type="range" min="0" max="1" step="0.01" />
+                <input v-model="Material.specular" @input="UpdateMaterial" type="range" min="0" max="1" step="0.01" />
                 <span>{{ Material.specular }}</span>
             </CfFlex>
         </div>
@@ -64,9 +64,9 @@
         <div class="adjust-section">
             <h3>纹理调节</h3>
             <label>启用纹理</label>
-            <input type="checkbox" v-model="enableTexture" />
+            <input type="checkbox" v-model="Material.useMap" @change="UpdateMaterial" />
 
-            <!-- <label>平铺U</label>
+            <label>平铺U</label>
             <select v-model="textureAdjustment.wrapS">
                 <option value="0">镜像平铺</option>
                 <option value="1">平铺</option>
@@ -78,7 +78,7 @@
                 <option value="0">镜像平铺</option>
                 <option value="1">平铺</option>
                 <option value="2">展开</option>
-            </select> -->
+            </select>
 
             <label>旋转</label>
             <input v-model="textureAdjustment.rotation" type="number" step="0.01" min="0" max="359" />
@@ -108,9 +108,8 @@
 </template>
 
 <script setup lang='ts'>
-import { ref, reactive, watch, onMounted } from "vue"
+import { ref, reactive, watch, onMounted, computed } from "vue"
 import { useScene, type TextureAdjustment } from "../stores/sceneStore";
-import { storeToRefs } from "pinia";
 import CfFlex from "./CfFlex.vue";
 import { DirectoryId } from "../api/Request";
 import { IsNullOrWhitespace } from "../helpers/helper.string";
@@ -135,9 +134,11 @@ const emits = defineEmits<{
     (e: 'submit', data: MaterialRequest): void; 
 }>();
 
-const debugMode = ref(true);
-const { CurrGeometry, Geometries, Material } = storeToRefs(scene);
-const enableTexture = ref(Material.value.useMap);
+const Material = computed(() => scene.Material);
+const CurrGeometry = computed(() => scene.CurrGeometry);
+const Geometries = computed(() => scene.Geometries);
+
+const debugMode = ref(false);
 const _textureSrc = ref(props.textureSrc);
 const textureAdjustment = ref<TextureAdjustment>({
     wrapS: 0,
@@ -170,11 +171,6 @@ watch(() => props.textureSrc, async (val) => {
     await scene.ChangeTextureFromUrlAsync(_textureSrc.value);
 });
 
-
-watch(enableTexture, async (val) => {
-    await EnableTexture(val);
-});
-
 watch(textureAdjustment, async (val) => {
     UpdateTexture();
 });
@@ -194,13 +190,18 @@ watch(() => scene.CurrTexture, (val) => {
 })
 
 async function UpdateMaterial() {
-    console.log(scene.CurrentShowObject)
+    // console.log((scene.CurrentShowObject.children[0] as Mesh).material.metalness);
+    // console.log(Material.value.Material.metalness);
+    // console.log(scene.Material == scene.GetEditor().Material)
+
     // Material.value.matalness = model.metallic;
     // Material.value.roughness = model.roughness;
     // Material.value.bumpScale = model.normalScale;
     // Material.value.specular = model.emissiveIntensity;
     // Material.value.side = DoubleSide;
     await scene.UpdateMaterialAsync();
+    scene.Update();
+    await scene.UpdateMaterialAsync();
 }
 
 function UpdateTexture() {
@@ -218,11 +219,6 @@ function UpdateTexture() {
     scene.Update();
 }
 
-async function EnableTexture(enable: boolean) {
-    Material.value.useMap = enable;
-    await scene.UpdateMaterialAsync();
-}
-
 async function loadData() {
     if(!materialInfo.inputText) return;
     const json = JSON.parse(materialInfo.inputText);
diff --git a/src/stores/sceneStore.ts b/src/stores/sceneStore.ts
index 5c2be40..3b72f2f 100644
--- a/src/stores/sceneStore.ts
+++ b/src/stores/sceneStore.ts
@@ -11,6 +11,7 @@ import { GetConfig } from "../lib/libOutputConfig";
 const sceneSetup = () => {
     let _editor: MaterialEditor | undefined;
     let _database: Database | undefined;
+    const _material = ref<PhysicalMaterialRecord>(new PhysicalMaterialRecord());
     const _currGeometry = ref<string>('球');
     const _currTexture = ref<Texture>();
     const CurrGeometry = computed({
@@ -19,7 +20,7 @@ const sceneSetup = () => {
     })
     const CurrTexture = computed<Texture>(() => _currTexture.value);
     const Geometries = ref<string[]>([]);
-    const Material = ref<PhysicalMaterialRecord>(new PhysicalMaterialRecord());
+    const Material = computed(() => _material.value);
     const CurrentShowObject = computed(() => _editor.ShowObject);
 
     function Initial(canvas: HTMLElement) {
@@ -74,15 +75,15 @@ const sceneSetup = () => {
     }
 
     async function UpdateMaterialAsync() {
-        console.log('UpdateMaterialAsync')
-        await Material.value.Update();
+        console.log(Material.value.Update);
+        // TODO: Danger: 如果等待下面这一行，会导致更新卡住（未知问题）
+        Material.value.Update();
+        // Material.value.Material.needsUpdate = true;
         await _editor.Update();
         Update();
     }
 
     async function ChangeTextureFromUrlAsync(url?: string) {
-
-        console.log('ChangeTextureFromUrlAsync')
         // 关联贴图
         const db = Material.value.Db;
         if (!db) return; // 材质未初始化
@@ -123,9 +124,10 @@ const sceneSetup = () => {
 
     async function ImportMaterialAsync(materialJson: string) {
         const material = MaterialIn(JSON.parse(materialJson));
-        Material.value = material;
-        _editor.setMaterial(material);
+        _material.value = material;
+        _editor.setMaterial(_material.value as PhysicalMaterialRecord);
         await ChangeTextureFromUrlAsync();
+        await UpdateMaterialAsync();
     }
 
     async function GenerateMaterialLogoAsync() {
@@ -158,7 +160,8 @@ const sceneSetup = () => {
         ImportMaterialAsync,
         GenerateMaterialLogoAsync,
         Dispose,
-        CurrentShowObject
+        CurrentShowObject,
+        GetEditor: () => _editor
     };
 };