修复材质导入问题

2025-05-29 19:00:36 +08:00
parent 26f1c60a43
commit 99613dbc83
4 changed files with 40 additions and 38 deletions
--- 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",
--- 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;

--- 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);
--- 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
    };
 };