dat.GUI 用户输入不起作用答案

【问题标题】：dat.GUI user input not workingdat.GUI 用户输入不起作用
【发布时间】：2019-04-26 06:47:10
【问题描述】：

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

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

到目前为止，我已经创建了一个名为 search term 的变量并将其添加到 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();

}

任何关于为什么我无法编辑其他易于使用的 GUI 的值或建议的帮助将不胜感激。

【问题讨论】：

关于使用 dat.gui 和three.js 的示例，请查看stemkoski.github.io/Three.js
那些例子有同样的问题。

标签： javascript three.js dat.gui

【解决方案1】：

不确定这是否会有所帮助，但这是我遇到的问题。如果您有与您的three.js 画布相关联的任何类型的相机控件，这可能会干扰GUI。例如，您可以调整滑块，但不能编辑文本。当您使用例如new THREE.OrbitControls(camera); 将控件附加到three.js 相机时，请确保将three.js dom 元素指定为第二个参数，如下所示：

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

【讨论】：

这有助于解决轨道控制和 dat.gui 可能出现的大部分问题，但我认为它不能解决问题。不过很好的建议。

【解决方案2】：

我有一些问题。

它来自“.listen()”函数。有问题。

删除 .listen() 就可以了。

【讨论】：

哇，不知道为什么要修复它，但这就是解决方案。非常感谢。
我看到了同样的问题。是否有解决此问题的 DAT GUI 版本？
这里有同样的问题，但我没有使用.listen()。 :(

【解决方案3】：

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

.main {
   z-index: 5;
}

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

【讨论】：

我使用的是裸骨网络，这解决了我的问题，谢谢！ z-index 需要为 0，因为当 ThreeJS 窗口位于 z-index 1 时，dat.gui 被覆盖

【解决方案4】：

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

span {
    margin: 0 10px;
}

将样式应用于新创建的类而不是 span 解决了它。

【讨论】：

我使用的是裸骨网络，这解决了我的问题，谢谢！
z-index 需要为 0，因为当 ThreeJS 窗口位于 z-index 1 时，dat.gui 被覆盖......所以这个答案帮助我弄清楚了

【解决方案5】：

就我而言，这是一个 z-index 问题。我用以下方法解决了这个问题：

.dg.ac {
  z-index: 1000 !important;
}

【讨论】：