使用三个 JS 自定义 dat.gui 中的最小值和最大值

Question

我在 MorphTargets 上使用 dat.gui。默认情况下，GUI 将 0 作为最小值，将 1 作为最大值，我希望它们显示为我各自的值，例如：0 为 10，1 为 20。

我该怎么做？

Answer 1

您可以这样计算 .onChange 中的值：

<script type="module">
import {GUI} from "https://threejs.org/examples/jsm/libs/dat.gui.module.js";

let gui = new GUI();

let params = {
    value: 10
}
let influences = {
    value: 0
}

gui.add(params, "value", 10, 20).onChange(val => {
  influences.value = range01(val, 10, 20);
  console.log(influences.value);
})

function range01(val, min, max){
  return (val - min) / (max - min);
}

</script>

使用三个 JS 自定义 dat.gui 中的最小值和最大值

Customize min and max values in dat.gui with Three JS

dat.gui