修复编辑模式传入的材质名失效的问题

README.md

@@ -1,3 +1,9 @@
 # 材质编辑器
 
-独立实现的WebCAD材质编辑器，提供材质预览，调节和上传功能。
+独立实现的PBR材质编辑器，提供PBR材质的预览，参数调整功能。
+
+- 支持PBR材质的序列化输出以及反序列化输入。
+- 支持多种模型的预览（球体，圆环，立方体，环面纽结，圆锥体）
+- 支持PBR材质的参数调节（金属度，粗糙度，法线强度，高光强度）
+- 支持纹理的参数调节（U/V平铺，偏移，缩放调节）
+- 支持任意程序调用，可挂在于HTML元素上

package.json

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

src/common/MaterialEditor.ts

@@ -168,13 +168,6 @@ 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;
@@ -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/common/MaterialSerializer.ts

@@ -1,4 +1,4 @@
-import {  CADFiler, CADObject, Database, DuplicateRecordCloning, Factory, LayerNode, ObjectId, PhysicalMaterialRecord } from "webcad_ue4_api";
+import {  CADFiler, CADObject, Database, DuplicateRecordCloning, Factory, LayerNode, ObjectId, PhysicalMaterialRecord, TextureTableRecord } from "webcad_ue4_api";
 
 // TODO: Danger: 注意入侵性代码
 // 疑似是WebCAD中的漏洞，当传入new Database()时，
@@ -23,7 +23,12 @@ export function MaterialOut(material: PhysicalMaterialRecord): string
         new Map(),
         DuplicateRecordCloning.Ignore
     );
-    return JSON.stringify(db.FileWrite().Data);
+    let json = JSON.stringify(db.FileWrite().Data);
+    // // TODO: Danger: 因为WebCAD依赖库中的部分类的构造函数名异常，所以在生成JSON时需要对类名进行替换
+    json = json.replace(LayerNode.name, "LayerNode")
+        .replace(TextureTableRecord.name, "TextureTableRecord")
+        .replace(PhysicalMaterialRecord.name, "PhysicalMaterialRecord");
+    return json;
 }
 
 export function MaterialIn(fileData: Object[]): PhysicalMaterialRecord

src/components/MaterialAdjuster.vue

@@ -108,12 +108,13 @@
 </template>
 
 <script setup lang='ts'>
-import { ref, reactive, watch, onMounted, computed } from "vue"
+import { ref, reactive, watch, computed } from "vue"
 import { useScene, type TextureAdjustment } from "../stores/sceneStore";
 import CfFlex from "./CfFlex.vue";
 import { DirectoryId } from "../api/Request";
 import { IsNullOrWhitespace } from "../helpers/helper.string";
 import { FromDeflateBase64, ToDeflatedBase64 } from "../helpers/helper.material";
