Three.js: renderer not working with ArrayCamera - three.js

Question

I have following in html:
<script type="module">
import * as THREE from "https://cdn.jsdelivr.net/npm/three#0.121.1/build/three.module.js";
import { OrbitControls } from "https://cdn.jsdelivr.net/npm/three#0.121.1/examples/jsm/controls/OrbitControls.js";
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const scene = new THREE.Scene();
const cameraR = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
const cameraL = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );
const geometry = new THREE.BoxBufferGeometry(1, 1, 1);
const material = new THREE.MeshNormalMaterial();
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
cameraR.position.x = 0.5;
cameraR.position.z = 5;
cameraL.position.x = -0.5;
cameraL.position.z = 5;
var cameras = [];
cameras.push(cameraL)
cameras.push(cameraR)
var cameraVR = new THREE.ArrayCamera( cameras );
cameraVR.position.set( 0, 0, 5 );
const controls = new OrbitControls(cameraVR,
renderer.domElement);
controls.update();
(function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
controls.update();
renderer.render(scene, cameraVR);
})();
It gives me error:
What am I missing in this code?
Edit: Edited earlier code as camera assigned to controls was wrong earlier. But issue still persists.

Answer 1

Your code fails since you are missing to add a viewport definition for each sub camera. The documentation states:
An instance of ArrayCamera always has an array of sub cameras. It's mandatory to define for each sub camera the viewport property which determines the part of the viewport that is rendered with this camera.
I've updated your code accordingly:
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const scene = new THREE.Scene();
const cameraR = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
cameraR.viewport = new THREE.Vector4( window.innerWidth / 2, 0, window.innerWidth / 2, window.innerHeight );
const cameraL = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
cameraL.viewport = new THREE.Vector4( 0, 0, window.innerWidth / 2, window.innerHeight );
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);
const geometry = new THREE.BoxBufferGeometry(1, 1, 1);
const material = new THREE.MeshNormalMaterial();
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
cameraR.position.x = 0.5;
cameraR.position.z = 5;
cameraR.lookAt( 0, 0, 0 );
cameraL.position.x = -0.5;
cameraL.position.z = 5;
cameraL.lookAt( 0, 0, 0 );
var cameras = [];
cameras.push(cameraL)
cameras.push(cameraR)
var cameraVR = new THREE.ArrayCamera(cameras);
cameraVR.position.set(0, 0, 5);
(function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, cameraVR);
})();
body {
margin: 0;
}
<script src="https://cdn.jsdelivr.net/npm/three#0.121/build/three.js"></script>
The official array camera demo webgl_camera_array also demonstrates the usage of the class.