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

Question

我几乎不懂 JavaScript，但我知道如何进行函数连接、计时器、CSS 编辑/HTML 编辑等，但我不明白如何使用这个“dat.GUI”，就像我当前的那样项目设计...好吧..很糟糕。

我的所有按钮都只是我用来制作简约设计的链接。看看它:codepen.io ..所以我想进入 Dat.GUI，但我不知道如何制作 GUI，因为我尝试过的所有教程通常都会导致一个不可见的 GUI(它甚至不显示)，什么也没有有效。

所以我来这里是想问问是否有人有一些信息以及一些我可以借鉴的例子？在我上面发布的项目中，我已将迄今为止为 dat.gui 部分编写的代码包含在 JavaScript 的最底部。

对于那些要发布包含此示例的答案的人:chromeexpirements不。我不是一次又一次地寻找这个，我无法弄清楚如何使用它，并且它并没有真正以我能理解的详细程度解释它(我不是一个无能的javascripter)。我也开始在codepen上使用这个例子来学习:codepen.io

我的项目中的代码量有点......无法在此处使用/粘贴。这是我当前要运行的代码。假设我有function raintest() { intervalID = window.setInterval(myCallback, 100); }运行一个间隔，每 100 毫秒运行一次 myCallback，单击屏幕上的一个按钮来执行某些操作，这并不重要，但是我将如何运行函数 raintest()与 dat.gui 和其他功能？

这是我迄今为止所拥有并正在尝试使用的 dat.gui 代码。到目前为止，它所做的只是显示关闭/打开选项卡，我不知道如何向列表添加按钮:

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

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

Answer 1

启动图形用户界面

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

sampleText 代表 GUI 中的接入点。

Name1 代表您的按钮/选项卡的名称。在 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); 并创建一个名为的新函数

  函数设置值() { if(text.NameOfButton) { 变量或东西 = 1000; } 别的 { 变量或东西 = 0; } }

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