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 );
}