dat.GUI用户输入不工作

我正在构建一个简单的Web应用程序。作为它的一部分，我想使用dat.GUI，因为它似乎是最简单的方法。dat.GUI用户输入不工作

我想要做的事：我使用three.js来显示一个对象。在这个对象上，我想要一些图形用户界面（目前使用dat.GUI），它允许用户输入一个搜索词并点击一个按钮，然后调用一个使用搜索词的函数。

到目前为止，我创建了一个名为搜索词的变量，并将其添加到GUI中。这工作正常，并显示变量的值。 GUI也可以监听变量并在其更改后进行更新。但我无法修改这个值。我还添加了一个字段来调整我在three.js中添加到szene中的光的强度。对于GUI的这一部分，通过拖动工作栏来调整该值，但尝试输入一个值不会。

代码看起来是这样的：

var searchterm = ''; 
... 

function init(){ 
.... 
var gui = new dat.GUI(); 
gui.add(light, 'intensity').min(1).max(10).listen(); 
gui.add(this, 'searchterm').listen(); 

}

为什么我不能代表其他易于使用的图形用户界面编辑值或建议的任何帮助，将不胜感激。

来源

2013-06-21 H_end-rik

有关使用dat.gui和three.js的示例，请查看http://stemkoski.github.io/Three.js/ –

这些示例具有相同的问题。 –

z顺序可能会出错？我找不到比dat gui更容易使用的东西。

.main { 
    z-index: 5; 
}

会确保这个元素在前面。除此之外，我确定问题可能是什么。

来源

2013-11-22 11:37:14 Culzean

我正在使用裸露的骨骼网，这解决了我的问题，谢谢！ z-index需要为0，因为当ThreeJS窗口处于z-index 1时，dat.gui被覆盖了。 – Orbitus007

不知道这是否会有所帮助，但这是我遇到的问题。如果您有任何与three.js画布相关的相机控件，可能会干扰GUI。例如，您可以调整滑块，但不能编辑文本。当您将控制在three.js所相机，例如，new THREE.OrbitControls(camera);，确保指定的three.js所DOM元素作为这样的第二个参数：

new THREE.OrbitControls(camera, document.getElementById('threeCanvas'));

来源

2013-11-22 16:26:51 Ey3cue

这有助于解决轨道控件和dat.gui可能发生的大多数问题，但我认为它不能解决有问题的问题。伟大的建议，但。 –

我有一些问题。

它来自“.listen（）”函数。这是越野车。

删除.listen（），它会工作。

来源

2013-11-28 16:51:19 Sayris

Woah，不知道为什么修复它，但这是解决方案。万分感谢。 –

我看到了同样的问题。是否有解决此问题的DAT GUI版本？ –

这里同样的问题，但我没有使用'.listen（）'。 :( – ygormutti

我遇到了同样的问题。在我的情况下，它是引起下面的CSS：

span { 
    margin: 0 10px; 
}

应用样式到新创建的类，而不是span解决它。

来源

2016-02-28 02:34:18 ygormutti

我正在使用裸骨的网站，这解决了我的问题，谢谢！ – Orbitus007

z-index需要为0，因为dat。当ThreeJS窗口在z-index 1时，gui被覆盖了......所以这个答案帮助我弄清楚了这一点 – Orbitus007

dat.GUI用户输入不工作

回答

相关问题