package.json

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

src/common/MaterialRenderer.ts

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

src/common/MaterialSerializer.ts

@@ -1,4 +1,4 @@
-import {  CADFactory, CADFiler, CADObject, Database, DuplicateRecordCloning, Factory, LayerNode, ObjectId, PhysicalMaterialRecord, TextureTableRecord } from "webcad_ue4_api";
+import {  CADFiler, CADObject, Database, DuplicateRecordCloning, Factory, LayerNode, ObjectId, PhysicalMaterialRecord, TextureTableRecord } from "webcad_ue4_api";
 
 // TODO: Danger: 注意入侵性代码
 // 疑似是WebCAD中的漏洞，当传入new Database()时，
@@ -14,7 +14,8 @@ 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],
@@ -27,8 +28,6 @@ export function MaterialOut(material: PhysicalMaterialRecord): string {
     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;
 }
 

src/components/MaterialAdjuster.vue

@@ -1,13 +1,12 @@
 <template>
     <div vertical class="material-adjuster">
-        <!-- 新增模式下，隐藏材质名输入框 -->
+        <div class="adjust-section">
-        <div v-if="ignoreTexture" class="adjust-section">
             <h3>操作</h3>
             <fieldset v-if="debugMode" style="margin: 1em 0;">
                 <legend>DEBUG</legend>
                 <label>上传路径ID</label>
                 <input v-model="materialInfo.dirId" type="text" placeholder="材质路径ID" />
-                <label>纹理(BASE64)</label>
+                <label>配置JSON</label>
                 <input v-model="materialInfo.inputText" type="text" />
                 <button class="btn-success" style="min-width: 110px;" @click="loadData">加载</button>
             </fieldset>
@@ -17,8 +16,6 @@
             <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>
 
@@ -40,28 +37,27 @@
             <h3>材质调节</h3>
 
             <label>金属度</label>
-            <CfFlex gap="1em" class="input-range">
+            <CfFlex gap="1em">
-                <input v-model="metallic" 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" />
-                <input v-model="metallic" type="number" @change="ClampNumericValue" min="0" max="1" step="0.01" />
+                <span>{{ Material.matalness }}</span>
             </CfFlex>
 
             <label>粗糙度</label>
-            <CfFlex gap="1em" class="input-range">
+            <CfFlex gap="1em">
-                <input v-model="roughness" 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" />
-                <input v-model="roughness" type="number" @change="ClampNumericValue" min="0" max="1" step="0.01" />
+                <span>{{ Material.roughness }}</span>
             </CfFlex>
 
             <label>法线强度</label>
-            <CfFlex gap="1em" class="input-range">
+            <CfFlex gap="1em">
-                <input v-model="normalScale" 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" />
-                <input v-model="normalScale" type="number" @change="ClampNumericValue" min="0" max="1" step="0.01" />
+                <span>{{ Material.bumpScale }}</span>
             </CfFlex>
 
             <label>高光</label>
-            <CfFlex gap="1em" class="input-range">
+            <CfFlex gap="1em">
-                <input v-model="emissiveIntensity" 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" />
-                <input v-model="emissiveIntensity" type="number" @change="ClampNumericValue" min="0" max="1"
+                <span>{{ Material.specular }}</span>
-                    step="0.01" />
             </CfFlex>
         </div>
 
@@ -72,16 +68,16 @@
 
             <label>平铺U</label>
             <select v-model="textureAdjustment.wrapS">
-                <option :value="MirroredRepeatWrapping">镜像平铺</option>
+                <option value="0">镜像平铺</option>
-                <option :value="RepeatWrapping">平铺</option>
+                <option value="1">平铺</option>
-                <option :value="ClampToEdgeWrapping">展开</option>
+                <option value="2">展开</option>
             </select>
 
             <label>平铺V</label>
             <select v-model="textureAdjustment.wrapT">
-                <option :value="MirroredRepeatWrapping">镜像平铺</option>
+                <option value="0">镜像平铺</option>
-                <option :value="RepeatWrapping">平铺</option>
+                <option value="1">平铺</option>
-                <option :value="ClampToEdgeWrapping">展开</option>
+                <option value="2">展开</option>
             </select>
 
             <label>旋转</label>
@@ -112,16 +108,13 @@
 </template>
 
 <script setup lang='ts'>
