dat.GUI用户输入无效

Question

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

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

到目前为止,我已经创建了一个名为搜索词的变量,并将其添加到GUI中.这很好,并显示变量的值.GUI还能够监听变量并在更改后进行更新.但我无法修改该值.我还添加了一个字段来调整我添加到szene中的光的强度为three.js.对于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的值或建议的帮助将不胜感激.

Answer 1

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

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

Answer 2

我有一些问题.

它来自".listen()"函数.这是马车.

删除.listen(),它会工作.