材质调节器滑块支持手工输入数值

package.json

@@ -1,7 +1,7 @@
 {
   "name": "material-editor",
   "private": true,
-  "version": "1.0.19",
+  "version": "1.0.24",
   "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, TextureTableRecord } 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,26 +14,22 @@ Database.prototype.AllocationObjectId = function (this: Database, object: CADObj
     this.idMap.set(object.Id.Index, object.Id);
 }
 
-export function MaterialOut(material: PhysicalMaterialRecord): string
-{
-    try {
-        let db = new Database();
-        db.WblockCloneObejcts(
-            [material],
-            db.MaterialTable,
-            new Map(),
-            DuplicateRecordCloning.Ignore
-        );
-        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;
-    } catch (error) {
-        console.error("error in MaterialOut:", error, material);
-        throw error;
-    }
+export function MaterialOut(material: PhysicalMaterialRecord): string {
+    let db = new Database();
+    db.WblockCloneObejcts(
+        [material],
+        db.MaterialTable,
+        new Map(),
+        DuplicateRecordCloning.Ignore
+    );
+    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,31 @@
             <h3>材质调节</h3>
 
             <label>金属度</label>
-            <CfFlex gap="1em">
+            <CfFlex gap="1em" class="input-range">
                 <input v-model="Material.matalness" @input="UpdateMaterial" type="range" min="0" max="1" step="0.01" />
-                <span>{{ Material.matalness }}</span>
+                <input v-model="Material.matalness" @input="ClampNumericValue" @change="UpdateMaterial" type="number" min="0"
+                    max="1" step="0.01" />
             </CfFlex>
 
             <label>粗糙度</label>
-            <CfFlex gap="1em">
+            <CfFlex gap="1em" class="input-range">
                 <input v-model="Material.roughness" @input="UpdateMaterial" type="range" min="0" max="1" step="0.01" />
-                <span>{{ Material.roughness }}</span>
+                <input v-model="Material.roughness" @input="ClampNumericValue" @change="UpdateMaterial" type="number" min="0"
+                    max="1" step="0.01" />
             </CfFlex>
 
             <label>法线强度</label>
-            <CfFlex gap="1em">
+            <CfFlex gap="1em" class="input-range">
                 <input v-model="Material.bumpScale" @input="UpdateMaterial" type="range" min="0" max="1" step="0.01" />
-                <span>{{ Material.bumpScale }}</span>
+                <input v-model="Material.bumpScale" @input="ClampNumericValue" @change="UpdateMaterial" type="number" min="0"
+                    max="1" step="0.01" />
             </CfFlex>
 
             <label>高光</label>
-            <CfFlex gap="1em">
+            <CfFlex gap="1em" class="input-range">
                 <input v-model="Material.specular" @input="UpdateMaterial" type="range" min="0" max="1" step="0.01" />
-                <span>{{ Material.specular }}</span>
+                <input v-model="Material.specular" @input="ClampNumericValue" @change="UpdateMaterial" type="number" min="0"
+                    max="1" step="0.01" />
             </CfFlex>
         </div>
 
@@ -115,6 +121,7 @@ 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";
 
 export interface MaterialRequest {
     /** 材质名 */
@@ -273,6 +280,22 @@ 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;
+
+    if (elm.valueAsNumber < min) elm.valueAsNumber = min;
+    if (elm.valueAsNumber > max) elm.valueAsNumber = max;
+}
+
 defineExpose({
     Upload: HandleUpload,
     Cancel: HandleCancel
@@ -315,26 +338,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;
@@ -379,4 +382,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/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";

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'],