From 26f1c60a43dc4888b627720ee73bbc9ca147e837 Mon Sep 17 00:00:00 2001
From: xief <1789784602@qq.com>
Date: Thu, 29 May 2025 15:53:01 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/common/MaterialEditor.ts | 7 ++-
src/components/MaterialAdjuster.vue | 50 ++++++++++-----------
src/lib/libOutputConfig.ts | 5 +++
src/stores/sceneStore.ts | 68 ++++++++++++++---------------
4 files changed, 69 insertions(+), 61 deletions(-)
diff --git a/src/common/MaterialEditor.ts b/src/common/MaterialEditor.ts
index 49bea65..bd3a2ec 100644
--- 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();
}
diff --git a/src/components/MaterialAdjuster.vue b/src/components/MaterialAdjuster.vue
index 58477b7..72c916f 100644
--- a/src/components/MaterialAdjuster.vue
+++ b/src/components/MaterialAdjuster.vue
@@ -38,26 +38,26 @@
-
- {{ model.metallic }}
+
+ {{ Material.matalness }}
-
- {{ model.roughness }}
+
+ {{ Material.roughness }}
-
- {{ model.normalScale }}
+
+ {{ Material.bumpScale }}
-
- {{ model.emissiveIntensity }}
+
+ {{ Material.specular }}
@@ -66,7 +66,7 @@
-
+
@@ -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({
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() {
diff --git a/src/lib/libOutputConfig.ts b/src/lib/libOutputConfig.ts
index 6b51f9d..4f67877 100644
--- 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) {
}
export type LibOutputConfig = {
+ /**
+ * 材质文件域名
+ */
+ host: string,
/** 材质贴图链接 */
textureSrc: string,
/** 材质预设数据，base64编码 */
diff --git a/src/stores/sceneStore.ts b/src/stores/sceneStore.ts
index 98606f2..5c2be40 100644
--- 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(() => _currTexture.value);
const Geometries = ref([]);
const Material = ref(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
};
};