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")