日期.GUI用户输入不起作用

dat.GUI user input not working

本文关键字：不起作用 输入 用户 GUI 日期      更新时间：2023-09-26

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

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

到目前为止，我已经创建了一个名为searchterm的变量，并将其添加到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的值或建议的帮助，我们将不胜感激。

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

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

我遇到了一些问题。

它来自".listen（）"函数。它是童车。

删除.listen（），它就会起作用。

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

.main {
   z-index: 5;
}

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

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

span {
    margin: 0 10px;
}

将样式应用于新创建的类而不是span解决了这个问题。

在我的案例中，这是一个z索引问题。我用以下方法解决了这个问题：

.dg.ac {
  z-index: 1000 !important;
}
相关文章：