Updated some examples to the new camera setup.

Got stuck on the PathCamera/PathControls one. Maybe it's time to rewrite this...

examples/canvas_materials_depth.html

@@ -26,7 +26,7 @@
 
 			var camera, scene, renderer;
 
-			var cube, plane;
+			var cube, plane, target = new THREE.Vector3();
 
 			var targetRotation = 0;
 			var targetRotationOnMouseDown = 0;
@@ -61,11 +61,10 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.Camera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
+				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
 				camera.position.x = 1000;
 				camera.position.y = 1000;
 				camera.position.z = 1000;
-				camera.useTarget = true;
 
 				scene = new THREE.Scene();
 
@@ -208,12 +207,14 @@
 				if ( pitchUp ) camera.rotation.x += 0.01; // camera.rotateX( 1 );
 				if ( pitchDown ) camera.rotation.x -= 0.01; // camera.rotateX( - 1 );
 
-				if ( yawLeft ) camera.target.position.x -= 10; // camera.rotation.y += 0.01; // camera.rotateY( 1 );
-				if ( yawRight ) camera.target.position.x += 10; // camera.rotation.y -= 0.01; // camera.rotateY( - 1 );
+				if ( yawLeft ) target.x -= 10; // camera.rotation.y += 0.01; // camera.rotateY( 1 );
+				if ( yawRight ) target.x += 10; // camera.rotation.y -= 0.01; // camera.rotateY( - 1 );
 
 				if ( rollLeft ) camera.rotation.z += 0.01; // camera.rotateZ( 1 );
 				if ( rollRight ) camera.rotation.z -= 0.01; // camera.rotateZ( - 1 );
 
+				camera.lookAt( target );
+
 				debugContext.clearRect( - 256, - 256, 512, 512 );
 
 				debugContext.beginPath();
@@ -227,9 +228,9 @@
 				// camera
 
 				debugContext.moveTo( camera.position.x * 0.1, camera.position.z * 0.1 );
-				debugContext.lineTo( camera.target.position.x * 0.1, camera.target.position.z * 0.1 );
+				debugContext.lineTo( target.x * 0.1, target.z * 0.1 );
 				debugContext.rect( camera.position.x * 0.1 - 5, camera.position.z * 0.1 - 5, 10, 10 );
-				debugContext.rect( camera.target.position.x * 0.1 - 5, camera.target.position.z * 0.1 - 5, 10, 10 );
+				debugContext.rect( target.x * 0.1 - 5, target.z * 0.1 - 5, 10, 10 );
 				debugContext.rect( - 50, - 50, 100, 100 );
 
 				for ( var i = 1; i < scene.objects.length; i++ ) {

examples/canvas_materials_normal.html

@@ -56,7 +56,7 @@
 
 				var container = document.getElementById( 'container' );
 
-				camera = new THREE.Camera( 50, window.innerWidth / window.innerHeight, 1, 2000 );
+				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 2000 );
 				camera.position.z = 1000;
 
 				scene = new THREE.Scene();

examples/canvas_materials_reflection.html

@@ -59,7 +59,7 @@
 
 				var container = document.getElementById( 'container' );
 
