添加批量纹理创建

This commit is contained in:
陈梓阳 2025-05-30 10:44:53 +08:00
parent 99613dbc83
commit 028aac8137
4 changed files with 36 additions and 27 deletions

View File

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

View File

@ -29,8 +29,8 @@
<div class="adjust-section" v-if="debugMode">
<h3>纹理选择DEBUG</h3>
<label>纹理链接</label>
<input v-model.trim="_textureSrc" type="text" placeholder="在此键入纹理图像的URL..." />
<button class="btn-primary" @click="scene.ChangeTextureFromUrlAsync(_textureSrc)"
<input v-model.trim="debugTextureSrc" type="text" placeholder="在此键入纹理图像的URL..." />
<button class="btn-primary" @click="scene.ChangeTextureFromUrlAsync(debugTextureSrc)"
style="margin-left: 1em;">应用</button>
</div>
<div class="adjust-section">
@ -127,11 +127,11 @@ export interface MaterialRequest {
const scene = useScene();
const props = defineProps<{
textureSrc?: string;
readonly textureSrcList?: string[];
}>();
const emits = defineEmits<{
(e: 'cancel'): void;
(e: 'submit', data: MaterialRequest): void;
(e: 'submit', data: MaterialRequest[]): void;
}>();
const Material = computed(() => scene.Material);
@ -139,7 +139,8 @@ const CurrGeometry = computed(() => scene.CurrGeometry);
const Geometries = computed(() => scene.Geometries);
const debugMode = ref(false);
const _textureSrc = ref(props.textureSrc);
const _textureSrc = ref(props.textureSrcList);
const debugTextureSrc = ref("");
const textureAdjustment = ref<TextureAdjustment>({
wrapS: 0,
wrapT: 0,
@ -158,17 +159,17 @@ const uploading = ref(false);
// });
const materialInfo = reactive({
dirId: DirectoryId.MaterialDir, // 2
materialName: '材质1',
materialName: '材质',
inputText:'',
});
onMounted(() => {
scene.ChangeTextureFromUrlAsync(_textureSrc.value);
scene.ChangeTextureFromUrlAsync(_textureSrc.value[0]);
})
watch(() => props.textureSrc, async (val) => {
watch(() => props.textureSrcList, async (val) => {
_textureSrc.value = val;
await scene.ChangeTextureFromUrlAsync(_textureSrc.value);
await scene.ChangeTextureFromUrlAsync(_textureSrc.value[0]);
});
watch(textureAdjustment, async (val) => {
@ -234,14 +235,22 @@ async function HandleUpload() {
}
uploading.value = true;
const data = {
name: materialInfo.materialName,
logo: await scene.GenerateMaterialLogoAsync(),
// jsonString -> Deflate -> BinaryString -> Base64
file: ToDeflatedBase64(await scene.SerializeMaterialAsync())
};
emits('submit', data);
return data;
const result = [];
//
let idx = 0;
for (const src of props.textureSrcList) {
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;
} finally {
uploading.value = false;
}

View File

@ -1,11 +1,11 @@
<template>
<CfFlex class="material-view">
<div ref="container" class="material-view-container" />
<MaterialAdjuster ref="adjuster" class="material-view-sider" :texture-src="textureSrc" @cancel="config.cancelCallback" @submit="config.submitCallback" />
<MaterialAdjuster ref="adjuster" class="material-view-sider" :textureSrcList="textureSrc" @cancel="config.cancelCallback" @submit="config.submitCallback" />
</CfFlex>
</template>
<script setup lang="ts">
import { onBeforeUnmount, onMounted, onUnmounted, ref, useTemplateRef } from 'vue';
import { onBeforeUnmount, onMounted, ref, useTemplateRef } from 'vue';
import MaterialAdjuster from './MaterialAdjuster.vue';
import { useScene } from '../stores/sceneStore';
import CfFlex from './CfFlex.vue';
@ -18,7 +18,7 @@ const eventbus = useEvent();
const container = useTemplateRef('container');
const adjusterRef = useTemplateRef('adjuster');
const config = GetConfig();
const textureSrc = ref(config.textureSrc);
const textureSrc = ref<string[]>(Array.from(config.textureSrc));
//
document.addEventListener('contextmenu', (e) => e.preventDefault());
@ -42,7 +42,7 @@ function HandleUpload() {
}
function HandleChangeTexture() {
textureSrc.value = config.textureSrc;
textureSrc.value = Array.from(config.textureSrc);
}
async function HandleUpdateConfig() {
@ -51,7 +51,7 @@ async function HandleUpdateConfig() {
const json = FromDeflateBase64(config.file);
await scene.ImportMaterialAsync(json);
}
textureSrc.value = config.textureSrc;
textureSrc.value = Array.from(config.textureSrc);
}
</script>

View File

@ -3,7 +3,7 @@ import type { MaterialRequest } from "../components/MaterialAdjuster.vue"
let _libOutputConfig = {
host:'https://tapi.cfcad.cn:7779',
textureSrc: "",
textureSrc: [],
file: undefined,
submitCallback: undefined,
cancelCallback: undefined,
@ -23,8 +23,8 @@ export type LibOutputConfig = {
*
*/
host: string,
/** 材质贴图链接 */
textureSrc: string,
/** 材质贴图链接列表,场景会只会载入第一个链接作为纹理预览,但是导出提交时会为所有链接创建材质 */
textureSrc: Array<string>,
/** 材质预设数据base64编码 */
file?: string,
/** 环境贴图链接(立方体贴图,按照顺序输入[右左上下前后] */
@ -32,7 +32,7 @@ export type LibOutputConfig = {
/** 灰度环境贴图链接,输入格式与环境贴图一致 */
grayEnvTextureSrc: string[],
/** 提交材质时的回调 */
submitCallback?: (data: MaterialRequest) => void,
submitCallback?: (data: Array<MaterialRequest>) => void,
/**
*
* @deprecated 使