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-06-13 10:24:15 +08:00
parent 1a04bb8d20
commit 3d27bccdea
2 changed files with 44 additions and 15 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", "name": "material-editor",
"private": true, "private": true,
"version": "1.0.24", "version": "1.0.25",
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",

57
src/components/MaterialAdjuster.vue
View File

@ -40,30 +40,26 @@
<label>金属度</label> <label>金属度</label>
<CfFlex gap="1em" class="input-range"> <CfFlex gap="1em" class="input-range">
<input v-model="Material.matalness" @input="UpdateMaterial" type="range" min="0" max="1" step="0.01" /> <input v-model="metallic" type="range" min="0" max="1" step="0.01" />
<input v-model="Material.matalness" @input="ClampNumericValue" @change="UpdateMaterial" type="number" min="0" <input v-model="metallic" type="number" @change="ClampNumericValue" min="0" max="1" step="0.01" />
max="1" step="0.01" />
</CfFlex> </CfFlex>
<label>粗糙度</label> <label>粗糙度</label>
<CfFlex gap="1em" class="input-range"> <CfFlex gap="1em" class="input-range">
<input v-model="Material.roughness" @input="UpdateMaterial" type="range" min="0" max="1" step="0.01" /> <input v-model="roughness" type="range" min="0" max="1" step="0.01" />
<input v-model="Material.roughness" @input="ClampNumericValue" @change="UpdateMaterial" type="number" min="0" <input v-model="roughness" type="number" @change="ClampNumericValue" min="0" max="1" step="0.01" />
max="1" step="0.01" />
</CfFlex> </CfFlex>
<label>法线强度</label> <label>法线强度</label>
<CfFlex gap="1em" class="input-range"> <CfFlex gap="1em" class="input-range">
<input v-model="Material.bumpScale" @input="UpdateMaterial" type="range" min="0" max="1" step="0.01" /> <input v-model="normalScale" type="range" min="0" max="1" step="0.01" />
<input v-model="Material.bumpScale" @input="ClampNumericValue" @change="UpdateMaterial" type="number" min="0" <input v-model="normalScale" type="number" @change="ClampNumericValue" min="0" max="1" step="0.01" />
max="1" step="0.01" />
</CfFlex> </CfFlex>
<label>高光</label> <label>高光</label>
<CfFlex gap="1em" class="input-range"> <CfFlex gap="1em" class="input-range">
<input v-model="Material.specular" @input="UpdateMaterial" 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="Material.specular" @input="ClampNumericValue" @change="UpdateMaterial" type="number" min="0" <input v-model="emissiveIntensity" type="number" @change="ClampNumericValue" min="0" max="1" step="0.01" />
max="1" step="0.01" />
</CfFlex> </CfFlex>
</div> </div>
@ -122,6 +118,7 @@ import { IsNullOrWhitespace } from "../helpers/helper.string";
import { FromDeflateBase64, ToDeflatedBase64 } from "../helpers/helper.material"; import { FromDeflateBase64, ToDeflatedBase64 } from "../helpers/helper.material";
import { storeToRefs } from "pinia"; import { storeToRefs } from "pinia";
import { DownloadFile } from "../helpers/helper.web"; import { DownloadFile } from "../helpers/helper.web";
import MathHelper from "../helpers/MathHelper";
export interface MaterialRequest { export interface MaterialRequest {
/** 材质名 */ /** 材质名 */
@ -158,6 +155,39 @@ const textureAdjustment = ref<TextureAdjustment>({
moveX: 0, moveX: 0,
moveY: 0 moveY: 0
}); });
const metallic = computed({
get: () => Material.value.matalness,
set: (val) => {
Material.value.matalness = MathHelper.clamp(val, 0, 1);
UpdateMaterial();
}
});
const roughness = computed({
get: () => Material.value.roughness,
set: (val) => {
Material.value.roughness = MathHelper.clamp(val, 0, 1);
UpdateMaterial();
}
});
const normalScale = computed({
get: () => Material.value.bumpScale,
set: (val) => {
Material.value.bumpScale = MathHelper.clamp(val, 0, 1);
UpdateMaterial();
}
});
const emissiveIntensity = computed({
get: () => Material.value.specular,
set: (val) => {
Material.value.specular = MathHelper.clamp(val, 0, 1);
UpdateMaterial();
}
});
const uploading = ref(false); const uploading = ref(false);
// const model = reactive({ // const model = reactive({
// metallic: Material.value.matalness, // metallic: Material.value.matalness,
@ -292,8 +322,7 @@ function ClampNumericValue(e: InputEvent) {
if (isNaN(min) || isNaN(max)) return; if (isNaN(min) || isNaN(max)) return;
if (elm.valueAsNumber < min) elm.valueAsNumber = min; elm.valueAsNumber = MathHelper.clamp(elm.valueAsNumber, min, max);
if (elm.valueAsNumber > max) elm.valueAsNumber = max;
} }
defineExpose({ defineExpose({