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 09:35:16 +08:00
parent 0cbef7678d
commit 1a04bb8d20
2 changed files with 62 additions and 30 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.23",
"version": "1.0.24",
"type": "module",
"scripts": {
"dev": "vite",

90
src/components/MaterialAdjuster.vue
View File

@ -16,7 +16,8 @@
<CfFlex gap="1em" v-if="debugMode">
<button class="btn-success" style="min-width: 110px;" @click="HandleUpload">保存</button>
<button class="btn-danger" style="min-width: 110px;" @click="HandleCancel">取消</button>
<button v-if="debugMode" class="btn-primary" style="min-width: 110px;" @click="HandleGenerateLogo">预览缩略图</button>
<button v-if="debugMode" class="btn-primary" style="min-width: 110px;"
@click="HandleGenerateLogo">预览缩略图</button>
</CfFlex>
</div>
@ -38,27 +39,31 @@
<h3>材质调节</h3>
<label>金属度</label>
<CfFlex gap="1em">
<CfFlex gap="1em" class="input-range">
<input v-model="Material.matalness" @input="UpdateMaterial" type="range" min="0" max="1" step="0.01" />
<span>{{ Material.matalness }}</span>
<input v-model="Material.matalness" @input="ClampNumericValue" @change="UpdateMaterial" type="number" min="0"
max="1" step="0.01" />
</CfFlex>
<label>粗糙度</label>
<CfFlex gap="1em">
<CfFlex gap="1em" class="input-range">
<input v-model="Material.roughness" @input="UpdateMaterial" type="range" min="0" max="1" step="0.01" />
<span>{{ Material.roughness }}</span>
<input v-model="Material.roughness" @input="ClampNumericValue" @change="UpdateMaterial" type="number" min="0"
max="1" step="0.01" />
</CfFlex>
<label>法线强度</label>
<CfFlex gap="1em">
<CfFlex gap="1em" class="input-range">
<input v-model="Material.bumpScale" @input="UpdateMaterial" type="range" min="0" max="1" step="0.01" />
<span>{{ Material.bumpScale }}</span>
<input v-model="Material.bumpScale" @input="ClampNumericValue" @change="UpdateMaterial" type="number" min="0"
max="1" step="0.01" />
</CfFlex>
<label>高光</label>
<CfFlex gap="1em">
<CfFlex gap="1em" class="input-range">
<input v-model="Material.specular" @input="UpdateMaterial" type="range" min="0" max="1" step="0.01" />
<span>{{ Material.specular }}</span>
<input v-model="Material.specular" @input="ClampNumericValue" @change="UpdateMaterial" type="number" min="0"
max="1" step="0.01" />
</CfFlex>
</div>
@ -280,6 +285,17 @@ async function HandleGenerateLogo() {
DownloadFile("logo.png", blob);
}
function ClampNumericValue(e: InputEvent) {
const elm = e.target as HTMLInputElement;
const min = +elm.min;
const max = +elm.max;
if (isNaN(min) || isNaN(max)) return;
if (elm.valueAsNumber < min) elm.valueAsNumber = min;
if (elm.valueAsNumber > max) elm.valueAsNumber = max;
}
defineExpose({
Upload: HandleUpload,
Cancel: HandleCancel
@ -322,26 +338,6 @@ select
margin: 0.5rem 0;
}
input[type="range"]
{
width: 220px;
margin: 0.5rem 0;
}
input[type="text"]
{
width: 220px;
padding: 4px;
margin: 0.5rem 0;
}
input[type="number"]
{
width: 220px;
padding: 4px;
margin: 0.5rem 0;
}
.btn-success
{
background-color: #4caf50;
@ -386,4 +382,40 @@ input[type="number"]
{
background-color: #0a7ed2;
}
.input-range
{
max-width: 300px;
input[type="range"]
{
flex: 14;
margin: 0.5rem 0;
}
input[type="text"]
{
flex: 2;
padding: 4px;
margin: 0.5rem 0;
}
input[type="number"]
{
flex: 2;
min-width: 0;
padding: 4px;
margin: 0.5rem 0;
appearance: textfield;
-moz-appearance: textfield;
margin: 0;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button
{
-webkit-appearance: none;
margin: 0;
}
}
</style>