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
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.24",
"version": "1.0.25",
"type": "module",
"scripts": {
"dev": "vite",

57
src/components/MaterialAdjuster.vue
View File

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