修复材质编辑模式无输出内容的问题
This commit is contained in:
		@@ -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",
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -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;
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -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;
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 
 | 
				
			|||||||
		Reference in New Issue
	
	Block a user