如何像按钮一样使用 DAT.Gui 调用函数？

Question

我几乎不知道 JavaScript，但我知道如何进行函数连接、计时器、CSS editing/HTML 编辑等等，但我不明白如何使用此 "dat.GUI" 作为我当前的项目设计...好吧...很糟糕。

我所有的按钮都是链接，我用来做极简设计。看看它：codepen.io.. 所以我想进入 Dat.GUI，但我不知道如何制作 GUI，因为我尝试过的所有教程通常都会导致不可见GUI（它甚至没有显示）并且没有任何效果。

所以我来这里是想问问是否有人有一些信息和一些我可以处理的例子？在我上面 post 编辑的项目中，我在 JavaScript.

的最底部包含了到目前为止为 dat.gui 部分编写的代码

对于那些打算 post 的人来说，这个例子的答案包括：chromeexpirements DON'T. I'm not looking for this again and again, I can't figure out how to use it from that, and it doesn't really explain it in a level of detail I can understand (I'm not an inept javascripter). I also started using this example on codepen for learning: codepen.io

我的项目中的代码量有点...无法容纳use/paste。这是我当前的代码，以运行关闭。假设我有 function raintest() { intervalID = window.setInterval(myCallback, 100); } 运行s 一个间隔运行s myCallback 每 100 毫秒，它点击我屏幕上的一个按钮来做某事，这并不重要，但我如何运行函数 raintest() 与 dat.gui 和其他函数?

这是我目前拥有的 dat.gui 代码，正在尝试使用。到目前为止它所做的只是显示 close/open 选项卡，我不知道如何将按钮添加到列表中：

window.onload = function() {
  var gui = new dat.GUI();
  gui.add(text, 'message').onChange(setValue);
};

当前结果为空，我不知道如何将JavaScript代码正确连接到dat.gui。目前它只是为基本 GUI 加载一个选项卡。我实际上希望它能够打开，并在其中包含我所有的按钮和我的所有功能，这样我就可以随时使用我的布料自定义选项，而无需全天候 24/7 填满屏幕顶部。

Answer 1

用

启动 gui

window.onload = function() {
  text = new sampleText();
  setValue();
  var gui = new dat.GUI();

sampleText 表示您在 GUI 中的接入点。

Name1代表你button/tab的名字。在 var gui 下添加 gui.add(text, 'Name1')；这代表您的第一个按钮。

这将使您能够访问函数，如果您希望将按钮附加到函数，请先写：

var sampleText = function() {
  this.Name1 = DataType;

DataType（这表示值的类型）应替换为您的函数名称，在单选按钮或 true/false 语句的情况下，您将编写 true 或 false那里。（使用函数，排除右括号，仅名称 (function test1 () {} > this.Name1 = test1)

如果您想创建一个调用 2 个不同变量代码的单选按钮，请执行以下操作：

将this.NameOfButton = false;添加到var sampleText
然后在 var Gui 下添加 gui.add(text, 'NameOfButton').onChange(setValue); 并创建一个名为
的新函数
函数设置值(){ 如果（text.NameOfButton）{ 变量或某物 = 1000； } 别的 { 变量或某物 = 0; } }

ELSE 是单选按钮未选中时调用的内容 (false)，IF 是选中时调用的内容 (true)。

如何像按钮一样使用 DAT.Gui 调用函数？

How do I call a function using DAT.Gui like a button?

html

javascript

canvas

dat.gui