three.js - 每个视口的 OrbitControls 和 TransformControls

Question

我有一个场景分成 4 个视口，有 2 个 PerspectiveCamera 和 2 个 OrthographicCamera。

现场示例：http ://stemkoski.github.io/Three.js/Viewports-Quad.html

当我将 OrbitControls 用于第一台相机时，我必须分配 dom 元素，它是整个画布场景而不是特定视图。TransformControls 也是如此。

如何在每个相机视口中使用它们？

Answer 1

您可以为除同一个 DomElement 之外的每个视口创建 OrbitControls 实例，因此：

controls.push(new THREE.OrbitControls( views[0].camera, renderer.domElement ));
controls.push(new THREE.OrbitControls( views[1].camera, renderer.domElement ));
controls.push(new THREE.OrbitControls( views[2].camera, renderer.domElement ));

只需添加一个事件侦听器就足够了：

controls[0].addEventListener( 'change', draw );

但是我发现这个解决方案很慢，我仍在寻找更好的选择。