修复材质参数调节滑块在手动编辑时的值限制失效的问题
This commit is contained in:
parent
1a04bb8d20
commit
3d27bccdea
@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "material-editor",
|
||||
"private": true,
|
||||
"version": "1.0.24",
|
||||
"version": "1.0.25",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
|
@ -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({
|
||||
|
Loading…
Reference in New Issue
Block a user