+import { storeToRefs } from "pinia";
 
 export interface MaterialRequest {
     /** 材质名 */
@@ -125,20 +126,20 @@ export interface MaterialRequest {
 }
 
 const scene = useScene();
+const { Material, CurrGeometry, Geometries } = storeToRefs(scene);
 
 const props = defineProps<{
-    readonly textureSrcList?: string[];
+    name?: string;
+    textureSrcList?: string[];
+    /** 忽略纹理参数，提交时直接输出场景内的材质，用于某些在组件外对场景进行编辑的特殊情况（例如材质编辑模式） */
+    ignoreTexture?: boolean;
 }>();
 const emits = defineEmits<{
     (e: 'cancel'): void;
     (e: 'submit', data: MaterialRequest[]): void;
 }>();
 
-const Material = computed(() => scene.Material);
+const debugMode = ref(true);
-const CurrGeometry = computed(() => scene.CurrGeometry);
-const Geometries = computed(() => scene.Geometries);
-
-const debugMode = ref(false);
 const _textureSrc = ref(props.textureSrcList);
 const debugTextureSrc = ref("");
 const textureAdjustment = ref<TextureAdjustment>({
@@ -159,26 +160,25 @@ const uploading = ref(false);
 // });
 const materialInfo = reactive({
     dirId: DirectoryId.MaterialDir, // 正常来说是2
-    materialName: '材质',
+    materialName: props.name || '材质',
     inputText: '',
 });
 
-onMounted(() => {
-    scene.ChangeTextureFromUrlAsync(_textureSrc.value[0]);
-})
-
 watch(() => props.textureSrcList, async (val) => {
     _textureSrc.value = val;
     await scene.ChangeTextureFromUrlAsync(_textureSrc.value[0]);
 });
 
+watch(() => props.name, () => {
+    materialInfo.materialName = props.name || '材质';
+});
+
 watch(textureAdjustment, async (val) => {
     UpdateTexture();
-});
+}, { deep: true });
 
 // 监听纹理更新
 watch(() => scene.CurrTexture, (val) => {
-    console.log('watch-CurrTexture')
     textureAdjustment.value = {
         wrapS: val.wrapS,
         wrapT: val.wrapT,
@@ -206,7 +206,6 @@ async function UpdateMaterial() {
 }
 
 function UpdateTexture() {
-    console.log('UpdateTexture')
     const texture = scene.CurrTexture;
     const val = textureAdjustment.value;
     texture.wrapS = val.wrapS;
@@ -228,6 +227,7 @@ async function loadData() {
 }
 
 async function HandleUpload() {
+    console.log(scene.GetEditor().Viewer.Scene.children);
     try {
         if (IsNullOrWhitespace(materialInfo.materialName)) {
             alert('材质名称不可为空');
@@ -236,9 +236,20 @@ async function HandleUpload() {
 
         uploading.value = true;
         const result = [];
+        if (props.ignoreTexture) {
+            // 直接将材质序列化
+            const mat = {
+                name: materialInfo.materialName,
+                logo: await scene.GenerateMaterialLogoAsync(),
+                // jsonString -> Deflate -> BinaryString -> Base64
+                file: ToDeflatedBase64(await scene.SerializeMaterialAsync())
+            };
+            result.push(mat);
+        }
+        else {
             // 遍历纹理链接列表，更改纹理后将材质序列化，然后还原场景
             let idx = 0;
-        for (const src of props.textureSrcList) {
+            for (const src of _textureSrc.value) {
                 await scene.ChangeTextureFromUrlAsync(src);
                 const mat = {
                     name: materialInfo.materialName + ++idx,
@@ -248,6 +259,8 @@ async function HandleUpload() {
                 };
                 result.push(mat);
             }
+        }
+
         await scene.ChangeTextureFromUrlAsync(_textureSrc.value[0]);
         emits('submit', result);
         return result;

src/components/MaterialView.vue

@@ -1,7 +1,8 @@
 <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" :ignore-texture="editMode"
+            @cancel="config.cancelCallback" @submit="config.submitCallback" />
     </CfFlex>
 </template>
 <script setup lang="ts">
@@ -19,6 +20,8 @@ const container = useTemplateRef('container');
 const adjusterRef = useTemplateRef('adjuster');
 const config = GetConfig();
 const textureSrc = ref<string[]>(Array.from(config.textureSrc));
+const matName = ref<string>();
+const editMode = ref(false);
 
 // 禁用右键菜单
 document.addEventListener('contextmenu', (e) => e.preventDefault());
@@ -46,19 +49,23 @@ 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);
+        editMode.value = true;
     }
+    else { editMode.value = false; }
+    if (config.textureSrc) {
         textureSrc.value = Array.from(config.textureSrc);
+        await scene.ChangeTextureFromUrlAsync(textureSrc.value[0]);
+    }
 }
 
 </script>
 
 <style scoped lang="scss">
-.material-view
+.material-view {
-{
     width: 100%;
     height: 100%;
     box-sizing: border-box;

src/helpers/helper.async.ts

@@ -0,0 +1,15 @@
+/**
+ * 异步等待
+ * @param ms 等待毫秒数
+ * @param value 等待完成后返回的值
+ * @returns 
+ */
+export function AsyncDelay<T>(ms: number, value?: T) {
+    return new Promise<T>((resolve) => setTimeout(resolve, ms, value));
+}
+
+export async function AsyncWaitUntil(predicate: () => boolean, waitTime = 100) {
+    while (!predicate()) {
+        await AsyncDelay(waitTime);
+    }
+}

src/lib/libOutputConfig.ts

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

src/stores/sceneStore.ts

@@ -75,7 +75,6 @@ const sceneSetup = () => {
     }
 
     async function UpdateMaterialAsync() {
-        console.log(Material.value.Update);
         // TODO: Danger: 如果等待下面这一行，会导致更新卡住（未知问题）
         Material.value.Update();
         // Material.value.Material.needsUpdate = true;