我几乎不懂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。
答案 0 :(得分:3)
我找到了自己的答案:(因为没有其他人回答)
使用
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)所调用的内容。