From 3d27bccdea3d96cefd4a81b96a8b0076556f72e0 Mon Sep 17 00:00:00 2001
From: "2817212736@qq.com" <2817212736@qq.com>
Date: Fri, 13 Jun 2025 10:24:15 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=9D=90=E8=B4=A8=E5=8F=82?=
 =?UTF-8?q?=E6=95=B0=E8=B0=83=E8=8A=82=E6=BB=91=E5=9D=97=E5=9C=A8=E6=89=8B?=
 =?UTF-8?q?=E5=8A=A8=E7=BC=96=E8=BE=91=E6=97=B6=E7=9A=84=E5=80=BC=E9=99=90?=
 =?UTF-8?q?=E5=88=B6=E5=A4=B1=E6=95=88=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                        |  2 +-
 src/components/MaterialAdjuster.vue | 57 ++++++++++++++++++++++-------
 2 files changed, 44 insertions(+), 15 deletions(-)

diff --git a/package.json b/package.json
index f6aaab6..68e0bce 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "material-editor",
   "private": true,
-  "version": "1.0.24",
+  "version": "1.0.25",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/src/components/MaterialAdjuster.vue b/src/components/MaterialAdjuster.vue
index 66c5eea..17b667c 100644
--- a/src/components/MaterialAdjuster.vue
+++ b/src/components/MaterialAdjuster.vue
@@ -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({