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，它单击屏幕上的按钮会执行某项操作，那并不是很重要，但是我如何使用dat.gui运行函数raintest()和其他功能。这是到目前为止我要使用的dat.gui代码，现在正在尝试使用，到目前为止，它所做的只是显示“关闭/打开”选项卡，而我不知道如何在列表中添加按钮：

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

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

Answer 1

我找到了自己的答案：（因为没有其他人回答）

使用

启动gui

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

sampleText在GUI中表示您的AccessPoint。

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

这将使您能够访问“功能”，如果您希望在功能上附加按钮，请首先编写：

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

DataType（代表值的类型）应替换为Function的名称，如果使用单选按钮或true / false语句，则在此处输入true或false。（使用功能，不包括右括号，仅包括名称（{function test1 () {}> this.Name1 = test1）

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

将this.NameOfButton = false;添加到var sampleText的底部
然后在var Gui下添加gui.add(text, 'NameOfButton').onChange(setValue);并创建一个名为

的新函数

function setValue () {
  if(text.NameOfButton) {
    VariableOrSomething = 1000;
  }
  else {
    VariableOrSomething = 0;
  }
}

ELSE是未选中单选按钮（false）时所调用的内容，IF是其选中时（true）所调用的内容。

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

1 个答案: