JavaScript
var views, scene, renderer;
var mouseX = 0, mouseY = 0;
var windowWidth, windowHeight;
var views = [
{
left: 0,
top: 0,
width: 0.5,
height: 1.0,
background: new THREE.Color( 0.5, 0.5, 0.7 ),
eye: [ 0, 300, 1800 ],
up: [ 0, 1, 0 ],
fov: 30,
updateCamera: function ( camera, scene, mouseX, mouseY ) {
camera.position.x += mouseX * 0.05;
camera.position.x = Math.max( Math.min( camera.position.x, 2000 ), -2000 );
camera.lookAt( scene.position );
}
},
{
left: 0.5,
top: 0.5,
width: 0.5,
height: 0.5,
background: new THREE.Color( 0.7, 0.5, 0.5 ),
eye: [ 0, 1800, 0 ],
up: [ 0, 0, 1 ],
fov: 45,
updateCamera: function ( camera, scene, mouseX, mouseY ) {
camera.position.x -= mouseX * 0.05;
camera.position.x = Math.max( Math.min( camera.position.x, 2000 ), -2000 );
camera.lookAt( camera.position.clone().setY( 0 ) );
}
},
{
left: 0.5,
top: 0,
width: 0.5,
height: 0.5,
background: new THREE.Color( 0.5, 0.7, 0.7 ),
eye: [ 1400, 800, 1400 ],
up: [ 0, 1, 0 ],
fov: 60,
updateCamera: function ( camera, scene, mouseX, mouseY ) {
camera.position.y -= mouseX * 0.05;
camera.position.y = Math.max( Math.min( camera.position.y, 1600 ), -1600 );
camera.lookAt( scene.position );
}
}
];
init();
animate();
function init() {
for (var ii = 0; ii < views.length; ++ii ) {
var view = views[ii];
var camera = new THREE.PerspectiveCamera( view.fov, window.innerWidth / window.innerHeight, 1, 10000 );
camera.layers.set( ii );
camera.position.fromArray( view.eye );
camera.up.fromArray( view.up );
view.camera = camera;
}
scene = new THREE.Scene();
var geometry = new THREE.BoxBufferGeometry( 100, 100, 100 );
var material1 = new THREE.MeshBasicMaterial( { color: 0xff0000 } ); // red
var material2 = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); // green
var material3 = new THREE.MeshBasicMaterial( { color: 0x0000ff } ); // blue
var mesh1 = new THREE.Mesh( geometry, material1 ); // red...