Q:

Use one OrbitControls with two cameras in ThreeJS?

I have two canvases on a page. I would like to have one OrbitControls that controls the cameras on each canvas. If the user zooms on canvas1, I would like canvas2 to zoom as well. How can I go about this?

A:

You can create two instances of orbit controls and move the other camera when you detect that the first has moved in the first scene.
// 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();

} );

Here's an example implementation: https://jsfiddle.net/62x8c139/.
In this case both cameras will be positioned in the exact same spot in both scenes.
Hope that helps!

