修复材质参数调节滑块在手动编辑时的值限制失效的问题

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.12",
+  "version": "1.0.25",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/common/MaterialRenderer.ts

@@ -36,10 +36,11 @@ export class MaterialRenderer
         var ambient = new AmbientLight();
         this.scene.add(ambient);
 
-        //Pontual light
-        var point = new PointLight();
-        point.position.set(-0.5, 1, 1.5);
-        this.scene.add(point);
+        // 这个点光源会导致生成的缩略图上有一个高光
+        // //Pontual light
+        // var point = new PointLight();
+        // point.position.set(-0.5, 1, 1.5);
+        // this.scene.add(point);
     }
 
     //Set render size

src/common/MaterialSerializer.ts

@@ -1,4 +1,4 @@
-import {  CADFiler, CADObject, Database, DuplicateRecordCloning, Factory, LayerNode, ObjectId, PhysicalMaterialRecord } from "webcad_ue4_api";
+import {  CADFactory, CADFiler, CADObject, Database, DuplicateRecordCloning, Factory, LayerNode, ObjectId, PhysicalMaterialRecord, TextureTableRecord } from "webcad_ue4_api";
 
 // TODO: Danger: 注意入侵性代码
 // 疑似是WebCAD中的漏洞，当传入new Database()时，
@@ -14,8 +14,7 @@ Database.prototype.AllocationObjectId = function (this: Database, object: CADObj
     this.idMap.set(object.Id.Index, object.Id);
 }
 
