优化纹理参数绑定处理逻辑，添加默认纹理参数

2025-06-13 15:24:17 +08:00
parent 3d27bccdea
commit 3aebd9ed95
4 changed files with 59 additions and 49 deletions
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "material-editor",
  "private": true,
-  "version": "1.0.25",
+  "version": "1.0.26",
  "type": "module",
  "scripts": {
    "dev": "vite",
--- a/src/components/MaterialAdjuster.vue
+++ b/src/components/MaterialAdjuster.vue
@@ -70,16 +70,16 @@

            <label>平铺U</label>
            <select v-model="textureAdjustment.wrapS">
-                <option value="0">镜像平铺</option>
-                <option value="1">平铺</option>
-                <option value="2">展开</option>
+                <option :value="MirroredRepeatWrapping">镜像平铺</option>
+                <option :value="RepeatWrapping">平铺</option>
+                <option :value="ClampToEdgeWrapping">展开</option>
            </select>

            <label>平铺V</label>
            <select v-model="textureAdjustment.wrapT">
-                <option value="0">镜像平铺</option>
-                <option value="1">平铺</option>
-                <option value="2">展开</option>
+                <option :value="MirroredRepeatWrapping">镜像平铺</option>
+                <option :value="RepeatWrapping">平铺</option>
+                <option :value="ClampToEdgeWrapping">展开</option>
            </select>

            <label>旋转</label>
@@ -119,6 +119,7 @@ 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 {
    /** 材质名 */
@@ -144,11 +145,11 @@ const emits = defineEmits<{
 }>();

 const debugMode = ref(false);
-const _textureSrc = ref(props.textureSrcList);
+const textureSrc = computed(() => props.textureSrcList || []);
 const debugTextureSrc = ref("");
 const textureAdjustment = ref<TextureAdjustment>({
-    wrapS: 0,
-    wrapT: 0,
+    wrapS: MirroredRepeatWrapping,
+    wrapT: MirroredRepeatWrapping,
    rotation: 0,
    repeatX: 1,
    repeatY: 1,
@@ -201,9 +202,9 @@ const materialInfo = reactive({
    inputText: '',
 });

-watch(() => props.textureSrcList, async (val) => {
-    _textureSrc.value = val;
-    await scene.ChangeTextureFromUrlAsync(_textureSrc.value[0]);
+watch(textureSrc, async (val) => {
+    if (val.length == 0) return;
+    await scene.ChangeTextureFromUrlAsync(val[0]);
 });

 watch(() => props.name, () => {
@@ -211,19 +212,19 @@ watch(() => props.name, () => {
 });

 watch(textureAdjustment, async (val) => {
-    UpdateTexture();
+    scene.UpdateTexture();
 }, { deep: true });

 // 监听纹理更新
 watch(() => scene.CurrTexture, (val) => {
    textureAdjustment.value = {
-        wrapS: val.wrapS,
-        wrapT: val.wrapT,
+        wrapS: val.WrapS,
+        wrapT: val.WrapT,
        rotation: val.rotation,
-        repeatX: val.repeat.x,
-        repeatY: val.repeat.y,
-        moveX: val.offset.x,
-        moveY: val.offset.y
+        repeatX: val.repeatX,
+        repeatY: val.repeatY,
+        moveX: val.moveX,
+        moveY: val.moveY
    }
 })

@@ -242,20 +243,6 @@ 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 json = JSON.parse(materialInfo.inputText);
@@ -286,10 +273,10 @@ async function HandleUpload() {
        else {
            // 遍历纹理链接列表，更改纹理后将材质序列化，然后还原场景
            let idx = 0;
-            for (const src of _textureSrc.value) {
+            for (const src of textureSrc.value) {
                await scene.ChangeTextureFromUrlAsync(src);
                const mat = {
-                    name: materialInfo.materialName + ++idx,
+                    name: textureSrc.value.length > 1 ? materialInfo.materialName + ++idx : materialInfo.materialName,
                    logo: await scene.GenerateMaterialLogoAsync(),
                    // jsonString -> Deflate -> BinaryString -> Base64
                    file: ToDeflatedBase64(await scene.SerializeMaterialAsync())
@@ -298,7 +285,7 @@ async function HandleUpload() {
            }
        }

-        await scene.ChangeTextureFromUrlAsync(_textureSrc.value[0]);
+        await scene.ChangeTextureFromUrlAsync(textureSrc.value[0]);
        emits('submit', result);
        return result;
    } finally {
--- a/src/components/MaterialView.vue
+++ b/src/components/MaterialView.vue
@@ -58,7 +58,7 @@ async function HandleUpdateConfig() {
    else { editMode.value = false; }
    if (config.textureSrc) {
        textureSrc.value = Array.from(config.textureSrc);
-        await scene.ChangeTextureFromUrlAsync(textureSrc.value[0]);
+        await scene.ChangeTextureFromUrlAsync(textureSrc.value[0]); // 这一行是保证首次Mount组件时纹理能够立刻刷新
    }
 }

--- a/src/stores/sceneStore.ts
+++ b/src/stores/sceneStore.ts
@@ -3,7 +3,7 @@ import { computed, ref } from "vue";
 import { MaterialEditor } from "../common/MaterialEditor";
 import { Database, PhysicalMaterialRecord, TextureTableRecord } from "webcad_ue4_api";
 import { LoadImageFromUrl } from "../helpers/helper.imageLoader";
-import { Texture } from "three";
+import { ClampToEdgeWrapping, MirroredRepeatWrapping, RepeatWrapping, Texture } from "three";
 import { materialRenderer } from "../common/MaterialRenderer";
 import { MaterialIn, MaterialOut } from "../common/MaterialSerializer";
 import { GetConfig } from "../lib/libOutputConfig";
@@ -13,12 +13,12 @@ const sceneSetup = () => {
    let _database: Database | undefined;
    const _material = ref<PhysicalMaterialRecord>(new PhysicalMaterialRecord());
    const _currGeometry = ref<string>('球');
-    const _currTexture = ref<Texture>();
+    const _currTexture = ref<TextureTableRecord>();
    const CurrGeometry = computed({
        get: () => _currGeometry.value,
        set: (val: string) => ChangeGeometry(val)
    })
-    const CurrTexture = computed<Texture>(() => _currTexture.value);
+    const CurrTexture = computed<TextureTableRecord>(() => _currTexture.value);
    const Geometries = ref<string[]>([]);
    const Material = computed(() => _material.value);
    const CurrentShowObject = computed(() => _editor.ShowObject);
@@ -82,10 +82,30 @@ 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) {
+        console.warn("Update texture from url:", url);
        // 关联贴图
        const db = Material.value.Db;
-        if (!db) return; // 材质未初始化
+        // 材质未初始化
+        if (!db) {
+            console.warn("Material has not been initialized");
+            return;
+        }
        let record = Material.value.map?.Object as TextureTableRecord;
        if (!record) {
            // record = db.TextureTable.Symbols.values().next().value;
@@ -99,19 +119,21 @@ const sceneSetup = () => {
            // }
        }

-        // record.objectId = new ObjectId(undefined, record);
-        _currTexture.value = record['texture'] as Texture;
+        // 设置Store
+        _currTexture.value = record;
+        const texture = record['texture'] as Texture;
        if (url) {
            record.imageUrl = url;
-            _currTexture.value.image = undefined;
+            texture.image = undefined;
        }

-        // 设置Store
-        if (!_currTexture.value.image) {
+        if (!texture.image) {
            const img = await LoadImageFromUrl(GetConfig().host + '/' + record.imageUrl);
-            _currTexture.value.image = img;
-            _currTexture.value.needsUpdate = true;
+            texture.image = img;
        }
+        
+        texture.needsUpdate = true;
+        UpdateTexture();
        await UpdateMaterialAsync();
    }

@@ -153,6 +175,7 @@ const sceneSetup = () => {
        Material,
        Initial,
        Update,
+        UpdateTexture,
        UpdateMaterialAsync,
        ChangeTextureFromUrlAsync,
        SerializeMaterialAsync,