javascript - dat.GUI 用户输入不工作

标签 javascript three.js dat.gui

我正在构建一个简单的网络应用程序。作为其中的一部分,我想使用 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 的建议将不胜感激。

最佳答案

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

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

关于javascript - dat.GUI 用户输入不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17233560/

相关文章:

javascript - 有没有办法在 ThreeJs 中使用 dat.gui.js 构建范围 slider ?

plugins - XVal 中的 JScript 错误,有人见过这个错误吗?

javascript - 在javascript中添加滚动条

javascript - 是否可以从字节数组而不是文件路径构造一个 THREE.Texture?

three.js - 在 THREE.js 中克隆纹理而不会导致重复的卡内存

javascript - three.js 立方体使用多个纹理的验证

javascript - Chrome 控制台中 JavaScript 对象摘要中的神秘字母

javascript - 在 dat.gui 中禁用按钮的方法?

javascript - 为 li 和 ul li 设置不同的 <span> 标签(嵌套)

javascript - 如何选择具有Thymeleaf属性的元素?