Question

我正在构建一个折纸模拟器，我希望能够折叠＆＃39;使用dat.gui滑块的纸张。我还希望包括轨道控制。

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

当我点击dat.gui窗口时，是否有办法防止触发轨道控制？

Answer 1

构造   OrbitControls（对象：Camera，domElement：HTMLDOMElement）   对象:(必需）要控制的摄像机。

domElement :(可选）用于事件侦听器的HTML元素。默认情况下，这是整个文档，但是如果您只想让控件在特定元素（例如画布）上工作，则可以在此处指定。

换句话说，要限制OrbitControls以便在单击GUI时不启用它们，您必须提供对画布（renderer.domElement）或容器（包含画布的div）的引用作为第二个构造函数的参数。快乐的编码！（折叠！）

Answer 2

OrbitControls有一个“启用”属性（事实上，我相信所有的控件都有一个“启用”属性 - 可能想检查一下）。所以，如果你有

orbitControls = new THREE.OrbitControls（...）;

...

//在你的dat.GUI代码块中（或者你想要禁用orbitControls的地方）

orbitControls.enabled = false;

//这应该禁用orbitControls，当你想再次使用orbitControls时，就这样做

orbitControls.enabled = true;

Answer 3

我对您的问题的解决方案是：让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

使用dat.gui滑块触发轨道控制

3 个答案: