在 ThreeJS 中使用一个 OrbitControls 和两个摄像头？答案

【问题标题】：Use one OrbitControls with two cameras in ThreeJS?在 ThreeJS 中使用一个 OrbitControls 和两个摄像头？
【发布时间】：2019-03-04 05:36:33
【问题描述】：

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

【问题讨论】：

标签： javascript three.js

【解决方案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/。

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

希望有帮助！

【讨论】：