修改更新

2025-05-29 15:53:01 +08:00
parent 16fac2ab19
commit 26f1c60a43
4 changed files with 69 additions and 61 deletions
--- a/src/common/MaterialEditor.ts
+++ b/src/common/MaterialEditor.ts
@@ -167,10 +167,15 @@ export class MaterialEditor
    private Material: PhysicalMaterialRecord;
    setMaterial(mat: PhysicalMaterialRecord)
    {
+        console.log("set", mat.Material);
        this.Material = mat;
        this._MeshMaterial.copy(mat.Material);

        let mtl = this._MeshMaterial;
+        console.log("set2", this._MeshMaterial)
+        
+        this.ShowMesh.material = mtl;
+
        if (mtl.metalness > 0.8)
            this.LoadMetalEnv().then(env =>
            {
@@ -183,7 +188,7 @@ export class MaterialEditor
                mtl.envMap = exr;
                mtl.needsUpdate = true;
            });
-
+        this.ShowMesh.updateWorldMatrix(true,true)
        this.Update();
    }

--- a/src/components/MaterialAdjuster.vue
+++ b/src/components/MaterialAdjuster.vue
@@ -38,26 +38,26 @@

            <label>金属度</label>
            <CfFlex gap="1em">
-                <input v-model="model.metallic" type="range" min="0" max="1" step="0.01" />
-                <span>{{ model.metallic }}</span>
+                <input v-model="Material.matalness" @change="UpdateMaterial" type="range" min="0" max="1" step="0.01" />
+                <span>{{ Material.matalness }}</span>
            </CfFlex>

            <label>粗糙度</label>
            <CfFlex gap="1em">
-                <input v-model="model.roughness" type="range" min="0" max="1" step="0.01" />
-                <span>{{ model.roughness }}</span>
+                <input v-model="Material.roughness" @change="UpdateMaterial" type="range" min="0" max="1" step="0.01" />
+                <span>{{ Material.roughness }}</span>
            </CfFlex>

            <label>法线强度</label>
            <CfFlex gap="1em">
-                <input v-model="model.normalScale" type="range" min="0" max="1" step="0.01" />
-                <span>{{ model.normalScale }}</span>
+                <input v-model="Material.bumpScale" @change="UpdateMaterial" type="range" min="0" max="1" step="0.01" />
+                <span>{{ Material.bumpScale }}</span>
            </CfFlex>

            <label>高光</label>
            <CfFlex gap="1em">
-                <input v-model="model.emissiveIntensity" type="range" min="0" max="1" step="0.01" />
-                <span>{{ model.emissiveIntensity }}</span>
+                <input v-model="Material.specular" @change="UpdateMaterial" type="range" min="0" max="1" step="0.01" />
+                <span>{{ Material.specular }}</span>
            </CfFlex>
        </div>

@@ -66,7 +66,7 @@
            <label>启用纹理</label>
            <input type="checkbox" v-model="enableTexture" />

-            <label>平铺U</label>
+            <!-- <label>平铺U</label>
            <select v-model="textureAdjustment.wrapS">
                <option value="0">镜像平铺</option>
                <option value="1">平铺</option>
@@ -78,7 +78,7 @@
                <option value="0">镜像平铺</option>
                <option value="1">平铺</option>
                <option value="2">展开</option>
-            </select>
+            </select> -->

            <label>旋转</label>
            <input v-model="textureAdjustment.rotation" type="number" step="0.01" min="0" max="359" />
@@ -115,7 +115,6 @@ import CfFlex from "./CfFlex.vue";
 import { DirectoryId } from "../api/Request";
 import { IsNullOrWhitespace } from "../helpers/helper.string";
 import { FromDeflateBase64, ToDeflatedBase64 } from "../helpers/helper.material";
