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

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", "name": "material-editor",
"private": true, "private": true,
"version": "1.0.14", "version": "1.0.15",
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",

View File

@ -7,7 +7,7 @@
<label>上传路径ID</label> <label>上传路径ID</label>
<input v-model="materialInfo.dirId" type="text" placeholder="材质路径ID" /> <input v-model="materialInfo.dirId" type="text" placeholder="材质路径ID" />
<label>配置JSON</label> <label>配置JSON</label>
<input v-model="materialInfo.inputText" type="text" /> <input v-model="materialInfo.inputText" type="text" />
<button class="btn-success" style="min-width: 110px;" @click="loadData">加载</button> <button class="btn-success" style="min-width: 110px;" @click="loadData">加载</button>
</fieldset> </fieldset>
<label>材质名</label> <label>材质名</label>
@ -130,10 +130,12 @@ const scene = useScene();
const props = defineProps<{ const props = defineProps<{
name?: string; name?: string;
textureSrcList?: string[]; textureSrcList?: string[];
/** 忽略纹理参数,提交时直接输出场景内的材质,用于某些在组件外对场景进行编辑的特殊情况(例如材质编辑模式) */
ignoreTexture?: boolean;
}>(); }>();
const emits = defineEmits<{ const emits = defineEmits<{
(e: 'cancel'): void; (e: 'cancel'): void;
(e: 'submit', data: MaterialRequest[]): void; (e: 'submit', data: MaterialRequest[]): void;
}>(); }>();
const Material = computed(() => scene.Material); const Material = computed(() => scene.Material);
@ -161,8 +163,8 @@ const uploading = ref(false);
// }); // });
const materialInfo = reactive({ const materialInfo = reactive({
dirId: DirectoryId.MaterialDir, // 2 dirId: DirectoryId.MaterialDir, // 2
materialName: props.name || '材质', materialName: props.name || '材质',
inputText:'', inputText: '',
}); });
watch(() => props.textureSrcList, async (val) => { watch(() => props.textureSrcList, async (val) => {
@ -182,7 +184,7 @@ watch(() => scene.CurrTexture, (val) => {
rotation: val.rotation, rotation: val.rotation,
repeatX: val.repeat.x, repeatX: val.repeat.x,
repeatY: val.repeat.y, repeatY: val.repeat.y,
moveX: val.offset.x, moveX: val.offset.x,
moveY: val.offset.y moveY: val.offset.y
} }
}) })
@ -218,7 +220,7 @@ function UpdateTexture() {
} }
async function loadData() { async function loadData() {
if(!materialInfo.inputText) return; if (!materialInfo.inputText) return;
const json = JSON.parse(materialInfo.inputText); const json = JSON.parse(materialInfo.inputText);
const cadFile = FromDeflateBase64(json.file); const cadFile = FromDeflateBase64(json.file);
scene.ImportMaterialAsync(cadFile) scene.ImportMaterialAsync(cadFile)
@ -233,18 +235,31 @@ async function HandleUpload() {
uploading.value = true; uploading.value = true;
const result = []; const result = [];
// if (props.ignoreTexture) {
let idx = 0; //
for (const src of props.textureSrcList) {
await scene.ChangeTextureFromUrlAsync(src);
const mat = { const mat = {
name: materialInfo.materialName + ++idx, name: materialInfo.materialName,
logo: await scene.GenerateMaterialLogoAsync(), logo: await scene.GenerateMaterialLogoAsync(),
// jsonString -> Deflate -> BinaryString -> Base64 // jsonString -> Deflate -> BinaryString -> Base64
file: ToDeflatedBase64(await scene.SerializeMaterialAsync()) file: ToDeflatedBase64(await scene.SerializeMaterialAsync())
}; };
result.push(mat); result.push(mat);
}
else {
//
let idx = 0;
for (const src of _textureSrc.value) {
await scene.ChangeTextureFromUrlAsync(src);
const mat = {
name: materialInfo.materialName + ++idx,
logo: await scene.GenerateMaterialLogoAsync(),
// jsonString -> Deflate -> BinaryString -> Base64
file: ToDeflatedBase64(await scene.SerializeMaterialAsync())
};
result.push(mat);
}
} }
await scene.ChangeTextureFromUrlAsync(_textureSrc.value[0]); await scene.ChangeTextureFromUrlAsync(_textureSrc.value[0]);
emits('submit', result); emits('submit', result);
return result; return result;

View File

@ -1,7 +1,8 @@
<template> <template>
<CfFlex class="material-view"> <CfFlex class="material-view">
<div ref="container" class="material-view-container" /> <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> </CfFlex>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -20,9 +21,10 @@ const adjusterRef = useTemplateRef('adjuster');
const config = GetConfig(); const config = GetConfig();
const textureSrc = ref<string[]>(Array.from(config.textureSrc)); const textureSrc = ref<string[]>(Array.from(config.textureSrc));
const matName = ref<string>(); const matName = ref<string>();
const editMode = ref(false);
// //
document.addEventListener('contextmenu', (e) => e.preventDefault()); document.addEventListener('contextmenu', (e) => e.preventDefault());
onMounted(async () => { onMounted(async () => {
scene.Initial(container.value); scene.Initial(container.value);
await HandleUpdateConfig(); await HandleUpdateConfig();
@ -51,16 +53,19 @@ async function HandleUpdateConfig() {
matName.value = config.updateModel.name; matName.value = config.updateModel.name;
const json = FromDeflateBase64(config.updateModel.file); const json = FromDeflateBase64(config.updateModel.file);
await scene.ImportMaterialAsync(json); 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]);
} }
textureSrc.value = Array.from(config.textureSrc);
await scene.ChangeTextureFromUrlAsync(textureSrc.value[0]);
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.material-view .material-view {
{
width: 100%; width: 100%;
height: 100%; height: 100%;
box-sizing: border-box; box-sizing: border-box;
@ -69,16 +74,16 @@ async function HandleUpdateConfig() {
overflow: hidden; overflow: hidden;
&-container { &-container {
flex: 3 1; flex: 3 1;
height: 100%; height: 100%;
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
} }
&-sider { &-sider {
flex: 1 1; flex: 1 1;
overflow-y: auto; overflow-y: auto;
height: 100%; height: 100%;
box-sizing: border-box; box-sizing: border-box;
} }
} }