6 Commits

5 changed files with 43 additions and 37 deletions

View File

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

View File

@@ -1,6 +1,7 @@
<template> <template>
<div vertical class="material-adjuster"> <div vertical class="material-adjuster">
<div class="adjust-section"> <!-- 新增模式下隐藏材质名输入框 -->
<div v-if="ignoreTexture" class="adjust-section">
<h3>操作</h3> <h3>操作</h3>
<fieldset v-if="debugMode" style="margin: 1em 0;"> <fieldset v-if="debugMode" style="margin: 1em 0;">
<legend>DEBUG</legend> <legend>DEBUG</legend>
@@ -59,7 +60,8 @@
<label>高光</label> <label>高光</label>
<CfFlex gap="1em" class="input-range"> <CfFlex gap="1em" class="input-range">
<input v-model="emissiveIntensity" type="range" min="0" max="1" step="0.01" /> <input v-model="emissiveIntensity" type="range" min="0" max="1" step="0.01" />
<input v-model="emissiveIntensity" type="number" @change="ClampNumericValue" min="0" max="1" step="0.01" /> <input v-model="emissiveIntensity" type="number" @change="ClampNumericValue" min="0" max="1"
step="0.01" />
</CfFlex> </CfFlex>
</div> </div>
@@ -135,7 +137,7 @@ const { Material, CurrGeometry, Geometries } = storeToRefs(scene);
const props = defineProps<{ const props = defineProps<{
name?: string; name?: string;
textureSrcList?: string[]; textures?: { name: string, src: string }[];
/** 忽略纹理参数,提交时直接输出场景内的材质,用于某些在组件外对场景进行编辑的特殊情况(例如材质编辑模式) */ /** 忽略纹理参数,提交时直接输出场景内的材质,用于某些在组件外对场景进行编辑的特殊情况(例如材质编辑模式) */
ignoreTexture?: boolean; ignoreTexture?: boolean;
}>(); }>();
@@ -145,7 +147,7 @@ const emits = defineEmits<{
}>(); }>();
const debugMode = ref(false); const debugMode = ref(false);
const textureSrc = computed(() => props.textureSrcList || []); const Textures = computed(() => props.textures || []);
const debugTextureSrc = ref(""); const debugTextureSrc = ref("");
const textureAdjustment = ref<TextureAdjustment>({ const textureAdjustment = ref<TextureAdjustment>({
wrapS: MirroredRepeatWrapping, wrapS: MirroredRepeatWrapping,
@@ -198,17 +200,17 @@ const uploading = ref(false);
// }); // });
const materialInfo = reactive({ const materialInfo = reactive({
dirId: DirectoryId.MaterialDir, // 正常来说是2 dirId: DirectoryId.MaterialDir, // 正常来说是2
materialName: props.name || '材质', materialName: props.name || Textures.value[0]?.name || '材质',
inputText: '', inputText: '',
}); });
watch(textureSrc, async (val) => { watch(Textures, async (val) => {
if (val.length == 0) return; if (val.length == 0 || props.ignoreTexture) return;
await scene.ChangeTextureFromUrlAsync(val[0]); await scene.ChangeTextureFromUrlAsync(val[0].src);
}); });
watch(() => props.name, () => { watch(() => props.name, () => {
materialInfo.materialName = props.name || '材质'; materialInfo.materialName = props.name || Textures.value[0]?.name || '材质';
}); });
watch(textureAdjustment, async (val) => { watch(textureAdjustment, async (val) => {
@@ -261,7 +263,9 @@ async function HandleUpload() {
uploading.value = true; uploading.value = true;
const result = []; const result = [];
if (props.ignoreTexture) { if (props.ignoreTexture) {
// 直接将材质序列化 // 注意更改材质内部名称
Material.value.Name = materialInfo.materialName;
// 将材质序列化
const mat = { const mat = {
name: materialInfo.materialName, name: materialInfo.materialName,
logo: await scene.GenerateMaterialLogoAsync(), logo: await scene.GenerateMaterialLogoAsync(),
@@ -272,20 +276,23 @@ async function HandleUpload() {
} }
else { else {
// 遍历纹理链接列表,更改纹理后将材质序列化,然后还原场景 // 遍历纹理链接列表,更改纹理后将材质序列化,然后还原场景
let idx = 0; for (const texture of Textures.value) {
for (const src of textureSrc.value) { // 注意更改材质内部名称
await scene.ChangeTextureFromUrlAsync(src); Material.value.Name = texture.name;
// 更新纹理
await scene.ChangeTextureFromUrlAsync(texture.src);
const mat = { const mat = {
name: textureSrc.value.length > 1 ? materialInfo.materialName + ++idx : materialInfo.materialName, name: texture.name,
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);
} }
// 还原场景纹理
await scene.ChangeTextureFromUrlAsync(Textures.value[0].src);
} }
await scene.ChangeTextureFromUrlAsync(textureSrc.value[0]);
emits('submit', result); emits('submit', result);
return result; return result;
} finally { } finally {

View File

@@ -1,7 +1,7 @@
<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" :ignore-texture="editMode" <MaterialAdjuster ref="adjuster" class="material-view-sider" :name="matName" :textures="textures" :ignore-texture="editMode"
@cancel="config.cancelCallback" @submit="config.submitCallback" /> @cancel="config.cancelCallback" @submit="config.submitCallback" />
</CfFlex> </CfFlex>
</template> </template>
@@ -19,7 +19,7 @@ const eventbus = useEvent();
const container = useTemplateRef('container'); const container = useTemplateRef('container');
const adjusterRef = useTemplateRef('adjuster'); const adjusterRef = useTemplateRef('adjuster');
const config = GetConfig(); const config = GetConfig();
const textureSrc = ref<string[]>(Array.from(config.textureSrc)); const textures = ref<{name: string, src: string}[]>(Array.from(config.textures));
const matName = ref<string>(); const matName = ref<string>();
const editMode = ref(false); const editMode = ref(false);
@@ -45,7 +45,7 @@ function HandleUpload() {
} }
function HandleChangeTexture() { function HandleChangeTexture() {
textureSrc.value = Array.from(config.textureSrc); textures.value = Array.from(config.textures);
} }
async function HandleUpdateConfig() { async function HandleUpdateConfig() {
@@ -56,9 +56,9 @@ async function HandleUpdateConfig() {
editMode.value = true; editMode.value = true;
} }
else { editMode.value = false; } else { editMode.value = false; }
if (config.textureSrc) { if (config.textures && config.textures.length > 0) {
textureSrc.value = Array.from(config.textureSrc); textures.value = Array.from(config.textures);
await scene.ChangeTextureFromUrlAsync(textureSrc.value[0]); // 这一行是保证首次Mount组件时纹理能够立刻刷新 await scene.ChangeTextureFromUrlAsync(textures.value[0].src); // 这一行是保证首次Mount组件时纹理能够立刻刷新
} }
} }

View File

@@ -3,7 +3,7 @@ import type { MaterialRequest } from "../components/MaterialAdjuster.vue"
let _libOutputConfig = { let _libOutputConfig = {
host:'https://tapi.cfcad.cn:7779', host:'https://tapi.cfcad.cn:7779',
textureSrc: [], textures: [],
file: undefined, file: undefined,
submitCallback: undefined, submitCallback: undefined,
cancelCallback: undefined, cancelCallback: undefined,
@@ -24,7 +24,12 @@ export type LibOutputConfig = {
*/ */
host: string, host: string,
/** 材质贴图链接列表,用与批量提交,场景会只会载入第一个链接作为纹理预览,但是导出提交时会为所有链接创建材质 */ /** 材质贴图链接列表,用与批量提交,场景会只会载入第一个链接作为纹理预览,但是导出提交时会为所有链接创建材质 */
textureSrc: Array<string>, textures: Array<{
/** 材质名 */
name: string;
/** 纹理链接 */
src: string;
}>,
/** 更新模型,对材质进行编辑时赋值 */ /** 更新模型,对材质进行编辑时赋值 */
updateModel?: { updateModel?: {
/** 材质名 */ /** 材质名 */

View File

@@ -106,18 +106,12 @@ const sceneSetup = () => {
console.warn("Material has not been initialized"); console.warn("Material has not been initialized");
return; return;
} }
let record = Material.value.map?.Object as TextureTableRecord;
if (!record) { const record = new TextureTableRecord();
// record = db.TextureTable.Symbols.values().next().value; record.Name = db.TextureTable.AllocateName();
// if(!record){ db.TextureTable.Add(record);
record = new TextureTableRecord(); // 替换map
record.Name = db.TextureTable.AllocateName(); Material.value.map = record.Id;
db.TextureTable.Add(record);
// 替换map
Material.value.map = record.Id;
// Material.value.map = img ? record.Id : undefined;
// }
}
// 设置Store // 设置Store
_currTexture.value = record; _currTexture.value = record;
@@ -132,8 +126,8 @@ const sceneSetup = () => {
texture.image = img; texture.image = img;
} }
texture.needsUpdate = true;
UpdateTexture(); UpdateTexture();
await record.Update();
await UpdateMaterialAsync(); await UpdateMaterialAsync();
} }