How to use ArrayCamera

Hello.
I am trying to use ArrayCamera.
The following source code creates three spheres.
But only two are displayed.
What can I do to display all shapes?

		var camera, controls, scene, renderer;

		init();
		animate(); // remove when using next line for animation loop (requestAnimationFrame)

		function init() {

			scene = new THREE.Scene();
			renderer = new THREE.WebGLRenderer();
			renderer.setClearColor(0xeeeeee,1);
			renderer.setPixelRatio( window.devicePixelRatio );
			renderer.setSize( window.innerWidth, window.innerHeight );

			var container = document.getElementById( 'container' );
			container.appendChild( renderer.domElement );

			var scameraL = new THREE.PerspectiveCamera( 50, window.innerWidth/window.innerHeight*0.5, 1, 5000 );
			scameraL.bounds = new THREE.Vector4( 0.0, 0.0, 0.5, 1.0 );
			scameraL.position.z = 100;
			scameraL.matrixAutoUpdate = false;
			scameraL.updateMatrixWorld();

			var scameraR = new THREE.PerspectiveCamera( 50, window.innerWidth/window.innerHeight*0.5, 1, 5000 );
			scameraR.bounds = new THREE.Vector4( 0.5, 0.0, 0.5, 1.0 );
			scameraR.position.z = 100;
			scameraR.matrixAutoUpdate = false;
			scameraR.updateMatrixWorld();
			camera = new THREE.ArrayCamera( [ scameraL, scameraR ] );
			

			var sphereGeometry = new THREE.SphereGeometry( 5, 16, 16 );
			var material1 = new THREE.MeshPhongMaterial( {color: 0xffff00} );

			var mesh1 = new THREE.Mesh( sphereGeometry, material1 );
			mesh1.position.x = 0;
			mesh1.position.y = -5;
			mesh1.position.z = 0;
			mesh1.updateMatrix();
			mesh1.matrixAutoUpdate = false;
			scene.add( mesh1 );

			var mesh2 = new THREE.Mesh( sphereGeometry, material1 );
			mesh2.position.x = 0;
			mesh2.position.y = 5;
			mesh2.position.z = 0;
			mesh2.updateMatrix();
			mesh2.matrixAutoUpdate = false;
			scene.add( mesh2 );

			var mesh3 = new THREE.Mesh( sphereGeometry, material1 );
			mesh3.position.x = 5;
			mesh3.position.y = 0;
			mesh3.position.z = 0;
			mesh3.updateMatrix();
			mesh3.matrixAutoUpdate = false;
			scene.add( mesh3 );
	
			// lights
			var light = new THREE.DirectionalLight( 0xffffff );
			light.position.set( 0, 500, 0 );
			scene.add( light );
			
			var light = new THREE.AmbientLight( 0x222222, 2 );
			scene.add( light );

			window.addEventListener( 'resize', onWindowResize, false );

		}

		function onWindowResize() {

			camera.aspect = window.innerWidth / window.innerHeight;
			camera.updateProjectionMatrix();

			renderer.setSize( window.innerWidth, window.innerHeight );

		}

		function animate() {

			requestAnimationFrame( animate );

			render();

		}

		function render() {
			
			renderer.render( scene, camera );

		}

I’ve updated your code here: https://jsfiddle.net/f2Lommf5/145/

Also use this example as an orientation: https://threejs.org/examples/webgl_camera_array.html

The main problem in your code were wrong position values of the sub cameras. Experiment with the fiddle to get a better understanding of the camera properties.

2 Likes

Thank you.
I’ll give it a try.