修复场景初始化后纹理未更新的问题

package.json

@@ -1,7 +1,7 @@
 {
   "name": "material-editor",
   "private": true,
-  "version": "1.0.10",
+  "version": "1.0.12",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/common/MaterialEditor.ts

@@ -168,14 +168,7 @@ export class MaterialEditor
     setMaterial(mat: PhysicalMaterialRecord)
     {
         this.Material = mat;
-        // for (const child of this.ShowObject.children) {
-        //     if (child instanceof Mesh) {
-        //         child.material = mat.Material;
-        //     }
-        // }
 
-        console.log(mat.Material);
-        
         this._MeshMaterial.copy(mat.Material);
         let mtl = this._MeshMaterial;
         if (mtl.metalness > 0.8)
@@ -216,7 +209,6 @@ export class MaterialEditor
 
     async Update()
     {
-        console.log("copy:", this.Material.Material.metalness);
         let mat = this.ShowMesh.material as MeshPhysicalMaterial;
         mat.needsUpdate = true;
 

src/components/MaterialAdjuster.vue

@@ -127,7 +127,8 @@ export interface MaterialRequest {
 const scene = useScene();
 
 const props = defineProps<{
-    readonly textureSrcList?: string[];
+    name?: string;
+    textureSrcList?: string[];
 }>();
 const emits = defineEmits<{
     (e: 'cancel'): void;
@@ -138,7 +139,7 @@ const Material = computed(() => scene.Material);
 const CurrGeometry = computed(() => scene.CurrGeometry);
 const Geometries = computed(() => scene.Geometries);
 
-const debugMode = ref(false);
+const debugMode = ref(true);
 const _textureSrc = ref(props.textureSrcList);
 const debugTextureSrc = ref("");
 const textureAdjustment = ref<TextureAdjustment>({
@@ -159,17 +160,19 @@ const uploading = ref(false);
 // });
 const materialInfo = reactive({
     dirId: DirectoryId.MaterialDir, // 正常来说是2
-    materialName: '材质',
+    materialName: props.name ||  '材质',
     inputText:'',
 });
 
-onMounted(() => {
+onMounted(async () => {
-    scene.ChangeTextureFromUrlAsync(_textureSrc.value[0]);
+    await scene.ChangeTextureFromUrlAsync(_textureSrc.value[0]);
+    UpdateTexture();
 })
 
 watch(() => props.textureSrcList, async (val) => {
     _textureSrc.value = val;
     await scene.ChangeTextureFromUrlAsync(_textureSrc.value[0]);
+    UpdateTexture();
 });
 
 watch(textureAdjustment, async (val) => {
@@ -178,7 +181,6 @@ watch(textureAdjustment, async (val) => {
 
 // 监听纹理更新
 watch(() => scene.CurrTexture, (val) => {
-    console.log('watch-CurrTexture')
     textureAdjustment.value = {
         wrapS: val.wrapS,
         wrapT: val.wrapT,

src/components/MaterialView.vue

@@ -1,7 +1,7 @@
 <template>
     <CfFlex class="material-view">
         <div ref="container" class="material-view-container" />
-        <MaterialAdjuster ref="adjuster" class="material-view-sider" :textureSrcList="textureSrc" @cancel="config.cancelCallback" @submit="config.submitCallback" />
+        <MaterialAdjuster ref="adjuster" class="material-view-sider" :name="matName" :textureSrcList="textureSrc" @cancel="config.cancelCallback" @submit="config.submitCallback" />
     </CfFlex>
 </template>
 <script setup lang="ts">
@@ -19,6 +19,7 @@ const container = useTemplateRef('container');
 const adjusterRef = useTemplateRef('adjuster');
 const config = GetConfig();
 const textureSrc = ref<string[]>(Array.from(config.textureSrc));
+const matName = ref<string>();
 
 // 禁用右键菜单
 document.addEventListener('contextmenu', (e) => e.preventDefault()); 
@@ -46,9 +47,9 @@ function HandleChangeTexture() {
 }
 
 async function HandleUpdateConfig() {
-    if (config.file && config.file.length > 0) {
+    if (config.updateModel) {
-        console.log("base64", config.file);
+        matName.value = config.updateModel.name;
-        const json = FromDeflateBase64(config.file);
+        const json = FromDeflateBase64(config.updateModel.file);
         await scene.ImportMaterialAsync(json);
     }
     textureSrc.value = Array.from(config.textureSrc);
@@ -59,8 +60,8 @@ async function HandleUpdateConfig() {
 <style scoped lang="scss">
 .material-view
 {
-    width: 100cqw;
+    width: 100%;
-    height: 100cqh;
+    height: 100%;
     box-sizing: border-box;
     padding: 0;
     margin: 0;

src/lib/libOutputConfig.ts

@@ -25,8 +25,13 @@ export type LibOutputConfig = {
     host: string,
     /** 材质贴图链接列表，场景会只会载入第一个链接作为纹理预览，但是导出提交时会为所有链接创建材质 */
     textureSrc: Array<string>,
-    /** 材质预设数据，base64编码 */
+    /** 更新模型，对材质进行编辑时赋值 */
-    file?: string,
+    updateModel?: {
+        /** 材质名 */
+        name: string;
+        /** 材质预设数据，base64编码 */
+        file: string;
+    }
     /** 环境贴图链接（立方体贴图，按照顺序输入[右左上下前后]） */
     envTextureSrc: string[],
     /** 灰度环境贴图链接，输入格式与环境贴图一致 */

src/main.ts

@@ -1,5 +1,9 @@
 import './assets/main.css'
 import { Mount } from './lib';
 
-Mount("#app");
+const app = document.createElement('div');
+app.style.width = '100%';
+app.style.height = '100vh';
+document.body.appendChild(app);
+Mount(app);