-import { MaterialIn } from "../common/MaterialSerializer";

 export interface MaterialRequest {
    /** 材质名 */
@@ -150,12 +149,12 @@ const textureAdjustment = ref<TextureAdjustment>({
    moveY: 0
 });
 const uploading = ref(false);
-const model = reactive({
-    metallic: Material.value.matalness,
-    roughness: Material.value.roughness,
-    normalScale: Material.value.bumpScale,
-    emissiveIntensity: Material.value.specular
-});
+// const model = reactive({
+//     metallic: Material.value.matalness,
+//     roughness: Material.value.roughness,
+//     normalScale: Material.value.bumpScale,
+//     emissiveIntensity: Material.value.specular
+// });
 const materialInfo = reactive({
    dirId: DirectoryId.MaterialDir, // 正常来说是2
    materialName: '材质1',
@@ -171,9 +170,6 @@ watch(() => props.textureSrc, async (val) => {
    await scene.ChangeTextureFromUrlAsync(_textureSrc.value);
 });

-watch(model, async (val) => {
-    await UpdateMaterial();
-});

 watch(enableTexture, async (val) => {
    await EnableTexture(val);
@@ -185,6 +181,7 @@ watch(textureAdjustment, async (val) => {

 // 监听纹理更新
 watch(() => scene.CurrTexture, (val) => {
+    console.log('watch-CurrTexture')
    textureAdjustment.value = {
        wrapS: val.wrapS,
        wrapT: val.wrapT,
@@ -197,15 +194,17 @@ watch(() => scene.CurrTexture, (val) => {
 })

 async function UpdateMaterial() {
-    Material.value.matalness = model.metallic;
-    Material.value.roughness = model.roughness;
-    Material.value.bumpScale = model.normalScale;
-    Material.value.specular = model.emissiveIntensity;
+    console.log(scene.CurrentShowObject)
+    // Material.value.matalness = model.metallic;
+    // Material.value.roughness = model.roughness;
+    // Material.value.bumpScale = model.normalScale;
+    // Material.value.specular = model.emissiveIntensity;
    // Material.value.side = DoubleSide;
    await scene.UpdateMaterialAsync();
 }

 function UpdateTexture() {
+    console.log('UpdateTexture')
    const texture = scene.CurrTexture;
    const val = textureAdjustment.value;
    texture.wrapS = val.wrapS;
@@ -228,8 +227,7 @@ async function loadData() {
    if(!materialInfo.inputText) return;
    const json = JSON.parse(materialInfo.inputText);
    const cadFile = FromDeflateBase64(json.file);
-    MaterialIn(JSON.parse(cadFile));
-    
+    scene.ImportMaterialAsync(cadFile)
 }

 async function HandleUpload() {
--- a/src/lib/libOutputConfig.ts
+++ b/src/lib/libOutputConfig.ts
@@ -2,6 +2,7 @@ import type { DeepReadonly } from "vue"
 import type { MaterialRequest } from "../components/MaterialAdjuster.vue"

 let _libOutputConfig = {
+    host:'https://tapi.cfcad.cn:7779',
    textureSrc: "",
    file: undefined,
    submitCallback: undefined,
@@ -18,6 +19,10 @@ export function ConfigureLibOutput(config: Partial<LibOutputConfig>) {
 }

 export type LibOutputConfig = {
+    /**
+     * 材质文件域名
+     */
+    host: string,
    /** 材质贴图链接 */
    textureSrc: string,
    /** 材质预设数据，base64编码 */
--- a/src/stores/sceneStore.ts
+++ b/src/stores/sceneStore.ts
@@ -6,6 +6,7 @@ import { LoadImageFromUrl } from "../helpers/helper.imageLoader";
 import { Texture } from "three";
 import { materialRenderer } from "../common/MaterialRenderer";
 import { MaterialIn, MaterialOut } from "../common/MaterialSerializer";
+import { GetConfig } from "../lib/libOutputConfig";

 const sceneSetup = () => {
    let _editor: MaterialEditor | undefined;
@@ -19,6 +20,7 @@ const sceneSetup = () => {
    const CurrTexture = computed<Texture>(() => _currTexture.value);
    const Geometries = ref<string[]>([]);
    const Material = ref<PhysicalMaterialRecord>(new PhysicalMaterialRecord());
+    const CurrentShowObject = computed(() => _editor.ShowObject);

    function Initial(canvas: HTMLElement) {
        if (_editor) {
@@ -31,7 +33,7 @@ const sceneSetup = () => {
        _database.hm.Enable = false; // 关闭历史记录功能
        Material.value.Name = _database.MaterialTable.AllocateName(); // 使用Database为材质分配材质名
        _database.MaterialTable.Add(Material.value as PhysicalMaterialRecord);
-        
+
        // 为Material配置一个ObjectId，否则其无法被序列化
        // Material.value.objectId = new ObjectId(undefined, undefined);

@@ -72,28 +74,44 @@ const sceneSetup = () => {
    }

    async function UpdateMaterialAsync() {
+        console.log('UpdateMaterialAsync')
        await Material.value.Update();
        await _editor.Update();
        Update();
    }

-    async function ChangeTextureFromUrlAsync(url: string) {
-        const img = await LoadImageFromUrl(url);
-        
+    async function ChangeTextureFromUrlAsync(url?: string) {
+
+        console.log('ChangeTextureFromUrlAsync')
        // 关联贴图
        const db = Material.value.Db;
-        const record = new TextureTableRecord();
+        if (!db) return; // 材质未初始化
+        let record = Material.value.map?.Object as TextureTableRecord;
+        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);
-        record.Name = db.TextureTable.AllocateName();
-        db.TextureTable.Add(record);
+        _currTexture.value = record['texture'] as Texture;
+        if (url) {
+            record.imageUrl = url;
+            _currTexture.value.image = undefined;
+        }

        // 设置Store
-        _currTexture.value = record['texture'] as Texture;
-        _currTexture.value.image = img;
-
-        // 替换map
-        Material.value.map = img ? record.Id : undefined;
-        _currTexture.value.needsUpdate = true;
+        if (!_currTexture.value.image) {
+            const img = await LoadImageFromUrl(GetConfig().host + '/' + record.imageUrl);
+            _currTexture.value.image = img;
+            _currTexture.value.needsUpdate = true;
+        }
        await UpdateMaterialAsync();
    }

@@ -103,30 +121,11 @@ const sceneSetup = () => {
        return matJson;
    }

-    async function ApplyTextureAsync(textureRecord: TextureTableRecord)
-    {
-        if (!textureRecord.imageUrl) {
-            alert("该纹理无效");
-            return;
-        }
-
-        // 绑定纹理
-        let newTexture = textureRecord.Clone() as TextureTableRecord;
-        newTexture.Owner = undefined;
-        newTexture.Name = _database.TextureTable.AllocateName();
-        _database.TextureTable.Add(newTexture);
-
-        // 替换map
-        Material.value.map = newTexture.Id;
-
-        await UpdateMaterialAsync();
-    }
-
    async function ImportMaterialAsync(materialJson: string) {
        const material = MaterialIn(JSON.parse(materialJson));
        Material.value = material;
        _editor.setMaterial(material);
-        await UpdateMaterialAsync();
+        await ChangeTextureFromUrlAsync();
    }

    async function GenerateMaterialLogoAsync() {
@@ -158,7 +157,8 @@ const sceneSetup = () => {
        SerializeMaterialAsync,
        ImportMaterialAsync,
        GenerateMaterialLogoAsync,
-        Dispose
+        Dispose,
+        CurrentShowObject
    };
 };