-export function MaterialOut(material: PhysicalMaterialRecord): string
-{
+export function MaterialOut(material: PhysicalMaterialRecord): string {
     let db = new Database();
     db.WblockCloneObejcts(
         [material],
@@ -23,7 +22,14 @@ 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");
+    console.debug("DEBUG CAD Object Name", CADFactory['factory'].objectNameMap);
+    console.debug("CURRENT PROTOTYPE NAME\n", "LAYERNODE:", LayerNode.name, "TEXTURETABLERECORD:", TextureTableRecord.name, "PHYSICALMATERIALRECORD:", PhysicalMaterialRecord.name);
+    return json;
 }
 
 export function MaterialIn(fileData: Object[]): PhysicalMaterialRecord

src/components/MaterialAdjuster.vue

@@ -16,6 +16,8 @@
             <CfFlex gap="1em" v-if="debugMode">
                 <button class="btn-success" style="min-width: 110px;" @click="HandleUpload">保存</button>
                 <button class="btn-danger" style="min-width: 110px;" @click="HandleCancel">取消</button>
+                <button v-if="debugMode" class="btn-primary" style="min-width: 110px;"
+                    @click="HandleGenerateLogo">预览缩略图</button>
             </CfFlex>
         </div>
 
@@ -37,27 +39,27 @@
             <h3>材质调节</h3>
 
             <label>金属度</label>
-            <CfFlex gap="1em">
-                <input v-model="Material.matalness" @input="UpdateMaterial" type="range" min="0" max="1" step="0.01" />
-                <span>{{ Material.matalness }}</span>
+            <CfFlex gap="1em" class="input-range">
+                <input v-model="metallic" type="range" min="0" max="1" step="0.01" />
+                <input v-model="metallic" type="number" @change="ClampNumericValue" min="0" max="1" step="0.01" />
             </CfFlex>
 
             <label>粗糙度</label>
-            <CfFlex gap="1em">
-                <input v-model="Material.roughness" @input="UpdateMaterial" type="range" min="0" max="1" step="0.01" />
-                <span>{{ Material.roughness }}</span>
+            <CfFlex gap="1em" class="input-range">
+                <input v-model="roughness" type="range" min="0" max="1" step="0.01" />
+                <input v-model="roughness" type="number" @change="ClampNumericValue" min="0" max="1" step="0.01" />
             </CfFlex>
 
             <label>法线强度</label>
-            <CfFlex gap="1em">
-                <input v-model="Material.bumpScale" @input="UpdateMaterial" type="range" min="0" max="1" step="0.01" />
-                <span>{{ Material.bumpScale }}</span>
+            <CfFlex gap="1em" class="input-range">
+                <input v-model="normalScale" type="range" min="0" max="1" step="0.01" />
+                <input v-model="normalScale" type="number" @change="ClampNumericValue" min="0" max="1" step="0.01" />
             </CfFlex>
 
             <label>高光</label>
-            <CfFlex gap="1em">
-                <input v-model="Material.specular" @input="UpdateMaterial" type="range" min="0" max="1" step="0.01" />
-                <span>{{ Material.specular }}</span>
+            <CfFlex gap="1em" class="input-range">
+                <input v-model="emissiveIntensity" type="range" min="0" max="1" step="0.01" />
+                <input v-model="emissiveIntensity" type="number" @change="ClampNumericValue" min="0" max="1" step="0.01" />
             </CfFlex>
         </div>
 
@@ -108,12 +110,15 @@
 </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";
+import { DownloadFile } from "../helpers/helper.web";
+import MathHelper from "../helpers/MathHelper";
 
 export interface MaterialRequest {
     /** 材质名 */
@@ -125,21 +130,20 @@ export interface MaterialRequest {
 }
 
 const scene = useScene();
+const { Material, CurrGeometry, Geometries } = storeToRefs(scene);
 
 const props = defineProps<{
     name?: string;
     textureSrcList?: string[];
+    /** 忽略纹理参数，提交时直接输出场景内的材质，用于某些在组件外对场景进行编辑的特殊情况（例如材质编辑模式） */
+    ignoreTexture?: boolean;
 }>();
 const emits = defineEmits<{
     (e: 'cancel'): void;
     (e: 'submit', data: MaterialRequest[]): void;
 }>();
 
-const Material = computed(() => scene.Material);
-const CurrGeometry = computed(() => scene.CurrGeometry);
-const Geometries = computed(() => scene.Geometries);
-
-const debugMode = ref(true);
+const debugMode = ref(false);
 const _textureSrc = ref(props.textureSrcList);
 const debugTextureSrc = ref("");
 const textureAdjustment = ref<TextureAdjustment>({
@@ -151,6 +155,39 @@ const textureAdjustment = ref<TextureAdjustment>({
     moveX: 0,
     moveY: 0
 });
+
+const metallic = computed({
+    get: () => Material.value.matalness,
+    set: (val) => {
+        Material.value.matalness = MathHelper.clamp(val, 0, 1);
+        UpdateMaterial();
+    }
+});
+
+const roughness = computed({
+    get: () => Material.value.roughness,
+    set: (val) => {
+        Material.value.roughness = MathHelper.clamp(val, 0, 1);
+        UpdateMaterial();
+    }
+});
+
+const normalScale = computed({
+    get: () => Material.value.bumpScale,
+    set: (val) => {
+        Material.value.bumpScale = MathHelper.clamp(val, 0, 1);
+        UpdateMaterial();
+    }
+});
+
+const emissiveIntensity = computed({
+    get: () => Material.value.specular,
+    set: (val) => {
+        Material.value.specular = MathHelper.clamp(val, 0, 1);
+        UpdateMaterial();
+    }
+});
+
 const uploading = ref(false);
 // const model = reactive({
 //     metallic: Material.value.matalness,
@@ -161,23 +198,21 @@ const uploading = ref(false);
 const materialInfo = reactive({
     dirId: DirectoryId.MaterialDir, // 正常来说是2
     materialName: props.name || '材质',
-    inputText:'',
+    inputText: '',
 });
 
-onMounted(async () => {
-    await scene.ChangeTextureFromUrlAsync(_textureSrc.value[0]);
-    UpdateTexture();
-})
-
 watch(() => props.textureSrcList, async (val) => {
     _textureSrc.value = val;
     await scene.ChangeTextureFromUrlAsync(_textureSrc.value[0]);
-    UpdateTexture();
+});
+
+watch(() => props.name, () => {
+    materialInfo.materialName = props.name || '材质';
 });
 
 watch(textureAdjustment, async (val) => {
     UpdateTexture();
-});
+}, { deep: true });
 
 // 监听纹理更新
 watch(() => scene.CurrTexture, (val) => {
@@ -208,7 +243,6 @@ async function UpdateMaterial() {
 }
 
 function UpdateTexture() {
-    console.log('UpdateTexture')
     const texture = scene.CurrTexture;
     const val = textureAdjustment.value;
     texture.wrapS = val.wrapS;
@@ -223,13 +257,14 @@ function UpdateTexture() {
 }
 
 async function loadData() {
-    if(!materialInfo.inputText) return;
+    if (!materialInfo.inputText) return;
     const json = JSON.parse(materialInfo.inputText);
     const cadFile = FromDeflateBase64(json.file);
     scene.ImportMaterialAsync(cadFile)
 }
 
 async function HandleUpload() {
+    console.log(scene.GetEditor().Viewer.Scene.children);
     try {
         if (IsNullOrWhitespace(materialInfo.materialName)) {
             alert('材质名称不可为空');
@@ -238,9 +273,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,
@@ -250,6 +296,8 @@ async function HandleUpload() {
                 };
                 result.push(mat);
             }
+        }
+
         await scene.ChangeTextureFromUrlAsync(_textureSrc.value[0]);
         emits('submit', result);
         return result;
@@ -262,6 +310,21 @@ function HandleCancel() {
     emits('cancel');
 }
 
+async function HandleGenerateLogo() {
+    const blob = await scene.GenerateMaterialLogoAsync();
+    DownloadFile("logo.png", blob);
+}
+
+function ClampNumericValue(e: InputEvent) {
+    const elm = e.target as HTMLInputElement;
+    const min = +elm.min;
+    const max = +elm.max;
+
+    if (isNaN(min) || isNaN(max)) return;
+
+    elm.valueAsNumber = MathHelper.clamp(elm.valueAsNumber, min, max);
+}
+
 defineExpose({
     Upload: HandleUpload,
     Cancel: HandleCancel
@@ -304,26 +367,6 @@ select
     margin: 0.5rem 0;
 }
 
-input[type="range"]
-{
-    width: 220px;
-    margin: 0.5rem 0;
-}
-
-input[type="text"]
-{
-    width: 220px;
-    padding: 4px;
-    margin: 0.5rem 0;
-}
-
-input[type="number"]
-{
-    width: 220px;
-    padding: 4px;
-    margin: 0.5rem 0;
-}
-
 .btn-success
 {
     background-color: #4caf50;
@@ -368,4 +411,40 @@ input[type="number"]
 {
     background-color: #0a7ed2;
 }
+
+.input-range
+{
+    max-width: 300px;
+
+    input[type="range"]
+    {
+        flex: 14;
+        margin: 0.5rem 0;
+    }
+
+    input[type="text"]
+    {
+        flex: 2;
+        padding: 4px;
+        margin: 0.5rem 0;
+    }
+
+    input[type="number"]
+    {
+        flex: 2;
+        min-width: 0;
+        padding: 4px;
+        margin: 0.5rem 0;
+        appearance: textfield;
+        -moz-appearance: textfield;
+        margin: 0;
+    }
+
+    input::-webkit-outer-spin-button,
+    input::-webkit-inner-spin-button
+    {
+        -webkit-appearance: none;
+        margin: 0;
+    }
+}
 </style>

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" :name="matName" :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">
@@ -20,6 +21,7 @@ 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());
@@ -51,15 +53,19 @@ async function HandleUpdateConfig() {
         matName.value = config.updateModel.name;
         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,10 +20,10 @@ export function ConfigureLibOutput(config: Partial<LibOutputConfig>) {
 
 export type LibOutputConfig = {
     /**
-     * 材质文件域名
+     * 材质文件域名，用来获取贴图文件
      */
     host: string,
-    /** 材质贴图链接列表，场景会只会载入第一个链接作为纹理预览，但是导出提交时会为所有链接创建材质 */
+    /** 材质贴图链接列表，用与批量提交，场景会只会载入第一个链接作为纹理预览，但是导出提交时会为所有链接创建材质 */
     textureSrc: Array<string>,
     /** 更新模型，对材质进行编辑时赋值 */
     updateModel?: {

src/stores/sceneStore.ts

@@ -1,7 +1,7 @@
 import { defineStore } from "pinia";
 import { computed, ref } from "vue";
 import { MaterialEditor } from "../common/MaterialEditor";
-import { Database, ObjectId, PhysicalMaterialRecord, TextureTableRecord } from "webcad_ue4_api";
+import { Database, PhysicalMaterialRecord, TextureTableRecord } from "webcad_ue4_api";
 import { LoadImageFromUrl } from "../helpers/helper.imageLoader";
 import { Texture } from "three";
 import { materialRenderer } from "../common/MaterialRenderer";
@@ -75,7 +75,6 @@ const sceneSetup = () => {
     }
 
     async function UpdateMaterialAsync() {
-        console.log(Material.value.Update);
         // TODO: Danger: 如果等待下面这一行，会导致更新卡住（未知问题）
         Material.value.Update();
         // Material.value.Material.needsUpdate = true;

vite.config.ts

@@ -9,12 +9,19 @@ const __dirname = dirname(fileURLToPath(import.meta.url))
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [vue(), dts({rollupTypes: true, tsconfigPath: './tsconfig.app.json',insertTypesEntry: true})],
+  define: { 'process.env.NODE_ENV': '"production"' },
+  resolve: {
+    alias: {
+      // 'vue': path.resolve(__dirname, './node_modules/vue/dist/vue.esm-browser.prod.js'),
+      // 'pinia': path.resolve(__dirname, './node_modules/pinia/dist/pinia.esm-browser.js'),
+    }
+  },
   build: {
     lib: {
       entry: resolve(__dirname, 'src/lib/index.ts'),
       name: 'MaterialEditor',
       fileName: (format) => `material-editor.${format}.js`,
-      formats: ['es']
+      formats: ['es', 'iife', 'umd']
     },
     rollupOptions: {
       // external: ['vue'],