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

如何解决使用Three JS自定义dat.gui中的最小值和最大值

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

我该怎么做？

解决方法

您可以像这样在.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,20);
  console.log(influences.value);
})

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

</script>