How to synchronize the position of two scenes?

I want to synchronize the camera rotation or synchronize the zoom. For example, if I rotate or drag scene 1, scene 2 can change synchronously; turn scene 2, scene 1 can keep synchronized. What should I add?



index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
    <script src="./main/sync_display.js" type="module"></script>
    <div class="canvas">
        <h1>canvas_1</h1>
        <canvas id ="canvas_1"/>
    </div>
    <div class="canvas">
        <h1>canvas_2</h1>
        <canvas id ="canvas_2"/>
    </div>
</body>
<style>
.canvas {
    width: 40%;
    margin: 5px;
    float: left;
    display: float;
    background-color: blue;
}
#canvas_1,#canvas_2 {
    width: 100%;
    aspect-ratio: 1;
    background-color: red;
}
</style>
</html>

sync_display.js

import * as THREE from 'three'
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'

function draw(canvas_id){
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera( 75, 1, 0.1, 1000 );
    const canvas = document.querySelector('#'+canvas_id);
    const renderer = new THREE.WebGL1Renderer({canvas});
    renderer.setSize( canvas.clientWidth, canvas.clientHeight ,false);
    const geometry = new THREE.PlaneGeometry( 1, 1);
    const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 ,side: THREE.DoubleSide} );
    const cube = new THREE.Mesh( geometry, material );
    const cube2 = new THREE.Mesh( geometry, material );
    cube2.position.x = 2;
    scene.add( cube );
    scene.add( cube2 );
    camera.position.z = 5;
    const controls = new OrbitControls(camera, renderer.domElement);
    function animate() {

        controls.update()
        renderer.render( scene, camera );

        requestAnimationFrame( animate );
    };
    animate();

    window.addEventListener('resize',()=>{
        renderer.setSize( canvas.clientWidth, canvas.clientHeight, false);
    })
    
}

draw("canvas_1")

draw("canvas_2")

maybe something like

controls.addEventListener('change', function() {
 camera2.postion.copy(camera1.position);
 camera2.rotation.copy(camera1.rotation);
function syncChange(controls_A, controls_B) {
    controls_A.addEventListener('change', function(){
        controls_B.target.copy(controls_A.target);
        controls_B.object.position.copy(controls_A.object.position)
        controls_B.object.zoom = controls_A.object.zoom;
        controls_B.object.quaternion.copy(controls_A.object.quaternion)
        console.log("A -> B");
    })
    controls_B.addEventListener('change', function(){
        controls_A.target.copy(controls_B.target);
        controls_A.object.position.copy(controls_B.object.position)
        controls_A.object.zoom = controls_B.object.zoom;
        controls_A.object.quaternion.copy(controls_B.object.quaternion)
        console.log("B -> A");
    })
}