Dat.GUI 中的随机值

Question

我正在使用 dat.gui 来控制值，但想添加一个按钮来随机化值。有没有办法做到这一点？我有随机化按钮，但我不知道如何引用参数来更改其值。

基本代码是这样的：

const params = {}
params.num = 20

gui.add(params, 'num').onChange(doSomething)

//on clicking the 'Randomise' button I would essentially like this to happen:

gui.(params, 'num').setValue( randomValue ).onChange(doSomething)

有什么方法可以引用参数，然后将其值设置为 x？提前致谢！

Answer 1

您可以更改属性的值并在 GUI 中使用 .listen() 来监听属性.

的变化

单击 GUI 上的 randomize 并查看它的作用：

<script type="module">
import {GUI} from "https://cdn.jsdelivr.net/npm/three@0.125.2/examples/jsm/libs/dat.gui.module.js";

let params = {
  value: 20,
  randomize: _ => {
    params.value = Math.random() * 40;
  }
}

let gui = new GUI();
gui.add(params, "value", 0, 40).step(0.1).listen();
gui.add(params, "randomize");

</script>

Dat.GUI 中的随机值

Randomising Value in Dat.GUI

random

user-interface

three.js

dat.gui