时间戳

首页 > 解决方案 > 在 ThreeJS 中使用一个 OrbitControls 和两个摄像头？

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

问题描述

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

标签： javascriptthree.js

解决方案

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

// 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/ 。

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

希望有帮助！

推荐阅读