修复材质编辑模式无输出内容的问题

This commit is contained in:
2025-05-30 16:16:40 +08:00
parent 65a3779e1a
commit 59703decc4
3 changed files with 42 additions and 22 deletions

View File

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

View File

@@ -130,6 +130,8 @@ const scene = useScene();
const props = defineProps<{
name?: string;
textureSrcList?: string[];
/** 忽略纹理参数,提交时直接输出场景内的材质,用于某些在组件外对场景进行编辑的特殊情况(例如材质编辑模式) */
ignoreTexture?: boolean;
}>();
const emits = defineEmits<{
(e: 'cancel'): void;
@@ -162,7 +164,7 @@ const uploading = ref(false);
const materialInfo = reactive({
dirId: DirectoryId.MaterialDir, // 正常来说是2
materialName: props.name || '材质',
inputText:'',
inputText: '',
});
watch(() => props.textureSrcList, async (val) => {
@@ -218,7 +220,7 @@ function UpdateTexture() {
}
async function loadData() {
if(!materialInfo.inputText) return;
if (!materialInfo.inputText) return;
const json = JSON.parse(materialInfo.inputText);
const cadFile = FromDeflateBase64(json.file);
scene.ImportMaterialAsync(cadFile)
@@ -233,9 +235,20 @@ async function HandleUpload() {
uploading.value = true;
const result = [];
if (props.ignoreTexture) {
// 直接将材质序列化
const mat = {
name: materialInfo.materialName,
logo: await scene.GenerateMaterialLogoAsync(),
// jsonString -> Deflate -> BinaryString -> Base64
file: ToDeflatedBase64(await scene.SerializeMaterialAsync())
};
result.push(mat);
}
else {
// 遍历纹理链接列表,更改纹理后将材质序列化,然后还原场景
let idx = 0;
for (const src of props.textureSrcList) {
for (const src of _textureSrc.value) {
await scene.ChangeTextureFromUrlAsync(src);
const mat = {
name: materialInfo.materialName + ++idx,
@@ -245,6 +258,8 @@ async function HandleUpload() {
};
result.push(mat);
}
}
await scene.ChangeTextureFromUrlAsync(_textureSrc.value[0]);
emits('submit', result);
return result;

View File

@@ -1,7 +1,8 @@
<template>
<CfFlex class="material-view">
<div ref="container" class="material-view-container" />
<MaterialAdjuster ref="adjuster" class="material-view-sider" :name="matName" :textureSrcList="textureSrc" @cancel="config.cancelCallback" @submit="config.submitCallback" />
<MaterialAdjuster ref="adjuster" class="material-view-sider" :name="matName" :textureSrcList="textureSrc" :ignore-texture="editMode"
@cancel="config.cancelCallback" @submit="config.submitCallback" />
</CfFlex>
</template>
<script setup lang="ts">
@@ -20,6 +21,7 @@ const adjusterRef = useTemplateRef('adjuster');
const config = GetConfig();
const textureSrc = ref<string[]>(Array.from(config.textureSrc));
const matName = ref<string>();
const editMode = ref(false);
// 禁用右键菜单
document.addEventListener('contextmenu', (e) => e.preventDefault());
@@ -51,16 +53,19 @@ async function HandleUpdateConfig() {
matName.value = config.updateModel.name;
const json = FromDeflateBase64(config.updateModel.file);
await scene.ImportMaterialAsync(json);
editMode.value = true;
}
else { editMode.value = false; }
if (config.textureSrc) {
textureSrc.value = Array.from(config.textureSrc);
await scene.ChangeTextureFromUrlAsync(textureSrc.value[0]);
}
}
</script>
<style scoped lang="scss">
.material-view
{
.material-view {
width: 100%;
height: 100%;
box-sizing: border-box;