MES/material-editor
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 26 Wiki Activity

修复材质导入问题

Browse Source
This commit is contained in:
陈梓阳 2025-05-29 19:00:36 +08:00
parent 26f1c60a43
commit 99613dbc83
4 changed files with 40 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

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

15
src/common/MaterialEditor.ts
View File

@ -167,15 +167,17 @@ export class MaterialEditor
private Material: PhysicalMaterialRecord;
setMaterial(mat: PhysicalMaterialRecord)
{
console.log("set", mat.Material);
this.Material = mat;
this._MeshMaterial.copy(mat.Material);
// for (const child of this.ShowObject.children) {
// if (child instanceof Mesh) {
// child.material = mat.Material;
// }
// }
let mtl = this._MeshMaterial;
console.log("set2", this._MeshMaterial)
console.log(mat.Material);
this.ShowMesh.material = mtl;
this._MeshMaterial.copy(mat.Material);
let mtl = this._MeshMaterial;
if (mtl.metalness > 0.8)
this.LoadMetalEnv().then(env =>
{
@ -214,6 +216,7 @@ export class MaterialEditor
async Update()
{
console.log("copy:", this.Material.Material.metalness);
let mat = this.ShowMesh.material as MeshPhysicalMaterial;
mat.needsUpdate = true;

42
src/components/MaterialAdjuster.vue
View File

@ -38,25 +38,25 @@
<label>金属度</label>
<CfFlex gap="1em">
<input v-model="Material.matalness" @change="UpdateMaterial" type="range" min="0" max="1" step="0.01" />
<input v-model="Material.matalness" @input="UpdateMaterial" type="range" min="0" max="1" step="0.01" />
<span>{{ Material.matalness }}</span>
</CfFlex>
<label>粗糙度</label>
<CfFlex gap="1em">
<input v-model="Material.roughness" @change="UpdateMaterial" type="range" min="0" max="1" step="0.01" />
<input v-model="Material.roughness" @input="UpdateMaterial" type="range" min="0" max="1" step="0.01" />
<span>{{ Material.roughness }}</span>
</CfFlex>
<label>法线强度</label>
<CfFlex gap="1em">
<input v-model="Material.bumpScale" @change="UpdateMaterial" type="range" min="0" max="1" step="0.01" />
<input v-model="Material.bumpScale" @input="UpdateMaterial" type="range" min="0" max="1" step="0.01" />
<span>{{ Material.bumpScale }}</span>
</CfFlex>
<label>高光</label>
<CfFlex gap="1em">
<input v-model="Material.specular" @change="UpdateMaterial" type="range" min="0" max="1" step="0.01" />
<input v-model="Material.specular" @input="UpdateMaterial" type="range" min="0" max="1" step="0.01" />
<span>{{ Material.specular }}</span>
</CfFlex>
</div>
@ -64,9 +64,9 @@
<div class="adjust-section">
<h3>纹理调节</h3>
<label>启用纹理</label>
<input type="checkbox" v-model="enableTexture" />
<input type="checkbox" v-model="Material.useMap" @change="UpdateMaterial" />
<!-- <label>平铺U</label>
<label>平铺U</label>
<select v-model="textureAdjustment.wrapS">
<option value="0">镜像平铺</option>
<option value="1">平铺</option>
@ -78,7 +78,7 @@
<option value="0">镜像平铺</option>
<option value="1">平铺</option>
<option value="2">展开</option>
</select> -->
</select>
<label>旋转</label>
<input v-model="textureAdjustment.rotation" type="number" step="0.01" min="0" max="359" />
@ -108,9 +108,8 @@
</template>
<script setup lang='ts'>
import { ref, reactive, watch, onMounted } from "vue"
import { ref, reactive, watch, onMounted, computed } from "vue"
import { useScene, type TextureAdjustment } from "../stores/sceneStore";
import { storeToRefs } from "pinia";
import CfFlex from "./CfFlex.vue";
import { DirectoryId } from "../api/Request";
import { IsNullOrWhitespace } from "../helpers/helper.string";
@ -135,9 +134,11 @@ const emits = defineEmits<{
(e: 'submit', data: MaterialRequest): void;
}>();
const debugMode = ref(true);
const { CurrGeometry, Geometries, Material } = storeToRefs(scene);
const enableTexture = ref(Material.value.useMap);
const Material = computed(() => scene.Material);
const CurrGeometry = computed(() => scene.CurrGeometry);
const Geometries = computed(() => scene.Geometries);
const debugMode = ref(false);
const _textureSrc = ref(props.textureSrc);
const textureAdjustment = ref<TextureAdjustment>({
wrapS: 0,
@ -170,11 +171,6 @@ watch(() => props.textureSrc, async (val) => {
await scene.ChangeTextureFromUrlAsync(_textureSrc.value);
});
watch(enableTexture, async (val) => {
await EnableTexture(val);
});
watch(textureAdjustment, async (val) => {
UpdateTexture();
});
@ -194,13 +190,18 @@ watch(() => scene.CurrTexture, (val) => {
})
async function UpdateMaterial() {
console.log(scene.CurrentShowObject)
// console.log((scene.CurrentShowObject.children[0] as Mesh).material.metalness);
// console.log(Material.value.Material.metalness);
// console.log(scene.Material == scene.GetEditor().Material)
// Material.value.matalness = model.metallic;
// Material.value.roughness = model.roughness;
// Material.value.bumpScale = model.normalScale;
// Material.value.specular = model.emissiveIntensity;
// Material.value.side = DoubleSide;
await scene.UpdateMaterialAsync();
scene.Update();
await scene.UpdateMaterialAsync();
}
function UpdateTexture() {
@ -218,11 +219,6 @@ function UpdateTexture() {
scene.Update();
}
async function EnableTexture(enable: boolean) {
Material.value.useMap = enable;
await scene.UpdateMaterialAsync();
}
async function loadData() {
if(!materialInfo.inputText) return;
const json = JSON.parse(materialInfo.inputText);

19
src/stores/sceneStore.ts
View File

@ -11,6 +11,7 @@ import { GetConfig } from "../lib/libOutputConfig";
const sceneSetup = () => {
let _editor: MaterialEditor | undefined;
let _database: Database | undefined;
const _material = ref<PhysicalMaterialRecord>(new PhysicalMaterialRecord());
const _currGeometry = ref<string>('球');
const _currTexture = ref<Texture>();
const CurrGeometry = computed({
@ -19,7 +20,7 @@ const sceneSetup = () => {
})
const CurrTexture = computed<Texture>(() => _currTexture.value);
const Geometries = ref<string[]>([]);
const Material = ref<PhysicalMaterialRecord>(new PhysicalMaterialRecord());
const Material = computed(() => _material.value);
const CurrentShowObject = computed(() => _editor.ShowObject);
function Initial(canvas: HTMLElement) {
@ -74,15 +75,15 @@ const sceneSetup = () => {
}
async function UpdateMaterialAsync() {
console.log('UpdateMaterialAsync')
await Material.value.Update();
console.log(Material.value.Update);
// TODO: Danger: 如果等待下面这一行，会导致更新卡住（未知问题）
Material.value.Update();
// Material.value.Material.needsUpdate = true;
await _editor.Update();
Update();
}
async function ChangeTextureFromUrlAsync(url?: string) {
console.log('ChangeTextureFromUrlAsync')
// 关联贴图
const db = Material.value.Db;
if (!db) return; // 材质未初始化
@ -123,9 +124,10 @@ const sceneSetup = () => {
async function ImportMaterialAsync(materialJson: string) {
const material = MaterialIn(JSON.parse(materialJson));
Material.value = material;
_editor.setMaterial(material);
_material.value = material;
_editor.setMaterial(_material.value as PhysicalMaterialRecord);
await ChangeTextureFromUrlAsync();
await UpdateMaterialAsync();
}
async function GenerateMaterialLogoAsync() {
@ -158,7 +160,8 @@ const sceneSetup = () => {
ImportMaterialAsync,
GenerateMaterialLogoAsync,
Dispose,
CurrentShowObject
CurrentShowObject,
GetEditor: () => _editor
};
};