Added (wip) arraycamera example.

mrdoob · Jun 3, 2017 · ff53fe2 · ff53fe2
1 parent a7d8010
commit ff53fe2
Show file tree

Hide file tree

Showing 2 changed files with 117 additions and 0 deletions.
diff --git a/examples/files.js b/examples/files.js
@@ -6,6 +6,7 @@ var files = {
 		"webgl_animation_skinning_blending",
 		"webgl_animation_skinning_morph",
 		"webgl_camera",
+		"webgl_camera_array",
 		"webgl_camera_cinematic",
 		"webgl_camera_logarithmicdepthbuffer",
 		"webgl_clipping",

diff --git a/examples/webgl_camera_array.html b/examples/webgl_camera_array.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js webgl - arraycamera</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<style>
+			body {
+				margin: 0px;
+				background-color: #000000;
+				overflow: hidden;
+			}
+		</style>
+	</head>
+	<body>
+
+		<script src="../build/three.js"></script>
+
+		<script>
+
+			var camera, scene, renderer;
+			var mesh;
+
+			init();
+			animate();
+
+			function init() {
+
+				var AMOUNT = 6;
+				var SIZE = 1 / AMOUNT;
+				var ASPECT_RATIO = window.innerWidth / window.innerHeight;
+
+				var cameras = [];
+
+				for ( var y = 0; y < AMOUNT; y ++ ) {
+
+					for ( var x = 0; x < AMOUNT; x ++ ) {
+
+						var xx = x / AMOUNT;
+						var yy = 1 - ( ( y + 1 ) / AMOUNT ); // TODO Make this saner in WebGLRenderer?
+
+						var subcamera = new THREE.PerspectiveCamera( 40, ASPECT_RATIO, 0.1, 10 );
+						subcamera.bounds = new THREE.Vector4( xx, yy, SIZE, SIZE );
+						subcamera.position.z = 3;
+						subcamera.updateMatrixWorld();
+						cameras.push( subcamera );
+
+					}
+
+				}
+
+				camera = new THREE.ArrayCamera( cameras );
+				camera.position.z = 3;
+
+				scene = new THREE.Scene();
+
+				scene.add( new THREE.AmbientLight( 0x222244 ) );
+
+				var light = new THREE.DirectionalLight();
+				light.position.set( 0.5, 0.5, 1 );
+				light.castShadow = true;
+				light.shadow.camera.zoom = 4; // tighter shadow map
+				scene.add( light );
+
+				var geometry = new THREE.PlaneBufferGeometry( 100, 100 );
+				var material = new THREE.MeshPhongMaterial( { color: 0x000066 } );
+
+				var background = new THREE.Mesh( geometry, material );
+				background.receiveShadow = true;
+				background.position.set( 0, 0, - 1 );
+				scene.add( background );
+
+				var geometry = new THREE.CylinderBufferGeometry( 0.5, 0.5, 1, 32 );
+				var material = new THREE.MeshPhongMaterial( { color: 0xff0000 } );
+
+				mesh = new THREE.Mesh( geometry, material );
+				mesh.castShadow = true;
+				mesh.receiveShadow = true;
+				scene.add( mesh );
+
+				renderer = new THREE.WebGLRenderer();
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.shadowMap.enabled = true;
+				document.body.appendChild( renderer.domElement );
+
+				//
+
+				window.addEventListener( 'resize', onWindowResize, false );
+
+			}
+
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+			}
+
+			function animate() {
+
+				mesh.rotation.x += 0.005;
+				mesh.rotation.z += 0.01;
+
+				renderer.render( scene, camera );
+
+				requestAnimationFrame( animate );
+
+			}
+
+		</script>
+
+	</body>
+</html>