I am attempting to set up two renderers on separate div containers. Each renderer should have its own OrbitControls to update the camera associated with it. However, the camera is shared between the two renderers.
The objective is to synchronize the camera for OrbitControl so that both containers display the same camera view and render between the two render loops.
I have noticed that the overall rotation can be shared automatically. Yet, there seems to be a strange behavior when panning. You can see the issue in this video:
Below is the minimum reproducible code:
<!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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
</head>
<body>
<div id="rend1" style="height: 400px; width: 400px;"></div>
<div id="rend2" style="height: 400px; width: 400px;"></div>
<script type="module">
import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="058e848e8e9fa0a0bea1bca1bca1bca0">[email protected]</a>'s/controls/OrbitControls.js';
const rend1 = document.getElementById("rend1")
const rend2 = document.getElementById("rend2")
const camera = new THREE.PerspectiveCamera(40, 1, 0.01, 1000);
camera.position.copy(new THREE.Vector3(0, 1, 2));
camera.lookAt(new THREE.Vector3(0, 0, 0));
const r1 = new THREE.WebGLRenderer({
antialias: true,
preserveDrawingBuffer: true,
precision: "highp",
alpha: true,
});
r1.setPixelRatio(window.devicePixelRatio);
const s1 = new THREE.Scene();
rend1.append(r1.domElement);
const c1 = new OrbitControls(camera, r1.domElement)
s1.add(new THREE.AxesHelper(1));
s1.add(camera);
const g1 = new THREE.BoxGeometry( 0.5, 0.5, 0.5 );
const m1 = new THREE.MeshBasicMaterial( {color: 0x0080ff} );
const cube1 = new THREE.Mesh(g1, m1);
s1.add(cube1)
const r2 = new THREE.WebGLRenderer({
antialias: true,
preserveDrawingBuffer: true,
precision: "highp",
alpha: true,
});
r2.setPixelRatio(window.devicePixelRatio);
const s2 = new THREE.Scene();
rend2.append(r2.domElement);
const c2 = new OrbitControls(camera, r2.domElement)
s2.add(new THREE.AxesHelper(1));
s2.add(camera);
const g2 = new THREE.BoxGeometry( 0.5, 0.5, 0.5 );
const m2 = new THREE.MeshBasicMaterial( {color: 0x0080ff} );
const cube2 = new THREE.Mesh(g2, m2);
s2.add(cube2)
const render1 = () => {
r1.setSize(400, 400);
c1.update();
r1.render(s1, camera);
window.requestAnimationFrame(() => render1());
};
const render2 = () => {
r2.setSize(400, 400);
c2.update();
r2.render(s2, camera);
window.requestAnimationFrame(() => render2());
};
render1 ();
render2 ();
</script>
</body>
</html>
What could be causing this issue and what steps can be taken to achieve the desired behavior?
Thank you!