添加批量纹理创建

package.json

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

src/components/MaterialAdjuster.vue

@@ -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..." />
+            <input v-model.trim="debugTextureSrc" type="text" placeholder="在此键入纹理图像的URL..." />
-            <button class="btn-primary" @click="scene.ChangeTextureFromUrlAsync(_textureSrc)"
+            <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 = {
+        const result = [];
-            name: materialInfo.materialName,
+        // 遍历纹理链接列表，更改纹理后将材质序列化，然后还原场景
-            logo: await scene.GenerateMaterialLogoAsync(),
+        let idx = 0;
-            // jsonString -> Deflate -> BinaryString -> Base64
+        for (const src of props.textureSrcList) {
-            file: ToDeflatedBase64(await scene.SerializeMaterialAsync())
+            await scene.ChangeTextureFromUrlAsync(src);
-        };
+            const mat = {
-        emits('submit', data);
+                name: materialInfo.materialName + ++idx,
-        return data;
+                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;
     }

src/components/MaterialView.vue

@@ -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>

src/lib/libOutputConfig.ts

@@ -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 不需要使用