Dat.GUI 中的随机化值答案

【问题标题】：Randomising Value in Dat.GUIDat.GUI 中的随机化值
【发布时间】：2021-02-26 19:23:15
【问题描述】：

我正在使用 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？提前致谢！

【问题讨论】：

标签： user-interface random three.js dat.gui

【解决方案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>

【讨论】：