javascript - 如何在多个对象上使用 Three.js OrbitControl

Question

所以我有轨道控制工作，但页面上有 3 个对象。当它控制一个时，它就控制了所有的人。此外，平移/缩放对 OrthographicCamera 根本不起作用。

我为 OrbitControls 的每个实例分配了自己的变量，因此它不是全局变量。

controlsObjOne = new THREE.OrbitControls(cameraObjOne);
controlsObjOne.addEventListener('change', renderObjOne);

我对其他模型使用 ObjTwo、Three 等。除轨道外，一切都以这种方式工作(相机、灯光、渲染等)。这个库是否有可能，或者是否有另一个我没有见过的可以处理多个对象的库？

Answer 1

原因是默认情况下，OrbitControls 将鼠标/触摸输入的 eventListeners 附加到文档。可以传递一个 domElement 作为第二个参数。然后所有 eventListeners 将绑定(bind)到该元素(例如渲染器 Canvas domElement)。但这将极大地限制导航的可能性，因为 mousemove 只有在鼠标位于 Canvas 区域时才会被注册。

您想要的是渲染器 Canvas 上的 mousedown 事件监听器和文档上的 mousemove，以便在按下鼠标后自由移动鼠标。

我创建了一个带有第三个参数的修改版本来移交您的 Canvas 元素:https://gist.github.com/mrflix/8351020