-import { ref, reactive, watch, computed } from "vue"
+import { ref, reactive, watch } 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";
-import { ClampToEdgeWrapping, MirroredRepeatWrapping, RepeatWrapping, Wrapping } from "three";
 
 export interface MaterialRequest {
     /** 材质名 */
@@ -137,7 +130,7 @@ const { Material, CurrGeometry, Geometries } = storeToRefs(scene);
 
 const props = defineProps<{
     name?: string;
-    textures?: { name: string, src: string }[];
+    textureSrcList?: string[];
     /** 忽略纹理参数，提交时直接输出场景内的材质，用于某些在组件外对场景进行编辑的特殊情况（例如材质编辑模式） */
     ignoreTexture?: boolean;
 }>();
@@ -146,51 +139,18 @@ const emits = defineEmits<{
     (e: 'submit', data: MaterialRequest[]): void;
 }>();
 
-const debugMode = ref(false);
+const debugMode = ref(true);
-const Textures = computed(() => props.textures || []);
+const _textureSrc = ref(props.textureSrcList);
 const debugTextureSrc = ref("");
 const textureAdjustment = ref<TextureAdjustment>({
-    wrapS: MirroredRepeatWrapping,
+    wrapS: 0,
-    wrapT: MirroredRepeatWrapping,
+    wrapT: 0,
     rotation: 0,
     repeatX: 1,
     repeatY: 1,
     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,
@@ -200,33 +160,29 @@ const uploading = ref(false);
 // });
 const materialInfo = reactive({
     dirId: DirectoryId.MaterialDir, // 正常来说是2
-    materialName: props.name || Textures.value[0]?.name || '材质',
+    materialName: props.name || '材质',
     inputText: '',
 });
 
-watch(Textures, async (val) => {
+watch(() => props.textureSrcList, async (val) => {
-    if (val.length == 0 || props.ignoreTexture) return;
+    _textureSrc.value = val;
-    await scene.ChangeTextureFromUrlAsync(val[0].src);
+    await scene.ChangeTextureFromUrlAsync(_textureSrc.value[0]);
-});
-
-watch(() => props.name, () => {
-    materialInfo.materialName = props.name || Textures.value[0]?.name || '材质';
 });
 
 watch(textureAdjustment, async (val) => {
-    scene.UpdateTexture();
+    UpdateTexture();
 }, { deep: true });
 
 // 监听纹理更新
 watch(() => scene.CurrTexture, (val) => {
     textureAdjustment.value = {
-        wrapS: val.WrapS,
+        wrapS: val.wrapS,
-        wrapT: val.WrapT,
+        wrapT: val.wrapT,
         rotation: val.rotation,
-        repeatX: val.repeatX,
+        repeatX: val.repeat.x,
-        repeatY: val.repeatY,
+        repeatY: val.repeat.y,
-        moveX: val.moveX,
+        moveX: val.offset.x,
-        moveY: val.moveY
+        moveY: val.offset.y
     }
 })
 
@@ -245,9 +201,24 @@ async function UpdateMaterial() {
     await scene.UpdateMaterialAsync();
 }
 
+function UpdateTexture() {
+    const texture = scene.CurrTexture;
+    const val = textureAdjustment.value;
+    texture.wrapS = val.wrapS;
+    texture.wrapT = val.wrapT;
+    texture.anisotropy = 16;
+    texture.rotation = val.rotation;
+    texture.repeat.set(val.repeatX, val.repeatY);
+    texture.offset.set(val.moveX, val.moveY);
+    texture.needsUpdate = true;
+
+    scene.Update();
+}
+
 async function loadData() {
     if (!materialInfo.inputText) return;
-    const cadFile = FromDeflateBase64(materialInfo.inputText);
+    const json = JSON.parse(materialInfo.inputText);
+    const cadFile = FromDeflateBase64(json.file);
     scene.ImportMaterialAsync(cadFile)
 }
 
@@ -262,9 +233,7 @@ async function HandleUpload() {
         uploading.value = true;
         const result = [];
         if (props.ignoreTexture) {
-            // 注意更改材质内部名称
+            // 直接将材质序列化
-            Material.value.Name = materialInfo.materialName;
-            // 将材质序列化
             const mat = {
                 name: materialInfo.materialName,
                 logo: await scene.GenerateMaterialLogoAsync(),
@@ -275,23 +244,20 @@ async function HandleUpload() {
         }
         else {
             // 遍历纹理链接列表，更改纹理后将材质序列化，然后还原场景
-            for (const texture of Textures.value) {
+            let idx = 0;
-                // 注意更改材质内部名称
+            for (const src of _textureSrc.value) {
-                Material.value.Name = texture.name;
+                await scene.ChangeTextureFromUrlAsync(src);
-                // 更新纹理
-                await scene.ChangeTextureFromUrlAsync(texture.src);
                 const mat = {
-                    name: texture.name,
+                    name: materialInfo.materialName + ++idx,
                     logo: await scene.GenerateMaterialLogoAsync(),
                     // jsonString -> Deflate -> BinaryString -> Base64
                     file: ToDeflatedBase64(await scene.SerializeMaterialAsync())
                 };
                 result.push(mat);
             }
-            // 还原场景纹理
-            await scene.ChangeTextureFromUrlAsync(Textures.value[0].src);
         }
 
+        await scene.ChangeTextureFromUrlAsync(_textureSrc.value[0]);
         emits('submit', result);
         return result;
     } finally {
@@ -303,21 +269,6 @@ 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
@@ -360,6 +311,26 @@ 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;
@@ -404,40 +375,4 @@ select
 {
     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,7 @@
 <template>
     <CfFlex class="material-view">
         <div ref="container" class="material-view-container" />
-        <MaterialAdjuster ref="adjuster" class="material-view-sider" :name="matName" :textures="textures" :ignore-texture="editMode"
+        <MaterialAdjuster ref="adjuster" class="material-view-sider" :name="matName" :textureSrcList="textureSrc" :ignore-texture="editMode"
             @cancel="config.cancelCallback" @submit="config.submitCallback" />
     </CfFlex>
 </template>
@@ -19,7 +19,7 @@ const eventbus = useEvent();
 const container = useTemplateRef('container');
 const adjusterRef = useTemplateRef('adjuster');
 const config = GetConfig();
-const textures = ref<{name: string, src: string}[]>(Array.from(config.textures));
+const textureSrc = ref<string[]>(Array.from(config.textureSrc));
 const matName = ref<string>();
 const editMode = ref(false);
 
@@ -45,7 +45,7 @@ function HandleUpload() {
 }
 
 function HandleChangeTexture() {
-    textures.value = Array.from(config.textures);
+    textureSrc.value = Array.from(config.textureSrc);
 }
 
 async function HandleUpdateConfig() {
@@ -56,9 +56,9 @@ async function HandleUpdateConfig() {
         editMode.value = true;
     }
     else { editMode.value = false; }
-    if (config.textures && config.textures.length > 0) {
+    if (config.textureSrc) {
-        textures.value = Array.from(config.textures);
+        textureSrc.value = Array.from(config.textureSrc);
-        await scene.ChangeTextureFromUrlAsync(textures.value[0].src); // 这一行是保证首次Mount组件时纹理能够立刻刷新
+        await scene.ChangeTextureFromUrlAsync(textureSrc.value[0]);
     }
 }
 

src/lib/libOutputConfig.ts

@@ -3,7 +3,7 @@ import type { MaterialRequest } from "../components/MaterialAdjuster.vue"
 
 let _libOutputConfig = {
     host:'https://tapi.cfcad.cn:7779',
-    textures: [],
+    textureSrc: [],
     file: undefined,
     submitCallback: undefined,
     cancelCallback: undefined,
@@ -24,12 +24,7 @@ export type LibOutputConfig = {
      */
     host: string,
     /** 材质贴图链接列表，用与批量提交，场景会只会载入第一个链接作为纹理预览，但是导出提交时会为所有链接创建材质 */
-    textures: Array<{
+    textureSrc: Array<string>,
-        /** 材质名 */
-        name: string;
-        /** 纹理链接 */
-        src: string;
-    }>,
     /** 更新模型，对材质进行编辑时赋值 */
     updateModel?: {
         /** 材质名 */

src/stores/sceneStore.ts

@@ -1,25 +1,24 @@
 import { defineStore } from "pinia";
 import { computed, ref } from "vue";
 import { MaterialEditor } from "../common/MaterialEditor";
-import { Database, PhysicalMaterialRecord, TextureTableRecord } from "webcad_ue4_api";
+import { Database, ObjectId, PhysicalMaterialRecord, TextureTableRecord } from "webcad_ue4_api";
 import { LoadImageFromUrl } from "../helpers/helper.imageLoader";
-import { ClampToEdgeWrapping, MirroredRepeatWrapping, RepeatWrapping, Texture } from "three";
+import { Texture } from "three";
 import { materialRenderer } from "../common/MaterialRenderer";
 import { MaterialIn, MaterialOut } from "../common/MaterialSerializer";
 import { GetConfig } from "../lib/libOutputConfig";
-import { AsyncDelay } from "../helpers/helper.async";
 
 const sceneSetup = () => {
     let _editor: MaterialEditor | undefined;
     let _database: Database | undefined;
     const _material = ref<PhysicalMaterialRecord>(new PhysicalMaterialRecord());
     const _currGeometry = ref<string>('球');
-    const _currTexture = ref<TextureTableRecord>();
+    const _currTexture = ref<Texture>();
     const CurrGeometry = computed({
         get: () => _currGeometry.value,
         set: (val: string) => ChangeGeometry(val)
     })
-    const CurrTexture = computed<TextureTableRecord>(() => _currTexture.value);
+    const CurrTexture = computed<Texture>(() => _currTexture.value);
     const Geometries = ref<string[]>([]);
     const Material = computed(() => _material.value);
     const CurrentShowObject = computed(() => _editor.ShowObject);
@@ -83,57 +82,36 @@ const sceneSetup = () => {
         Update();
     }
 
-
-    /** 这是自定义材质更新方法，WebCAD库中的TextureTableRecord.TextureUpdate方法在导出的时候被删除了，所以需要自己实现 */
-    function UpdateTexture() {
-        const record = _currTexture.value;
-        const texture = record['texture'] as Texture;
-        texture.wrapS = record.WrapS;
-        texture.wrapT = record.WrapT;
-        texture.anisotropy = 16;
-        texture.rotation = record.rotation;
-        texture.repeat.set(record.repeatX, record.repeatY);
-        texture.offset.set(record.moveX, record.moveY);
-        texture.needsUpdate = true;
-        Update();
-    }
-
     async function ChangeTextureFromUrlAsync(url?: string) {
         // 关联贴图
         const db = Material.value.Db;
-        // 材质未初始化
+        if (!db) return; // 材质未初始化
-        if (!db) {
-            console.warn("Material has not been initialized");
-            return;
-        }
-
-        // 如果url为空，则保留原有材质中的纹理（修改模式），否则重新实例化纹理对象
         let record = Material.value.map?.Object as TextureTableRecord;
-        if (url) {
+        if (!record) {
+            // record = db.TextureTable.Symbols.values().next().value;
+            // if(!record){
             record = new TextureTableRecord();
             record.Name = db.TextureTable.AllocateName();
             db.TextureTable.Add(record);
             // 替换map
             Material.value.map = record.Id;
+            // Material.value.map = img ? record.Id : undefined;
+            // }
+        }
+
+        // record.objectId = new ObjectId(undefined, record);
+        _currTexture.value = record['texture'] as Texture;
+        if (url) {
+            record.imageUrl = url;
+            _currTexture.value.image = undefined;
         }
 
         // 设置Store
-        _currTexture.value = record;
+        if (!_currTexture.value.image) {
-        const texture = record['texture'] as Texture;
-        if (url) {
-            record.imageUrl = url;
-            texture.image = undefined;
-        }
-
-        if (!texture.image) {
-            console.warn('Load Image: ', GetConfig().host + '/' + record.imageUrl);
             const img = await LoadImageFromUrl(GetConfig().host + '/' + record.imageUrl);
-            texture.image = img;
+            _currTexture.value.image = img;
+            _currTexture.value.needsUpdate = true;
         }
-        
-        UpdateTexture();
-        await record.Update();
-        await AsyncDelay(10);
         await UpdateMaterialAsync();
     }
 
@@ -175,7 +153,6 @@ const sceneSetup = () => {
         Material,
         Initial,
         Update,
-        UpdateTexture,
         UpdateMaterialAsync,
         ChangeTextureFromUrlAsync,
         SerializeMaterialAsync,

vite.config.ts

@@ -9,19 +9,12 @@ 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', 'iife', 'umd']
+      formats: ['es']
     },
     rollupOptions: {
       // external: ['vue'],