添加批量纹理创建
This commit is contained in:
parent
99613dbc83
commit
028aac8137
@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "material-editor",
|
||||
"private": true,
|
||||
"version": "1.0.8",
|
||||
"version": "1.0.9",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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>
|
||||
|
@ -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 不需要使用
|
||||
|
Loading…
Reference in New Issue
Block a user