MES/material-editor
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 26 Wiki Activity

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

Browse Source
This commit is contained in:
陈梓阳 2025-06-13 15:24:17 +08:00
parent 3d27bccdea
commit 3aebd9ed95
4 changed files with 59 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

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

59
src/components/MaterialAdjuster.vue
View File

@ -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 {

2
src/components/MaterialView.vue
View File

@ -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组件时纹理能够立刻刷新
}
}

45
src/stores/sceneStore.ts
View File

@ -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,