-				camera = new THREE.Camera( 65, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera = new THREE.PerspectiveCamera( 65, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.z = 100;
 
 				scene = new THREE.Scene();

examples/canvas_materials_video.html

@@ -61,9 +61,8 @@
 				info.innerHTML = '<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - video demo. playing <a href="http://durian.blender.org/" target="_blank">sintel</a> trailer';
 				container.appendChild(info);
 
-				camera = new THREE.Camera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.z = 1000;
-				camera.useTarget = true;
 
 				scene = new THREE.Scene();
 
@@ -190,11 +189,12 @@
 
 				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
 				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
+				camera.lookAt( scene.origin );
 
 				if ( video.readyState === video.HAVE_ENOUGH_DATA ) {
 
 					imageContext.drawImage( video, 0, 0 );
-					
+
 					if ( texture ) texture.needsUpdate = true;
 					if ( textureReflection ) textureReflection.needsUpdate = true;
 

examples/canvas_particles_floor.html

@@ -44,9 +44,8 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.Camera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.z = 1000;
-				camera.useTarget = true;
 
 				scene = new THREE.Scene();
 
@@ -135,6 +134,7 @@
 
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
+				camera.lookAt( scene.origin );
 
 				renderer.render( scene, camera );
 

examples/canvas_particles_random.html

@@ -40,9 +40,8 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.Camera( 75, window.innerWidth / window.innerHeight, 1, 3000 );
+				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 3000 );
 				camera.position.z = 1000;
-				camera.useTarget = true;
 
 				scene = new THREE.Scene();
 
@@ -128,6 +127,7 @@
 
 				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
 				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
+				camera.lookAt( scene.origin );
 
 				group.rotation.x += 0.01;
 				group.rotation.y += 0.02;

examples/canvas_particles_shapes.html

@@ -62,10 +62,10 @@
 				info.style.top = '10px';
 				info.style.width = '100%';
 				info.style.textAlign = 'center';
-				info.innerHTML = 'Three.js with Love. Simple Particle Systems with Shapes by <a href="http://www.lab4games.net/zz85/blog">zz85</a><br/>Move your mouse. Click to pause/resume.';
+				info.innerHTML = 'Three.js with Love. Simple Particle Systems with Shapes by <a href="http://www.lab4games.net/zz85/blog">zz85</a><br>Move your mouse.';
 				container.appendChild( info );
 
-				camera = new THREE.Camera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.y = 150;
 				camera.position.z = 700;
 
@@ -73,17 +73,16 @@
 
 				// Get text from hash
 
-				var theText = "THREE.JS";
-
+				var string = "THREE.JS";
 				var hash = document.location.hash.substr( 1 );
 
 				if ( hash.length !== 0 ) {
 
-					theText = hash;
+					string = hash;
 
 				}
 
-				var text3d = new THREE.TextGeometry( theText, {
+				var text3d = new THREE.TextGeometry( string, {
 
 					size: 80,
 					height: 20,
@@ -95,35 +94,36 @@
 				text3d.computeBoundingBox();
 				var centerOffset = -0.5 * ( text3d.boundingBox.x[ 1 ] - text3d.boundingBox.x[ 0 ] );
 
-                var textMaterial = new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, wireframe: false } );
-                
+				var textMaterial = new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, wireframe: false } );
+
 				text = new THREE.Mesh( text3d, textMaterial );
+
 				// Potentially, we can extract the vertices or faces of the text to generate particles too.
 				// Geo > Vertices > Position
-				
-                text.doubleSided = false;
 
-                text.position.x = centerOffset;
-                text.position.y = 100;
-                text.position.z = 0;
+				text.doubleSided = false;
 
-                text.rotation.x = 0;
-                text.rotation.y = Math.PI * 2;
+				text.position.x = centerOffset;
+				text.position.y = 100;
+				text.position.z = 0;
+
+				text.rotation.x = 0;
+				text.rotation.y = Math.PI * 2;
 				text.overdraw = true;
 
 				parent = new THREE.Object3D();
-                parent.add( text );
+				parent.add( text );
+
 
-				
 				particleCloud = new THREE.Object3D(); // Just a group
 				particleCloud.y = 800;
 				parent.add( particleCloud );
-				
+
 				scene.add( parent );
-				
-				
+
+
 				// Create Particle Systems
-				
+
 				// Heart
 
 				var x = 0, y = 0;
@@ -137,20 +137,20 @@
 				heartShape.bezierCurveTo( x + 60, y + 77, x + 80, y + 55, x + 80, y + 35 );
 				heartShape.bezierCurveTo( x + 80, y + 35, x + 80, y, x + 50, y );
 				heartShape.bezierCurveTo( x + 35, y, x + 25, y + 25, x + 25, y + 25 );
-				
-				var circleLines = function 	( context ) {
-					context.lineWidth = 0.05; //0.05
+
+				var circleLines = function ( context ) {
+					context.lineWidth = 0.05;
 					context.beginPath();
 					context.arc( 0, 0, 1, 0, Math.PI*2, true );
 					context.closePath();
 					context.stroke();
-					
+
 					context.globalAlpha = 0.2;
 					context.fill();
 				}
-				
+
 				var hue = 0;
-				
+
 				var hearts = function ( context ) {
 					context.globalAlpha = 0.5;
 					var x = 0, y = 0;
@@ -168,16 +168,16 @@
 					context.lineWidth = 0.5; //0.05
 					context.stroke();
 				}
-				
+
 				var setTargetParticle = function() {
-					
+
 					//hearts circleLines
 					var material = new THREE.ParticleCanvasMaterial( {  program: hearts, blending:THREE.AdditiveBlending } );
-					
+
 					material.color.setHSV(hue, 0.5, 1); 
 					hue += 0.001;
 					if (hue>1) hue-=1;
-					
+
 					particle = new THREE.Particle( material );
 
 					particle.scale.x = particle.scale.y = Math.random() * 20 +20;
@@ -185,45 +185,43 @@
 
 					return particle;
 				};
-				
+
 				var onParticleCreated = function(p) {
 					var position = p.position;
 					p.target.position = position;	
 				};
-			
+
 				var onParticleDead = function(particle) {
 					particle.target.visible = false;
 					particleCloud.remove(particle.target); 
 				};
-				
-				
+
 				sparksEmitter = new SPARKS.Emitter(new SPARKS.SteadyCounter(160));
 
-				emitterpos = new THREE.Vector3(0,0,0);
-				
+				emitterpos = new THREE.Vector3();
+
 				sparksEmitter.addInitializer(new SPARKS.Position( new SPARKS.PointZone( emitterpos ) ) );
 				sparksEmitter.addInitializer(new SPARKS.Lifetime(0,2));
 				sparksEmitter.addInitializer(new SPARKS.Target(null, setTargetParticle));
-				
-				
+
 				sparksEmitter.addInitializer(new SPARKS.Velocity(new SPARKS.PointZone(new THREE.Vector3(0,-50,10))));
+
 				// TOTRY Set velocity to move away from centroid
-				
+
 				sparksEmitter.addAction(new SPARKS.Age());
 				//sparksEmitter.addAction(new SPARKS.Accelerate(0.2));
 				sparksEmitter.addAction(new SPARKS.Move()); 
 				sparksEmitter.addAction(new SPARKS.RandomDrift(50,50,2000));
-				
-				
+
 				sparksEmitter.addCallback("created", onParticleCreated);
 				sparksEmitter.addCallback("dead", onParticleDead);
 				sparksEmitter.start();
-				
+
 				// End Particles
-				
+
 
 				renderer = new THREE.CanvasRenderer();
-                renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				container.appendChild( renderer.domElement );
 
@@ -239,9 +237,8 @@
 			}
 
 			//
-			
+
 			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
-			
 
 			function onDocumentMouseDown( event ) {
 
@@ -249,7 +246,7 @@
 
 				mouseXOnMouseDown = event.clientX - windowHalfX;
 				targetRotationOnMouseDown = targetRotation;
-				
+
 				if (sparksEmitter.isRunning()) {
 					sparksEmitter.stop();
 				} else {
@@ -302,26 +299,24 @@
 				stats.update();
 
 			}
-			
-			
 
 			function render() {
+
 				timeOnShapePath += 0.0337;
+
 				if (timeOnShapePath > 1) timeOnShapePath -= 1;
-				
+
 				// TODO Create a PointOnShape Action/Zone in the particle engine
-				var pointOnShape = heartShape.getPointAt(timeOnShapePath);
-				
+				var pointOnShape = heartShape.getPointAt( timeOnShapePath );
+
 				emitterpos.x = pointOnShape.x * 5 - 100;
 				emitterpos.y = -pointOnShape.y * 5 + 400;
-				
+
 				// Pretty cool effect if you enable this
 				//particleCloud.rotation.y += 0.05;
 
 				parent.rotation.y += ( targetRotation - parent.rotation.y ) * 0.05;
 				renderer.render( scene, camera );
-				
-				
 
 			}
 

examples/canvas_particles_sprites.html

@@ -41,9 +41,8 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.Camera( 75, window.innerWidth / window.innerHeight, 1, 5000 );
+				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 5000 );
 				camera.position.z = 1000;
-				camera.useTarget = true;
 
 				scene = new THREE.Scene();
 
@@ -174,6 +173,7 @@
 
 				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
 				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
+				camera.lookAt( scene.origin );
 
 				renderer.render( scene, camera );
 

examples/canvas_particles_waves.html

@@ -44,9 +44,8 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.Camera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.z = 1000;
-				camera.useTarget = true;
 
 				scene = new THREE.Scene();
 
@@ -146,6 +145,7 @@
 
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
+				camera.lookAt( scene.origin );
 
 				var i = 0;
 

examples/canvas_performance.html

@@ -45,11 +45,9 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.Camera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
-				camera.position.z = 1000;
+				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.y = 1000;
 				camera.position.z = 1000;
-				camera.useTarget = true;
 
 				scene = new THREE.Scene();
 
@@ -130,6 +128,8 @@
 
 			function render() {
 
+				camera.lookAt( scene.origin );
+
 				renderer.render( scene, camera );
 
 			}

examples/canvas_sandbox.html

@@ -46,6 +46,8 @@
 			pitchUp = false, pitchDown = false,
 			rollLeft = false, rollRight = false;
 
+			var target = new THREE.Vector3( 0, 150, 0 );
+
 			var debugContext;
 
 			init();
@@ -56,11 +58,9 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.Camera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.y = 150;
 				camera.position.z = 400;
-				camera.useTarget = true;
-				camera.target.position.y = 150;
 
 				scene = new THREE.Scene();
 
@@ -218,12 +218,14 @@
 				if ( pitchUp ) camera.rotation.x += 0.01;
 				if ( pitchDown ) camera.rotation.x -= 0.01;
 
-				if ( yawLeft ) camera.target.position.x -= 5;
-				if ( yawRight ) camera.target.position.x += 5;
+				if ( yawLeft ) target.x -= 5;
+				if ( yawRight ) target.x += 5;
 
 				if ( rollLeft ) camera.rotation.z += 0.01;
 				if ( rollRight ) camera.rotation.z -= 0.01;
 
+				camera.lookAt( target );
+
 				debugContext.clearRect( -256, -256, 512, 512 );
 
 				debugContext.beginPath();
@@ -237,9 +239,9 @@
 				// camera
 
 				debugContext.moveTo( camera.position.x * 0.1, camera.position.z * 0.1 );
-				debugContext.lineTo( camera.target.position.x * 0.1, camera.target.position.z * 0.1 );
+				debugContext.lineTo( target.x * 0.1, target.z * 0.1 );
 				debugContext.rect( camera.position.x * 0.1 - 5, camera.position.z * 0.1 - 5, 10, 10 );
-				debugContext.rect( camera.target.position.x * 0.1 - 5, camera.target.position.z * 0.1 - 5, 10, 10 );
+				debugContext.rect( target.x * 0.1 - 5, target.z * 0.1 - 5, 10, 10 );
 				debugContext.rect( - 50, - 50, 100, 100 );
 
 				for ( var i = 0, l = objects.length; i < l; i++ ) {

examples/misc_camera_path.html

@@ -39,48 +39,43 @@
 
 		<script src="../build/Three.js"></script>
 
+		<script src="js/RequestAnimationFrame.js"></script>
 		<script src="js/Stats.js"></script>
-		<script src="js/Tween.js"></script>
 
-		<script>
 
-			var statsEnabled = true;
+		<script>
 
 			var container, stats;
 
-			var camera, scene, renderer;
+			var camera, controls, scene, renderer;
 
 			var cross;
 
 			init();
+			animate();
 
 			function init() {
 
-				// scene and camera
-
 				scene = new THREE.Scene();
 				scene.fog = new THREE.FogExp2( 0xffffff, 0.002 );
 
-				var waypoints = [
-					[ -500, 0, 0 ],
-					[ 0, 200, 0 ],
-					[ 500, 0, 0 ]
-
-				];
-
-				camera = new THREE.PathCamera( {
+				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
 
-					fov: 40, aspect: window.innerWidth / window.innerHeight, near: 1, far: 1000,
-					waypoints: waypoints, duration: 28,
-					useConstantSpeed: true, resamplingCoef: 1,
-					createDebugPath: true, createDebugDummy: true,
-					lookSpeed: 0.0006, lookVertical: true, lookHorizontal: true,
-					verticalAngleMap:   { srcRange: [ 0, 2 * Math.PI ], dstRange: [ 1.1, 3.8 ] },
-					horizontalAngleMap: { srcRange: [ 0, 2 * Math.PI ], dstRange: [ 0.3, Math.PI - 0.3 ] }
-
-				} );
-
-				camera.lon = 180;
+				/*
+				controls = new THREE.PathControls( camera );
+				controls.waypoints = [ [ -500, 0, 0 ], [ 0, 200, 0 ], [ 500, 0, 0 ] ];
+				controls.duration = 28
+				controls.useConstantSpeed = true;
+				controls.resamplingCoef = 1;
+				controls.createDebugPath = true;
+				controls.createDebugDummy = true;
+				controls.lookSpeed = 0.0006;
+				controls.lookVertical = true;
+				controls.lookHorizontal = true;
+				controls.verticalAngleMap = { srcRange: [ 0, 2 * Math.PI ], dstRange: [ 1.1, 3.8 ] };
+				controls.horizontalAngleMap = { srcRange: [ 0, 2 * Math.PI ], dstRange: [ 0.3, Math.PI - 0.3 ] };
+				controls.lon = 180;
+				*/
 
 				// world
 
@@ -93,12 +88,14 @@
 
 				var material =  new THREE.MeshLambertMaterial( { color:0xffffff } );
 
-				for( var i = 0; i < 500; i++ ) {
+				for ( var i = 0; i < 500; i ++ ) {
 
 					var mesh = new THREE.Mesh( cube, material );
-					mesh.position.set(( Math.random() - 0.5 ) * 1000,
-									  ( Math.random() - 0.5 ) * 1000,
-									  ( Math.random() - 0.5 ) * 1000 );
+					mesh.position.set(
+						( Math.random() - 0.5 ) * 1000,
+						( Math.random() - 0.5 ) * 1000,
+						( Math.random() - 0.5 ) * 1000
+					);
 
 					mesh.updateMatrix();
 					mesh.matrixAutoUpdate = false;
@@ -106,8 +103,6 @@
 
 				}
 
-				scene.add( camera.animationParent );
-
 				// lights
 
 				light = new THREE.DirectionalLight( 0xffffff );
@@ -131,39 +126,27 @@
 				container = document.getElementById( 'container' );
 				container.appendChild( renderer.domElement );
 
-				if ( statsEnabled ) {
+				stats = new Stats();
+				stats.domElement.style.position = 'absolute';
+				stats.domElement.style.top = '0px';
+				stats.domElement.style.zIndex = 100;
+				container.appendChild( stats.domElement );
 
-					stats = new Stats();
-					stats.domElement.style.position = 'absolute';
-					stats.domElement.style.top = '0px';
-					stats.domElement.style.zIndex = 100;
-					container.appendChild( stats.domElement );
+			}
 
-				}
+			function animate() {
 
-				setInterval( loop, 1000 / 60 );
+				requestAnimationFrame( animate );
 
-				camera.animation.play( true, 0 );
+				render();
+				stats.update();
 
 			}
 
-
-			function loop() {
-
-				THREE.AnimationHandler.update( 1000/60 );
-
-				/*
-				cross.matrix.copy( camera.matrix );
-				cross.matrix.n14 = 0;
-				cross.matrix.n24 = 0;
-				cross.matrix.n34 = -200;
-				cross.matrixWorldNeedsUpdate = true;
-				*/
+			function render() {
 
 				renderer.render( scene, camera );
 
-				if ( statsEnabled ) stats.update();
-
 			}