Question

我在页面上有两个画布。我想有一个OrbitControls来控制每个画布上的相机。如果用户在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/。

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

希望有帮助！

在ThreeJS中使用带有两个摄像机的一个OrbitControls吗？

1 个答案: