使用dat.gui滑块触发动态观察控件

Question

我正在建立一个折纸模拟器，我想能够‘折叠’的论文使用dat.gui滑块。我还想包括轨道控制。

但是，当我单击滑块并随后将鼠标移出dat.gui窗口时，轨道控制已被触发，导致模型跳到不同的方向。

有没有办法防止我在dat.gui窗口中点击时触发轨道控制？

Answer 1

引用the docs

构造函数OrbitControls( object: Camera，domElement : HTMLDOMElement ) object：(必选)需要控制的摄像头。

domElement：(可选)用于事件侦听器的HTML元素。默认情况下，这是整个文档，但是如果你只想让控件处理特定的元素(例如画布)，你可以在这里指定。

换句话说，要限制画布，使它们在单击图形用户界面时不会启用，必须将对画布(renderer.domElement)或容器(包含画布的div )的引用作为第二个参数提供给构造函数。祝你编码愉快！(还有折叠！)

Answer 2

我对您的问题的解决方案是:让dat.GUI“侦听”由OrbitControls (摄影机)控制的值，以便这些值在两个不同的“控制器”(OrderbitControls和dat.GUI)之间同步，如下所示：

let gui = new dat.GUI();
let folder1 = gui.addFolder("Camera Position");
folder1.add(camera.position, "x", -100, 100).listen();
folder1.add(camera.position, "y", -100, 100).listen();
folder1.add(camera.position, "z", -100, 100).listen();

dat.GUI中被跟踪变量上的listen()函数将使这些值保持同步，并缓解您所经历的“跳跃性”。

参考dat.GUI控制器函数文档：dat.gui

Answer 3

OrbitControls有一个"enabled“属性(事实上，我相信所有的控件都有一个"enabled”属性--可能需要检查一下)。所以如果你有

orbitControls =新的THREE.OrbitControls(...)；

..。

//在您的dat.GUI代码块中(或您想要禁用orbitControls的任何位置)

orbitControls.enabled = false；

//这会禁用orbitControls，当您想再次使用orbitControls时，只需这样做

orbitControls.enabled =真；