修复材质编辑模式无输出内容的问题
This commit is contained in:
parent
65a3779e1a
commit
59703decc4
@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "material-editor",
|
||||
"private": true,
|
||||
"version": "1.0.14",
|
||||
"version": "1.0.15",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
|
@ -7,7 +7,7 @@
|
||||
<label>上传路径ID</label>
|
||||
<input v-model="materialInfo.dirId" type="text" placeholder="材质路径ID" />
|
||||
<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>
|
||||
</fieldset>
|
||||
<label>材质名</label>
|
||||
@ -130,10 +130,12 @@ const scene = useScene();
|
||||
const props = defineProps<{
|
||||
name?: string;
|
||||
textureSrcList?: string[];
|
||||
/** 忽略纹理参数,提交时直接输出场景内的材质,用于某些在组件外对场景进行编辑的特殊情况(例如材质编辑模式) */
|
||||
ignoreTexture?: boolean;
|
||||
}>();
|
||||
const emits = defineEmits<{
|
||||
(e: 'cancel'): void;
|
||||
(e: 'submit', data: MaterialRequest[]): void;
|
||||
(e: 'submit', data: MaterialRequest[]): void;
|
||||
}>();
|
||||
|
||||
const Material = computed(() => scene.Material);
|
||||
@ -161,8 +163,8 @@ const uploading = ref(false);
|
||||
// });
|
||||
const materialInfo = reactive({
|
||||
dirId: DirectoryId.MaterialDir, // 正常来说是2
|
||||
materialName: props.name || '材质',
|
||||
inputText:'',
|
||||
materialName: props.name || '材质',
|
||||
inputText: '',
|
||||
});
|
||||
|
||||
watch(() => props.textureSrcList, async (val) => {
|
||||
@ -182,7 +184,7 @@ watch(() => scene.CurrTexture, (val) => {
|
||||
rotation: val.rotation,
|
||||
repeatX: val.repeat.x,
|
||||
repeatY: val.repeat.y,
|
||||
moveX: val.offset.x,
|
||||
moveX: val.offset.x,
|
||||
moveY: val.offset.y
|
||||
}
|
||||
})
|
||||
@ -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,18 +235,31 @@ async function HandleUpload() {
|
||||
|
||||
uploading.value = true;
|
||||
const result = [];
|
||||
// 遍历纹理链接列表,更改纹理后将材质序列化,然后还原场景
|
||||
let idx = 0;
|
||||
for (const src of props.textureSrcList) {
|
||||
await scene.ChangeTextureFromUrlAsync(src);
|
||||
if (props.ignoreTexture) {
|
||||
// 直接将材质序列化
|
||||
const mat = {
|
||||
name: materialInfo.materialName + ++idx,
|
||||
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 _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]);
|
||||
emits('submit', result);
|
||||
return result;
|
||||
|
@ -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,9 +21,10 @@ 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());
|
||||
document.addEventListener('contextmenu', (e) => e.preventDefault());
|
||||
onMounted(async () => {
|
||||
scene.Initial(container.value);
|
||||
await HandleUpdateConfig();
|
||||
@ -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]);
|
||||
}
|
||||
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;
|
||||
@ -69,16 +74,16 @@ async function HandleUpdateConfig() {
|
||||
overflow: hidden;
|
||||
|
||||
&-container {
|
||||
flex: 3 1;
|
||||
height: 100%;
|
||||
flex: 3 1;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&-sider {
|
||||
flex: 1 1;
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user