javascript - 在 ThreeJS 中使用一个 OrbitControls 和两个摄像头？

Question

我在一个页面上有两个 Canvas 。我想要一个 OrbitControls 来控制每个 Canvas 上的相机。如果用户缩放 canvas1，我希望 canvas2 也缩放。我该怎么办？

Answer 1

您可以创建两个轨道控件实例，并在检测到第一个摄像机在第一个场景中移动时移动另一个摄像机。

// initialize two scenes, renderers, and cameras
const controls1 = new THREE.OrbitControls( camera1, renderer1.domElement );
const controls2 = new THREE.OrbitControls( camera2, renderer2.domElement );

controls1.addEventListener( 'change', () => {

    camera2.position.copy( camera1.position );
    camera2.rotation.copy( camera1.rotation );
    render();

} );
controls1.addEventListener( 'change', () => {

    camera1.position.copy( camera2.position );
    camera1.rotation.copy( camera2.rotation );
    render();

} );

这是一个示例实现:https://jsfiddle.net/62x8c139/ .

在这种情况下，两个摄像机将位于两个场景中完全相同的位置。

希望有帮助!