Updated more examples. Got AnaglyphWebGLRenderer and CrosseyedWebGLRenderer working.

CrosseyedRenderer is a hack, camera must have target :S.

build/Three.js

@@ -693,9 +693,9 @@ f;if(e<c.min.z||e>c.max.z)return Number.MAX_VALUE;c.normal.set(0,n,0);break;case
 THREE.CollisionSystem.prototype.raySphere=function(b,c){var e=c.center.clone().subSelf(b.origin);if(e.lengthSq<c.radiusSq)return-1;var f=e.dot(b.direction.clone());if(f<=0)return Number.MAX_VALUE;e=c.radiusSq-(e.lengthSq()-f*f);if(e>=0)return Math.abs(f)-Math.sqrt(e);return Number.MAX_VALUE};THREE.CollisionSystem.__v1=new THREE.Vector3;THREE.CollisionSystem.__v2=new THREE.Vector3;THREE.CollisionSystem.__v3=new THREE.Vector3;THREE.CollisionSystem.__nr=new THREE.Vector3;THREE.CollisionSystem.__m=new THREE.Matrix4;
 THREE.CollisionSystem.__r=new THREE.Ray;THREE.CollisionUtils={};THREE.CollisionUtils.MeshOBB=function(b){b.geometry.computeBoundingBox();var c=b.geometry.boundingBox,e=new THREE.Vector3(c.x[0],c.y[0],c.z[0]),c=new THREE.Vector3(c.x[1],c.y[1],c.z[1]),e=new THREE.BoxCollider(e,c);e.mesh=b;return e};THREE.CollisionUtils.MeshAABB=function(b){var c=THREE.CollisionUtils.MeshOBB(b);c.min.addSelf(b.position);c.max.addSelf(b.position);c.dynamic=!1;return c};
 THREE.CollisionUtils.MeshColliderWBox=function(b){return new THREE.MeshCollider(b,THREE.CollisionUtils.MeshOBB(b))};
-if(THREE.WebGLRenderer)THREE.AnaglyphWebGLRenderer=function(b){THREE.WebGLRenderer.call(this,b);var c=this,e=this.setSize,f=this.render,h=new THREE.Camera,k=new THREE.Camera,m=new THREE.Matrix4,n=new THREE.Matrix4,p,t,w;h.useTarget=k.useTarget=!1;h.matrixAutoUpdate=k.matrixAutoUpdate=!1;var b={minFilter:THREE.LinearFilter,magFilter:THREE.NearestFilter,format:THREE.RGBAFormat},u=new THREE.WebGLRenderTarget(512,512,b),x=new THREE.WebGLRenderTarget(512,512,b),v=new THREE.Camera(53,1,1,1E4);v.position.z=
+if(THREE.WebGLRenderer)THREE.AnaglyphWebGLRenderer=function(b){THREE.WebGLRenderer.call(this,b);var c=this,e=this.setSize,f=this.render,h=new THREE.PerspectiveCamera,k=new THREE.PerspectiveCamera,m=new THREE.Matrix4,n=new THREE.Matrix4,p,t,w;h.matrixAutoUpdate=k.matrixAutoUpdate=!1;var b={minFilter:THREE.LinearFilter,magFilter:THREE.NearestFilter,format:THREE.RGBAFormat},u=new THREE.WebGLRenderTarget(512,512,b),x=new THREE.WebGLRenderTarget(512,512,b),v=new THREE.PerspectiveCamera(53,1,1,1E4);v.position.z=
 2;_material=new THREE.ShaderMaterial({uniforms:{mapLeft:{type:"t",value:0,texture:u},mapRight:{type:"t",value:1,texture:x}},vertexShader:"varying vec2 vUv;\nvoid main() {\nvUv = vec2( uv.x, 1.0 - uv.y );\ngl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n}",fragmentShader:"uniform sampler2D mapLeft;\nuniform sampler2D mapRight;\nvarying vec2 vUv;\nvoid main() {\nvec4 colorL, colorR;\nvec2 uv = vUv;\ncolorL = texture2D( mapLeft, uv );\ncolorR = texture2D( mapRight, uv );\ngl_FragColor = vec4( colorL.g * 0.7 + colorL.b * 0.3, colorR.g, colorR.b, colorL.a + colorR.a ) * 1.1;\n}"});
 var A=new THREE.Scene;A.add(new THREE.Mesh(new THREE.PlaneGeometry(2,2),_material));this.setSize=function(b,f){e.call(c,b,f);u.width=b;u.height=f;x.width=b;x.height=f};this.render=function(b,e){e.update(null,!0);if(p!==e.aspect||t!==e.near||w!==e.fov){p=e.aspect;t=e.near;w=e.fov;var E=e.projectionMatrix.clone(),F=125/30*0.5,D=F*t/125,G=t*Math.tan(w*Math.PI/360),L;m.n14=F;n.n14=-F;F=-G*p+D;L=G*p+D;E.n11=2*t/(L-F);E.n13=(L+F)/(L-F);h.projectionMatrix=E.clone();F=-G*p-D;L=G*p-D;E.n11=2*t/(L-F);E.n13=
 (L+F)/(L-F);k.projectionMatrix=E.clone()}h.matrix=e.matrixWorld.clone().multiplySelf(n);h.update(null,!0);h.position.copy(e.position);h.near=t;h.far=e.far;f.call(c,b,h,u,!0);k.matrix=e.matrixWorld.clone().multiplySelf(m);k.update(null,!0);k.position.copy(e.position);k.near=t;k.far=e.far;f.call(c,b,k,x,!0);f.call(c,A,v)}};
-if(THREE.WebGLRenderer)THREE.CrosseyedWebGLRenderer=function(b){THREE.WebGLRenderer.call(this,b);this.autoClear=!1;var c=this,e=this.setSize,f=this.render,h,k,m=new THREE.Camera;m.useTarget=!0;var n=new THREE.Camera;n.useTarget=!0;c.separation=10;if(b&&b.separation!==void 0)c.separation=b.separation;this.setSize=function(b,f){e.call(c,b,f);h=b/2;k=f};this.render=function(b,e){this.clear();m.fov=e.fov;m.aspect=0.5*e.aspect;m.near=e.near;m.far=e.far;m.updateProjectionMatrix();m.position.copy(e.position);
-m.target.position.copy(e.target.position);m.translateX(c.separation);n.projectionMatrix=m.projectionMatrix;n.position.copy(e.position);n.target.position.copy(e.target.position);n.translateX(-c.separation);this.setViewport(0,0,h,k);f.call(c,b,m);this.setViewport(h,0,h,k);f.call(c,b,n,!1)}};
+if(THREE.WebGLRenderer)THREE.CrosseyedWebGLRenderer=function(b){THREE.WebGLRenderer.call(this,b);this.autoClear=!1;var c=this,e=this.setSize,f=this.render,h,k,m=new THREE.PerspectiveCamera;m.target=new THREE.Vector3(0,0,0);var n=new THREE.PerspectiveCamera;n.target=new THREE.Vector3(0,0,0);c.separation=10;if(b&&b.separation!==void 0)c.separation=b.separation;this.setSize=function(b,f){e.call(c,b,f);h=b/2;k=f};this.render=function(b,e){this.clear();m.fov=e.fov;m.aspect=0.5*e.aspect;m.near=e.near;m.far=
+e.far;m.updateProjectionMatrix();m.position.copy(e.position);m.target.copy(e.target);m.translateX(c.separation);m.lookAt(m.target);n.projectionMatrix=m.projectionMatrix;n.position.copy(e.position);n.target.copy(e.target);n.translateX(-c.separation);n.lookAt(n.target);this.setViewport(0,0,h,k);f.call(c,b,m);this.setViewport(h,0,h,k);f.call(c,b,n,!1)}};

build/custom/ThreeExtras.js

@@ -351,9 +351,9 @@ e;if(b<c.min.z||b>c.max.z)return Number.MAX_VALUE;c.normal.set(0,k,0);break;case
 THREE.CollisionSystem.prototype.raySphere=function(a,c){var b=c.center.clone().subSelf(a.origin);if(b.lengthSq<c.radiusSq)return-1;var e=b.dot(a.direction.clone());if(e<=0)return Number.MAX_VALUE;b=c.radiusSq-(b.lengthSq()-e*e);if(b>=0)return Math.abs(e)-Math.sqrt(b);return Number.MAX_VALUE};THREE.CollisionSystem.__v1=new THREE.Vector3;THREE.CollisionSystem.__v2=new THREE.Vector3;THREE.CollisionSystem.__v3=new THREE.Vector3;THREE.CollisionSystem.__nr=new THREE.Vector3;THREE.CollisionSystem.__m=new THREE.Matrix4;
 THREE.CollisionSystem.__r=new THREE.Ray;THREE.CollisionUtils={};THREE.CollisionUtils.MeshOBB=function(a){a.geometry.computeBoundingBox();var c=a.geometry.boundingBox,b=new THREE.Vector3(c.x[0],c.y[0],c.z[0]),c=new THREE.Vector3(c.x[1],c.y[1],c.z[1]),b=new THREE.BoxCollider(b,c);b.mesh=a;return b};THREE.CollisionUtils.MeshAABB=function(a){var c=THREE.CollisionUtils.MeshOBB(a);c.min.addSelf(a.position);c.max.addSelf(a.position);c.dynamic=!1;return c};
 THREE.CollisionUtils.MeshColliderWBox=function(a){return new THREE.MeshCollider(a,THREE.CollisionUtils.MeshOBB(a))};
-if(THREE.WebGLRenderer)THREE.AnaglyphWebGLRenderer=function(a){THREE.WebGLRenderer.call(this,a);var c=this,b=this.setSize,e=this.render,g=new THREE.Camera,h=new THREE.Camera,f=new THREE.Matrix4,k=new THREE.Matrix4,l,m,n;g.useTarget=h.useTarget=!1;g.matrixAutoUpdate=h.matrixAutoUpdate=!1;var a={minFilter:THREE.LinearFilter,magFilter:THREE.NearestFilter,format:THREE.RGBAFormat},o=new THREE.WebGLRenderTarget(512,512,a),t=new THREE.WebGLRenderTarget(512,512,a),u=new THREE.Camera(53,1,1,1E4);u.position.z=
+if(THREE.WebGLRenderer)THREE.AnaglyphWebGLRenderer=function(a){THREE.WebGLRenderer.call(this,a);var c=this,b=this.setSize,e=this.render,g=new THREE.PerspectiveCamera,h=new THREE.PerspectiveCamera,f=new THREE.Matrix4,k=new THREE.Matrix4,l,m,n;g.matrixAutoUpdate=h.matrixAutoUpdate=!1;var a={minFilter:THREE.LinearFilter,magFilter:THREE.NearestFilter,format:THREE.RGBAFormat},o=new THREE.WebGLRenderTarget(512,512,a),t=new THREE.WebGLRenderTarget(512,512,a),u=new THREE.PerspectiveCamera(53,1,1,1E4);u.position.z=
 2;_material=new THREE.ShaderMaterial({uniforms:{mapLeft:{type:"t",value:0,texture:o},mapRight:{type:"t",value:1,texture:t}},vertexShader:"varying vec2 vUv;\nvoid main() {\nvUv = vec2( uv.x, 1.0 - uv.y );\ngl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n}",fragmentShader:"uniform sampler2D mapLeft;\nuniform sampler2D mapRight;\nvarying vec2 vUv;\nvoid main() {\nvec4 colorL, colorR;\nvec2 uv = vUv;\ncolorL = texture2D( mapLeft, uv );\ncolorR = texture2D( mapRight, uv );\ngl_FragColor = vec4( colorL.g * 0.7 + colorL.b * 0.3, colorR.g, colorR.b, colorL.a + colorR.a ) * 1.1;\n}"});
 var y=new THREE.Scene;y.add(new THREE.Mesh(new THREE.PlaneGeometry(2,2),_material));this.setSize=function(a,e){b.call(c,a,e);o.width=a;o.height=e;t.width=a;t.height=e};this.render=function(a,b){b.update(null,!0);if(l!==b.aspect||m!==b.near||n!==b.fov){l=b.aspect;m=b.near;n=b.fov;var z=b.projectionMatrix.clone(),w=125/30*0.5,x=w*m/125,A=m*Math.tan(n*Math.PI/360),D;f.n14=w;k.n14=-w;w=-A*l+x;D=A*l+x;z.n11=2*m/(D-w);z.n13=(D+w)/(D-w);g.projectionMatrix=z.clone();w=-A*l-x;D=A*l-x;z.n11=2*m/(D-w);z.n13=
 (D+w)/(D-w);h.projectionMatrix=z.clone()}g.matrix=b.matrixWorld.clone().multiplySelf(k);g.update(null,!0);g.position.copy(b.position);g.near=m;g.far=b.far;e.call(c,a,g,o,!0);h.matrix=b.matrixWorld.clone().multiplySelf(f);h.update(null,!0);h.position.copy(b.position);h.near=m;h.far=b.far;e.call(c,a,h,t,!0);e.call(c,y,u)}};
-if(THREE.WebGLRenderer)THREE.CrosseyedWebGLRenderer=function(a){THREE.WebGLRenderer.call(this,a);this.autoClear=!1;var c=this,b=this.setSize,e=this.render,g,h,f=new THREE.Camera;f.useTarget=!0;var k=new THREE.Camera;k.useTarget=!0;c.separation=10;if(a&&a.separation!==void 0)c.separation=a.separation;this.setSize=function(a,e){b.call(c,a,e);g=a/2;h=e};this.render=function(a,b){this.clear();f.fov=b.fov;f.aspect=0.5*b.aspect;f.near=b.near;f.far=b.far;f.updateProjectionMatrix();f.position.copy(b.position);
-f.target.position.copy(b.target.position);f.translateX(c.separation);k.projectionMatrix=f.projectionMatrix;k.position.copy(b.position);k.target.position.copy(b.target.position);k.translateX(-c.separation);this.setViewport(0,0,g,h);e.call(c,a,f);this.setViewport(g,0,g,h);e.call(c,a,k,!1)}};
+if(THREE.WebGLRenderer)THREE.CrosseyedWebGLRenderer=function(a){THREE.WebGLRenderer.call(this,a);this.autoClear=!1;var c=this,b=this.setSize,e=this.render,g,h,f=new THREE.PerspectiveCamera;f.target=new THREE.Vector3(0,0,0);var k=new THREE.PerspectiveCamera;k.target=new THREE.Vector3(0,0,0);c.separation=10;if(a&&a.separation!==void 0)c.separation=a.separation;this.setSize=function(a,e){b.call(c,a,e);g=a/2;h=e};this.render=function(a,b){this.clear();f.fov=b.fov;f.aspect=0.5*b.aspect;f.near=b.near;f.far=
+b.far;f.updateProjectionMatrix();f.position.copy(b.position);f.target.copy(b.target);f.translateX(c.separation);f.lookAt(f.target);k.projectionMatrix=f.projectionMatrix;k.position.copy(b.position);k.target.copy(b.target);k.translateX(-c.separation);k.lookAt(k.target);this.setViewport(0,0,g,h);e.call(c,a,f);this.setViewport(g,0,g,h);e.call(c,a,k,!1)}};

examples/webgl_geometry_colors.html

@@ -62,9 +62,8 @@
 
 				container = document.getElementById( 'container' );
 
-				camera = new THREE.Camera( 20, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera = new THREE.PerspectiveCamera( 20, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.z = 1800;
-				camera.useTarget = true;
 
 				scene = new THREE.Scene();
 
@@ -197,6 +196,8 @@
 				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
 				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
 
+				camera.lookAt( scene.position );
+
 				renderer.render( scene, camera );
 
 			}

examples/webgl_geometry_dynamic.html

@@ -57,7 +57,7 @@
 
 			var container, stats;
 
-			var camera, scene, renderer;
+			var camera, controls, scene, renderer;
 
 			var mesh, texture,geometry, material;
 
@@ -71,21 +71,17 @@
 
 				container = document.getElementById( 'container' );
 
-				camera = new THREE.FirstPersonCamera( {
-
-					fov: 60, aspect: window.innerWidth / window.innerHeight, near: 1, far: 20000,
-					movementSpeed: 500, lookSpeed: 0.1, noFly: false, lookVertical: true
+				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 20000 );
+				camera.position.y = 200;
 
-				} );
+				controls = new THREE.FirstPersonControls( camera );
 
-				camera.target.position.z = - 100;
+				controls.movementSpeed = 500;
+				controls.lookSpeed = 0.1
 
 				scene = new THREE.Scene();
 				scene.fog = new THREE.FogExp2( 0xaaccff, 0.0007 );
 
-				camera.position.y = 200;
-				camera.target.position.y = camera.position.y;
-
 				geometry = new THREE.PlaneGeometry( 20000, 20000, worldWidth - 1, worldDepth - 1 );
 				geometry.dynamic = true;
 
@@ -106,13 +102,14 @@
 				var texture = THREE.ImageUtils.loadTexture( "textures/water.jpg" );
 				texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
 				texture.repeat.set( 5, 5 );
-				material = new THREE.MeshBasicMaterial( { color:0x0044ff, opacity:1, map: texture } );
+
+				material = new THREE.MeshBasicMaterial( { color: 0x0044ff, map: texture } );
 
 				mesh = new THREE.Mesh( geometry, material );
 				mesh.rotation.x = - 90 * Math.PI / 180;
 				scene.add( mesh );
 
-				renderer = new THREE.WebGLRenderer( { clearColor:0xaaccff, clearAlpha: 1 } );
+				renderer = new THREE.WebGLRenderer( { clearColor: 0xaaccff, clearAlpha: 1 } );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				container.innerHTML = "";
@@ -154,7 +151,8 @@
 				mesh.geometry.__dirtyVertices = true;
 				//mesh.geometry.__dirtyNormals = true;
 
-				renderer.render(scene, camera);
+				controls.update();
+				renderer.render( scene, camera );
 
 			}
 

examples/webgl_geometry_hierarchy.html

@@ -44,9 +44,8 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.Camera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.z = 500;
-				camera.useTarget = true;
 
 				scene = new THREE.Scene();
 				scene.fog = new THREE.Fog( 0xffffff, 1, 10000 );
@@ -76,6 +75,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.sortObjects = false;
+
 				container.appendChild( renderer.domElement );
 
 				stats = new Stats();
@@ -113,6 +113,8 @@
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
+				camera.lookAt( scene.position );
+
 				group.rotation.x = rx;
 				group.rotation.y = ry;
 				group.rotation.z = rz;

examples/webgl_geometry_hierarchy2.html

@@ -44,9 +44,8 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.Camera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.z = 500;
-				camera.useTarget = true;
 
 				scene = new THREE.Scene();
 				scene.fog = new THREE.Fog( 0xffffff, 1, 10000 );
@@ -187,6 +186,8 @@
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
+				camera.lookAt( scene.position );
+
 				for ( var i = 0, l = objects.length; i < l; i ++ ) {
 
 					objects[ i ].rotation.x = rx;

examples/webgl_geometry_large_mesh.html

@@ -105,9 +105,8 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.Camera( 50, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 100000 );
+				camera = new THREE.PerspectiveCamera( 50, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 100000 );
 				camera.position.z = 1500;
-				camera.useTarget = true;
 
 				scene = new THREE.Scene();
 
@@ -117,19 +116,15 @@
 				scene.add( ambient );
 
 				directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
-				directionalLight.position.x = 1;
-				directionalLight.position.y = 1;
-				directionalLight.position.z = 2;
-				directionalLight.position.normalize();
+				directionalLight.position.set( 1, 1, 2 ).normalize();
 				scene.add( directionalLight );
 
 				pointLight = new THREE.PointLight( 0xffaa00 );
-				pointLight.position.x = 0;
-				pointLight.position.y = 0;
-				pointLight.position.z = 0;
+				pointLight.position.set( 0, 0, 0 );
 				scene.add( pointLight );
 
 				// light representation
+
 				sphere = new THREE.SphereGeometry( 100, 16, 8, 1 );
 				lightMesh = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xffaa00 } ) );
 				lightMesh.scale.x = lightMesh.scale.y = lightMesh.scale.z = 0.05;
@@ -219,8 +214,10 @@
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
-				lightMesh.position.x = 700*Math.cos(r);
-				lightMesh.position.z = 700*Math.sin(r);
+				camera.lookAt( scene.position );
+
+				lightMesh.position.x = 700 * Math.cos( r );
+				lightMesh.position.z = 700 * Math.sin( r );
 
 				r += 0.01;
 

examples/webgl_geometry_shapes.html

@@ -55,7 +55,7 @@
 				info.innerHTML = 'Simple procedurally generated 3D shapes example by <a href="http://www.lab4games.net/zz85/blog">zz85</a><br/>Drag to spin';
 				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 = 500;
 

examples/webgl_geometry_terrain.html

@@ -53,7 +53,7 @@
 
 			var container, stats;
 
-			var camera, scene, renderer;
+			var camera, controls, scene, renderer;
 
 			var mesh, texture;
 
@@ -68,21 +68,18 @@
 
 				container = document.getElementById( 'container' );
 
-				camera = new THREE.FirstPersonCamera( {
+				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 20000 );
 
-					fov: 60, aspect: window.innerWidth / window.innerHeight, near: 1, far: 20000,
-					movementSpeed: 1000, lookSpeed: 0.1, noFly: false, lookVertical: true
+				controls = new THREE.FirstPersonControls( camera );
 
-				} );
-
-				camera.target.position.z = - 100;
+				controls.movementSpeed = 1000;
+				controls.lookSpeed = 0.1;
 
 				scene = new THREE.Scene();
 
 				data = generateHeight( worldWidth, worldDepth );
 
 				camera.position.y = data[ worldHalfWidth + worldHalfDepth * worldWidth ] + 500;
-				camera.target.position.y = camera.position.y;
 
 				var geometry = new THREE.PlaneGeometry( 7500, 7500, worldWidth - 1, worldDepth - 1 );
 
@@ -221,6 +218,7 @@
 
 			function render() {
 
+				controls.update();
 				renderer.render( scene, camera );
 
 			}

examples/webgl_geometry_terrain_fog.html

@@ -53,7 +53,7 @@
 
 			var container, stats;
 
-			var camera, scene, renderer;
+			var camera, controls, scene, renderer;
 
 			var mesh, texture;
 
@@ -67,14 +67,12 @@
 
 				container = document.getElementById( 'container' );
 
-				camera = new THREE.FirstPersonCamera( {
+				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
 
-					fov: 60, aspect: window.innerWidth / window.innerHeight, near: 1, far: 10000,
-					movementSpeed: 150, lookSpeed: 0.1, noFly: false, lookVertical: true
+				controls = new THREE.FirstPersonControls( camera );
 
-				} );
-
-				camera.target.position.z = - 100;
+				controls.movementSpeed = 150;
+				controls.lookSpeed = 0.1;
 
 				scene = new THREE.Scene();
 				scene.fog = new THREE.FogExp2( 0xefd1b5, 0.0025 );
@@ -82,7 +80,6 @@
 				data = generateHeight( worldWidth, worldDepth );
 
 				camera.position.y = data[ worldHalfWidth + worldHalfDepth * worldWidth ] * 10 + 500;
-				camera.target.position.y = camera.position.y;
 
 				var geometry = new THREE.PlaneGeometry( 7500, 7500, worldWidth - 1, worldDepth - 1 );
 
@@ -223,6 +220,7 @@
 
 			function render() {
 
+				controls.update();
 				renderer.render( scene, camera );
 
 			}

examples/webgl_geometry_text.html

@@ -75,7 +75,7 @@
 
 			var container, stats, permalink, hex, color;
 
-			var camera, scene, renderer;
+			var camera, cameraTarget, scene, renderer;
 
 			var composer;
 
@@ -161,11 +161,10 @@
 
 				// CAMERA
 
-				camera = new THREE.Camera( 30, window.innerWidth / window.innerHeight, 1, 1500 );
-				camera.position.y = 400;
-				camera.position.z = 700;
-				camera.useTarget = true;
-				camera.target.position.y = 150;
+				camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 1500 );
+				camera.position.set( 0, 400, 700 );
+
+				cameraTarget = new THREE.Vector3( 0, 150, 0 );
 
 				// SCENE
 
@@ -174,8 +173,7 @@
 				scene.fog = new THREE.Fog( 0x000000, 250, 1400 );
 
 				var dirLight = new THREE.DirectionalLight( 0xffffff, 0.125 );
-				dirLight.position.set( 0, 0, 1 );
-				dirLight.position.normalize();
+				dirLight.position.set( 0, 0, 1 ).normalize();
 				scene.add( dirLight );
 
 				var pointLight = new THREE.PointLight( 0xffffff, 1.5 );
@@ -618,6 +616,8 @@
 
 				parent.rotation.y += ( targetRotation - parent.rotation.y ) * 0.05;
 
+				camera.lookAt( cameraTarget );
+
 				renderer.clear();
 
 				if ( postprocessing.enabled ) {

examples/webgl_hdr.html

@@ -124,16 +124,13 @@
 
 				container = document.getElementById( 'container' );
 
-				camera = new THREE.Camera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.z = 900;
 
 				scene = new THREE.Scene();
 
 				directionalLight = new THREE.DirectionalLight( 0xffffff );
-				directionalLight.position.x = 0;
-				directionalLight.position.y = 0;
-				directionalLight.position.z = 1;
-				directionalLight.position.normalize();
+				directionalLight.position.set( 0, 0, 1 ).normalize();
 				scene.add( directionalLight );
 
 				var texture = THREE.ImageUtils.loadTexture( "textures/memorial.png" );

examples/webgl_interactive_cubes.html

@@ -43,25 +43,17 @@
 				info.innerHTML = '<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> webgl - interactive cubes';
 				container.appendChild( info );
 
-				camera = new THREE.Camera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
-				camera.position.y = 300;
-				camera.position.z = 500;
-				camera.useTarget = true;
+				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera.position.set( 0, 300, 500 );
 
 				scene = new THREE.Scene();
 
 				var light = new THREE.DirectionalLight( 0xffffff, 2 );
-				light.position.x = 1;
-				light.position.y = 1;
-				light.position.z = 1;
-				light.position.normalize();
+				light.position.set( 1, 1, 1 ).normalize();
 				scene.add( light );
 
 				var light = new THREE.DirectionalLight( 0xffffff );
-				light.position.x = - 1;
-				light.position.y = - 1;
-				light.position.z = - 1;
-				light.position.normalize();
+				light.position.set( -1, -1, -1 ).normalize();
 				scene.add( light );
 
 				var geometry = new THREE.CubeGeometry( 20, 20, 20 );
@@ -69,15 +61,19 @@
 				for ( var i = 0; i < 500; i ++ ) {
 
 					var object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } ) );
+
 					object.position.x = Math.random() * 800 - 400;
 					object.position.y = Math.random() * 800 - 400;
 					object.position.z = Math.random() * 800 - 400;
+
 					object.rotation.x = ( Math.random() * 360 ) * Math.PI / 180;
 					object.rotation.y = ( Math.random() * 360 ) * Math.PI / 180;
 					object.rotation.z = ( Math.random() * 360 ) * Math.PI / 180;
+
 					object.scale.x = Math.random() * 2 + 1;
 					object.scale.y = Math.random() * 2 + 1;
 					object.scale.z = Math.random() * 2 + 1;
+
 					scene.add( object );
 
 				}
@@ -125,10 +121,13 @@
 			function render() {
 
 				theta += 0.2;
+
 				camera.position.x = radius * Math.sin( theta * Math.PI / 360 );
 				camera.position.y = radius * Math.sin( theta * Math.PI / 360 );
 				camera.position.z = radius * Math.cos( theta * Math.PI / 360 );
 
+				camera.lookAt( scene.position );
+
 				// find intersections
 
 				camera.update();

examples/webgl_interactive_draggablecubes.html

@@ -38,7 +38,7 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.Camera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.z = 1000;
 
 				scene = new THREE.Scene();
@@ -55,17 +55,22 @@
 				for ( var i = 0; i < 200; i ++ ) {
 
 					var object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } ) );
+
 					object.position.x = Math.random() * 1000 - 500;
 					object.position.y = Math.random() * 600 - 300;
 					object.position.z = Math.random() * 800 - 400;
+
 					object.rotation.x = ( Math.random() * 360 ) * Math.PI / 180;
 					object.rotation.y = ( Math.random() * 360 ) * Math.PI / 180;
 					object.rotation.z = ( Math.random() * 360 ) * Math.PI / 180;
+
 					object.scale.x = Math.random() * 2 + 1;
 					object.scale.y = Math.random() * 2 + 1;
 					object.scale.z = Math.random() * 2 + 1;
+
 					object.castShadow = true;
 					object.receiveShadow = true;
+
 					scene.add( object );
 
 					objects.push( object );
@@ -79,7 +84,7 @@
 
 				projector = new THREE.Projector();
 
-				renderer = new THREE.WebGLRenderer( { antialias : true } );
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.sortObjects = false;
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
@@ -197,9 +202,13 @@
 
 				event.preventDefault();
 
-				plane.position.copy( INTERSECTED.position );
+				if ( INTERSECTED ) {
+
+					plane.position.copy( INTERSECTED.position );
 
-				SELECTED = null;
+					SELECTED = null;
+
+				}
 
 				container.style.cursor = 'auto';
 

examples/webgl_interactive_voxelpainter.html

@@ -28,7 +28,7 @@
 			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
 			var container, stats;
-			var camera, scene, renderer;
+			var camera, cameraTarget, scene, renderer;
 			var projector, plane, cube;
 			var mouse2D, mouse3D, ray,
 			rollOveredFace, isShiftDown = false,
@@ -54,10 +54,10 @@
 				info.innerHTML = '<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - voxel painter - webgl<br /><strong>click</strong>: add voxel, <strong>control + click</strong>: remove voxel, <strong>shift + click</strong>: rotate, <a href="javascript:save();return false;">save .png</a>';
 				container.appendChild( info );
 
-				camera = new THREE.Camera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.y = 800;
-				camera.useTarget = true;
-				camera.target.position.y = 200;
+
+				cameraTarget = new THREE.Vector3( 0, 200, 0 );
 
 				scene = new THREE.Scene();
 
@@ -74,6 +74,7 @@
 				cubeGeo = new THREE.CubeGeometry( 50, 50, 50 );
 				cubeMaterial = new THREE.MeshLambertMaterial( { color: 0x00ff80, shading: THREE.FlatShading, map: THREE.ImageUtils.loadTexture( "textures/square-outline-textured.png" ) } );
 				cubeMaterial.color.setHSV( 0.1, 0.7, 1.0 );
+
 				// picking
 
 				projector = new THREE.Projector();
@@ -266,6 +267,8 @@
 				camera.position.x = 1400 * Math.sin( theta * Math.PI / 360 );
 				camera.position.z = 1400 * Math.cos( theta * Math.PI / 360 );
 
+				camera.lookAt( cameraTarget );
+
 				renderer.render( scene, camera );
 
 			}

examples/webgl_lights_pointlights.html

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

examples/webgl_lines_colors.html

@@ -79,9 +79,8 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.Camera( 33, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera = new THREE.PerspectiveCamera( 33, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.z = 700;
-				camera.useTarget = true;
 
 				scene = new THREE.Scene();
 
@@ -266,6 +265,8 @@
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.y += ( - mouseY + 200 - camera.position.y ) * .05;
 
+				camera.lookAt( scene.position );
+
 				var time = new Date().getTime() * 0.0005;
 
 				for( var i = 0; i < scene.objects.length; i ++ ) {

examples/webgl_lines_cubes.html

@@ -71,9 +71,8 @@
 				container = document.createElement('div');
 				document.body.appendChild(container);
 
-				camera = new THREE.Camera( 33, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera = new THREE.PerspectiveCamera( 33, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.z = 700;
-				camera.useTarget = true;
 
 				scene = new THREE.Scene();
 
@@ -149,7 +148,7 @@
 				if( --iterations >= 0 ) {
 
 					var tmp = [];
-					
+
 					Array.prototype.push.apply( tmp, hilbert3D ( vec[ 0 ], half, iterations, v0, v3, v4, v7, v6, v5, v2, v1 ) );
 					Array.prototype.push.apply( tmp, hilbert3D ( vec[ 1 ], half, iterations, v0, v7, v6, v1, v2, v5, v4, v3 ) );
 					Array.prototype.push.apply( tmp, hilbert3D ( vec[ 2 ], half, iterations, v0, v7, v6, v1, v2, v5, v4, v3 ) );
@@ -158,7 +157,7 @@
 					Array.prototype.push.apply( tmp, hilbert3D ( vec[ 5 ], half, iterations, v4, v3, v2, v5, v6, v1, v0, v7 ) );
 					Array.prototype.push.apply( tmp, hilbert3D ( vec[ 6 ], half, iterations, v4, v3, v2, v5, v6, v1, v0, v7 ) );
 					Array.prototype.push.apply( tmp, hilbert3D ( vec[ 7 ], half, iterations, v6, v5, v2, v1, v0, v3, v4, v7 ) );
-					
+
 					return tmp;
 
 				}
@@ -210,7 +209,8 @@
 
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.y += ( - mouseY + 200 - camera.position.y ) * .05;
-				camera.updateMatrix();
+
+				camera.lookAt( scene.position );
 
 				var time = new Date().getTime() * 0.0015;
 

examples/webgl_lines_sphere.html

@@ -72,12 +72,11 @@
 
 				var container;
 
-				container = document.createElement('div');
-				document.body.appendChild(container);
+				container = document.createElement( 'div' );
+				document.body.appendChild( container );
 
-				camera = new THREE.Camera( 80, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 3000 );
+				camera = new THREE.PerspectiveCamera( 80, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 3000 );
 				camera.position.z = 1000;
-				camera.useTarget = true;
 
 				scene = new THREE.Scene();
 
@@ -118,8 +117,8 @@
 				}
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
-				container.appendChild(renderer.domElement);
+				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
+				container.appendChild( renderer.domElement );
 
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
@@ -127,7 +126,7 @@
 
 			}
 
-			function onDocumentMouseMove(event) {
+			function onDocumentMouseMove( event ) {
 
 				mouseX = event.clientX - windowHalfX;
 				mouseY = event.clientY - windowHalfY;
@@ -136,7 +135,7 @@
 
 			function onDocumentTouchStart( event ) {
 
-				if(event.touches.length > 1) {
+				if ( event.touches.length > 1 ) {
 
 					event.preventDefault();
 
@@ -148,7 +147,7 @@
 
 			function onDocumentTouchMove( event ) {
 
-				if(event.touches.length == 1) {
+				if ( event.touches.length == 1 ) {
 
 					event.preventDefault();
 
@@ -172,7 +171,7 @@
 
 				//camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.y += ( - mouseY + 200 - camera.position.y ) * .05;
-				camera.updateMatrix();
+				camera.lookAt( scene.position );
 
 				renderer.render( scene, camera );
 

examples/webgl_lines_splines.html

@@ -68,12 +68,11 @@
 
 				var i, n_sub, container;
 
-				container = document.createElement('div');
-				document.body.appendChild(container);
+				container = document.createElement( 'div' );
+				document.body.appendChild( container );
 
-				camera = new THREE.Camera( 33, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera = new THREE.PerspectiveCamera( 33, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.z = 700;
-				camera.useTarget = true;
 
 				scene = new THREE.Scene();
 
@@ -181,7 +180,7 @@
 				if( --iterations >= 0 ) {
 
 					var tmp = [];
-					
+
 					Array.prototype.push.apply( tmp, hilbert3D ( vec[ 0 ], half, iterations, v0, v3, v4, v7, v6, v5, v2, v1 ) );
 					Array.prototype.push.apply( tmp, hilbert3D ( vec[ 1 ], half, iterations, v0, v7, v6, v1, v2, v5, v4, v3 ) );
 					Array.prototype.push.apply( tmp, hilbert3D ( vec[ 2 ], half, iterations, v0, v7, v6, v1, v2, v5, v4, v3 ) );
@@ -190,7 +189,7 @@
 					Array.prototype.push.apply( tmp, hilbert3D ( vec[ 5 ], half, iterations, v4, v3, v2, v5, v6, v1, v0, v7 ) );
 					Array.prototype.push.apply( tmp, hilbert3D ( vec[ 6 ], half, iterations, v4, v3, v2, v5, v6, v1, v0, v7 ) );
 					Array.prototype.push.apply( tmp, hilbert3D ( vec[ 7 ], half, iterations, v6, v5, v2, v1, v0, v3, v4, v7 ) );
-					
+
 					return tmp;
 
 				}
@@ -244,6 +243,8 @@
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.y += ( - mouseY + 200 - camera.position.y ) * .05;
 
+				camera.lookAt( scene.position );
+
 				var time = new Date().getTime() * 0.0005;
 
 				for( var i = 0; i < scene.objects.length; i ++ ) {

examples/webgl_lod.html

@@ -67,9 +67,8 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.Camera( 45, window.innerWidth / window.innerHeight, 1, 15000 );
+				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 15000 );
 				camera.position.z = 1000;
-				camera.useTarget = true;
 
 				scene = new THREE.Scene();
 				scene.fog = new THREE.Fog( 0x000000, 1, 15000 );
@@ -79,8 +78,7 @@
 				scene.add( light );
 
 				var light = new THREE.DirectionalLight( 0xffffff );
-				light.position.set( 0, 0, 1 );
-				light.position.normalize();
+				light.position.set( 0, 0, 1 ).normalize();
 				scene.add( light );
 
 				var material = new THREE.MeshLambertMaterial( { color: 0xffffff, wireframe: true } );
@@ -121,9 +119,10 @@
 
 
 
-				renderer = new THREE.WebGLRenderer( { clearColor:0x000000, clearAlpha: 1 } );
+				renderer = new THREE.WebGLRenderer( { clearColor: 0x000000, clearAlpha: 1 } );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.sortObjects = false;
+
 				container.appendChild( renderer.domElement );
 
 			}
@@ -147,14 +146,9 @@
 				camera.position.x += ( mouseX - camera.position.x ) * .005;
 				camera.position.y += ( - mouseY - camera.position.y ) * .01;
 
-				renderer.render( scene, camera );
-
-			}
-
-			function log( text ) {
+				camera.lookAt( scene.position );
 
-				var e = document.getElementById("log");
-				e.innerHTML = text + "<br/>" + e.innerHTML;
+				renderer.render( scene, camera );
 
 			}
 

examples/webgl_lod_text.html

@@ -71,9 +71,8 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.Camera( 45, window.innerWidth / window.innerHeight, 1, 15000 );
+				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 15000 );
 				camera.position.z = 1000;
-				camera.useTarget = true;
 
 				scene = new THREE.Scene();
 				scene.fog = new THREE.Fog( 0x000000, 1, 15000 );
@@ -83,13 +82,13 @@
 				scene.add( light );
 
 				var light = new THREE.DirectionalLight( 0xffffff );
-				light.position.set( 0, 0, 1 );
-				light.position.normalize();
+				light.position.set( 0, 0, 1 ).normalize();
 				scene.add( light );
 
 				var wireMaterial = new THREE.MeshLambertMaterial( { color: 0xffffff, opacity: 0.5, wireframe: true } );
 
-				function getOptionsWithSegments(x,b, bevel) {
+				function getOptionsWithSegments( x, b, bevel ) {
+
 					return {
 
 						size: 80,
@@ -100,28 +99,29 @@
 						bevelEnabled: bevel,
 						bevelThickness:8,
 						bevelSize: 3,
-						steps: 1, 
+						steps: 1,
 						amount: 20,
 
 					};
+
 				};
-				
+
 				var theText = "&"; // Try $ :)
-				
+
 				// we could use TextPath and ExtrudeGeometry if we wish to optimize stuff futher
 				var geometry = [
 
-					[ new THREE.TextGeometry( theText, getOptionsWithSegments(8, 6, true)), 
+					[ new THREE.TextGeometry( theText, getOptionsWithSegments(8, 6, true)),
 						300, [ new THREE.MeshPhongMaterial( { color: 0xffee00 } ), wireMaterial ] ],
-					[ new THREE.TextGeometry( theText, getOptionsWithSegments(5,2, true)), 
+					[ new THREE.TextGeometry( theText, getOptionsWithSegments(5,2, true)),
 						800, [ new THREE.MeshLambertMaterial( { color: 0xffaa00 } ), wireMaterial ]],
 					[ new THREE.TextGeometry( theText, getOptionsWithSegments(2,1, true)),
 						1000, [ new THREE.MeshLambertMaterial( { color: 0x005500 } ), wireMaterial ] ],
-					[ new THREE.TextGeometry( theText, getOptionsWithSegments(2,1,false)), 
+					[ new THREE.TextGeometry( theText, getOptionsWithSegments(2,1,false)),
 						2000, [ new THREE.MeshLambertMaterial( { color: 0x0055ff } ), wireMaterial ]],
 					[ new THREE.TextGeometry( theText, getOptionsWithSegments(1,1, false)),
 						10000, [ new THREE.MeshLambertMaterial( { color: 0xff1100 } ), wireMaterial ]]
-						
+
 				];
 
 				var i, j, mesh, lod;
@@ -145,15 +145,16 @@
 					lod.position.z = 10000 * ( 0.5 - Math.random() );
 					lod.updateMatrix();
 					lod.matrixAutoUpdate = false;
+
 					scene.add( lod );
 
 				}
 
 
-
-				renderer = new THREE.WebGLRenderer( { clearColor:0x000000, clearAlpha: 1 } );
+				renderer = new THREE.WebGLRenderer( { clearColor: 0x000000, clearAlpha: 1 } );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.sortObjects = false;
+
 				container.appendChild( renderer.domElement );
 
 			}
@@ -177,6 +178,8 @@
 				camera.position.x += ( mouseX - camera.position.x ) * .005;
 				camera.position.y += ( - mouseY - camera.position.y ) * .01;
 
+				camera.lookAt( scene.position );
+
 				renderer.render( scene, camera );
 
 			}

examples/webgl_materials.html

@@ -35,13 +35,11 @@
 
 			function init() {
 
-				container = document.createElement('div');
-				document.body.appendChild(container);
+				container = document.createElement( 'div' );
+				document.body.appendChild( container );
 
-				camera = new THREE.Camera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
-				camera.position.y = 200;
-				camera.position.z = 800;
-				camera.useTarget = true;
+				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
+				camera.position.set( 0, 200, 800 );
 
 				scene = new THREE.Scene();
 
@@ -134,23 +132,31 @@
 				scene.add( new THREE.AmbientLight( 0x202020 ) );
 
 				var directionalLight = new THREE.DirectionalLight( Math.random() * 0xffffff );
+
 				directionalLight.position.x = Math.random() - 0.5;
 				directionalLight.position.y = Math.random() - 0.5;
 				directionalLight.position.z = Math.random() - 0.5;
+
 				directionalLight.position.normalize();
+
 				scene.add( directionalLight );
 
 				pointLight = new THREE.PointLight( 0xffffff, 1 );
 				scene.add( pointLight );
 
+				//
+
 				renderer = new THREE.WebGLRenderer();
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				container.appendChild( renderer.domElement );
 
+				//
+
 				stats = new Stats();
 				stats.domElement.style.position = 'absolute';
 				stats.domElement.style.top = '0px';
+
 				container.appendChild( stats.domElement );
 
 			}
@@ -200,6 +206,8 @@
 				camera.position.x = Math.cos( timer ) * 1000;
 				camera.position.z = Math.sin( timer ) * 1000;
 
+				camera.lookAt( scene.position );
+
 				for ( var i = 0, l = objects.length; i < l; i++ ) {
 
 					var object = objects[ i ];

examples/webgl_materials_cars.html

@@ -17,7 +17,7 @@
 			h1 { }
 			a { color:skyblue; text-decoration:none }
 			canvas { pointer-events:none; z-index:10; position:relative; }
-			#log { position:absolute; top:50px; text-align:left; display:block; z-index:100 }
+
 			#d { position:absolute; width: 100%; text-align:center; margin:1em 0 -4.5em 0; z-index:1000; }
 
 			.bwrap { margin:0.5em 0 0 0 }
@@ -55,8 +55,6 @@
 			<div id="buttons_materials" class="bwrap"></div>
 		</div>
 
-		<div id="log"></div>
-
 		<script src="../build/Three.js"></script>
 
 		<script src="js/Detector.js"></script>
@@ -140,8 +138,8 @@
 
 			var container, stats;
 
-			var camera, scene, webglRenderer;
-			var cameraCube, sceneCube;
+			var camera, scene, renderer;
+			var cameraCube, sceneCube, cubeTarget;
 
 			var m, mi;
 
@@ -160,14 +158,13 @@
 
 			function init() {
 
-				container = document.createElement('div');
-				document.body.appendChild(container);
+				container = document.createElement( 'div' );
+				document.body.appendChild( container );
 
-				camera = new THREE.Camera( 70, window.innerWidth / window.innerHeight, 1, 100000 );
-				camera.useTarget = true;
+				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 100000 );
+				cameraCube = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 100000 );
 
-				cameraCube = new THREE.Camera( 70, window.innerWidth / window.innerHeight, 1, 100000 );
-				cameraCube.useTarget = true;
+				cubeTarget = new THREE.Vector3( 0, 0, 0 );
 
 				scene = new THREE.Scene();
 				sceneCube = new THREE.Scene();
@@ -178,23 +175,15 @@
 				scene.add( ambient );
 
 				directionalLight = new THREE.DirectionalLight( 0xffffff, 2 );
-				directionalLight.position.x = 2;
-				directionalLight.position.y = 1.2;
-				directionalLight.position.z = 10;
-				directionalLight.position.normalize();
+				directionalLight.position.set( 2, 1.2, 10 ).normalize();
 				scene.add( directionalLight );
 
 				directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
-				directionalLight.position.x = - 2;
-				directionalLight.position.y = 1.2;
-				directionalLight.position.z = - 10;
-				directionalLight.position.normalize();
+				directionalLight.position.set( -2, 1.2, -10 ).normalize();
 				scene.add( directionalLight );
 
 				pointLight = new THREE.PointLight( 0xffaa00, 2 );
-				pointLight.position.x = 2000;
-				pointLight.position.y = 1200;
-				pointLight.position.z = 10000;
+				pointLight.position.set( 2000, 1200, 10000 );
 				scene.add( pointLight );
 
 				// Skybox
@@ -216,11 +205,12 @@
 
 				//
 
-				webglRenderer = new THREE.WebGLRenderer();
-				webglRenderer.setSize( window.innerWidth, window.innerHeight );
-				webglRenderer.setFaceCulling( 0 );
-				webglRenderer.autoClear = false;
-				container.appendChild( webglRenderer.domElement );
+				renderer = new THREE.WebGLRenderer();
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setFaceCulling( 0 );
+				renderer.autoClear = false;
+
+				container.appendChild( renderer.domElement );
 
 				if ( STATS_ENABLED ) {
 
@@ -232,7 +222,7 @@
 
 				}
 
-				document.addEventListener('mousemove', onDocumentMouseMove, false);
+				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
 				var r = "textures/cube/Bridge2/";
 				var urls = [ r + "posx.jpg", r + "negx.jpg",
@@ -571,10 +561,13 @@
 				}
 
 				var mesh = new THREE.Mesh( geometry, m );
+
 				mesh.rotation.x = r[ 0 ];
 				mesh.rotation.y = r[ 1 ];
 				mesh.rotation.z = r[ 2 ];
+
 				mesh.scale.x = mesh.scale.y = mesh.scale.z = s;
+
 				scene.add( mesh );
 
 				CARS[ car ].object = mesh;
@@ -614,22 +607,19 @@
 				camera.position.x = 1000 * Math.cos( timer );
 				camera.position.z = 1000 * Math.sin( timer );
 
-				cameraCube.target.position.x = - camera.position.x;
-				cameraCube.target.position.y = - camera.position.y;
-				cameraCube.target.position.z = - camera.position.z;
+				camera.lookAt( scene.position );
 
-				webglRenderer.clear();
-				webglRenderer.render( sceneCube, cameraCube );
-				webglRenderer.render( scene, camera );
+				cubeTarget.x = - camera.position.x;
+				cubeTarget.y = - camera.position.y;
+				cubeTarget.z = - camera.position.z;
 
-				if ( STATS_ENABLED ) stats.update();
+				cameraCube.lookAt( cubeTarget );
 
-			}
+				renderer.clear();
+				renderer.render( sceneCube, cameraCube );
+				renderer.render( scene, camera );
 
-			function log( text ) {
-
-				var e = document.getElementById("log");
-				e.innerHTML = text + "<br/>" + e.innerHTML;
+				if ( STATS_ENABLED ) stats.update();
 
 			}
 

examples/webgl_materials_cars_anaglyph.html

@@ -17,7 +17,7 @@
 			h1 { }
 			a { color:skyblue; text-decoration:none }
 			canvas { pointer-events:none; z-index:10; position:relative; }
-			#log { position:absolute; top:50px; text-align:left; display:block; z-index:100 }
+
 			#d { position:absolute; width: 100%; text-align:center; margin:1em 0 -4.5em 0; z-index:1000; }
 
 			.bwrap { margin:0.5em 0 0 0 }
@@ -55,8 +55,6 @@
 			<div id="buttons_materials" class="bwrap"></div>
 		</div>
 
-		<div id="log"></div>
-
 		<script src="../build/Three.js"></script>
 
 		<script src="js/Detector.js"></script>
@@ -140,7 +138,7 @@
 
 			var container, stats;
 
-			var camera, scene, webglRenderer;
+			var camera, scene, renderer;
 
 			var m, mi;
 
@@ -159,11 +157,10 @@
 
 			function init() {
 
-				container = document.createElement('div');
-				document.body.appendChild(container);
+				container = document.createElement( 'div' );
+				document.body.appendChild( container );
 
-				camera = new THREE.Camera( 70, window.innerWidth / window.innerHeight, 1, 100000 );
-				camera.useTarget = true;
+				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 100000 );
 
 				scene = new THREE.Scene();
 
@@ -173,29 +170,21 @@
 				scene.add( ambient );
 
 				directionalLight = new THREE.DirectionalLight( 0xffffff, 2 );
-				directionalLight.position.x = 2;
-				directionalLight.position.y = 1.2;
-				directionalLight.position.z = 10;
-				directionalLight.position.normalize();
+				directionalLight.position.set( 2, 1.2, 10 ).normalize();
 				scene.add( directionalLight );
 
 				directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
-				directionalLight.position.x = - 2;
-				directionalLight.position.y = 1.2;
-				directionalLight.position.z = - 10;
-				directionalLight.position.normalize();
+				directionalLight.position.set( - 2, 1.2, -10 ).normalize();
 				scene.add( directionalLight );
 
 				pointLight = new THREE.PointLight( 0xffaa00, 2 );
-				pointLight.position.x = 2000;
-				pointLight.position.y = 1200;
-				pointLight.position.z = 10000;
+				pointLight.position.set( 2000, 1200, 10000 );
 				scene.add( pointLight );
 
 				// Skybox
 
-				var shader = THREE.ShaderUtils.lib["cube"];
-				shader.uniforms["tCube"].texture = textureCube;
+				var shader = THREE.ShaderUtils.lib[ "cube" ];
+				shader.uniforms[ "tCube" ].texture = textureCube;
 
 				var material = new THREE.ShaderMaterial( {
 
@@ -210,10 +199,11 @@
 
 				//
 
-				webglRenderer = new THREE.AnaglyphWebGLRenderer();
-				webglRenderer.setSize( window.innerWidth, window.innerHeight );
-				webglRenderer.setFaceCulling( 0 );
-				container.appendChild( webglRenderer.domElement );
+				renderer = new THREE.AnaglyphWebGLRenderer();
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setFaceCulling( 0 );
+
+				container.appendChild( renderer.domElement );
 
 				if ( STATS_ENABLED ) {
 
@@ -607,18 +597,14 @@
 				camera.position.x = 1000 * Math.cos( timer );
 				camera.position.z = 1000 * Math.sin( timer );
 
-				webglRenderer.render( scene, camera );
+				camera.lookAt( scene.position );
+
+				renderer.render( scene, camera );
 
 				if ( STATS_ENABLED ) stats.update();
 
 			}
 
-			function log( text ) {
-
-				var e = document.getElementById("log");
-				e.innerHTML = text + "<br/>" + e.innerHTML;
-
-			}
 
 		</script>
 

examples/webgl_materials_cars_camaro.html

@@ -17,7 +17,7 @@
 			h1 { }
 			a { color:skyblue }
 			canvas { pointer-events:none; z-index:10; position:relative; }
-			#log { position:absolute; top:50px; text-align:left; display:block; z-index:100 }
+
 			#d { text-align:center; margin:1em 0 -2.5em 0; z-index:0; position:relative; display:block }
 			#buttons { margin:0.5em 0 0 0 }
 			button { font-family:georgia; border:0; background:#222; color:#fff; padding:0.2em 0.5em; cursor:pointer; border-radius:3px }
@@ -32,8 +32,6 @@
 			<div id="buttons"></div>
 		</div>
 
-		<div id="log"></div>
-
 		<script src="../build/Three.js"></script>
 
 		<script src="js/Detector.js"></script>
@@ -49,7 +47,7 @@
 
 			var container, stats;
 
-			var camera, scene, webglRenderer;
+			var camera, scene, renderer;
 
 			var lightMesh;
 
@@ -65,12 +63,11 @@
 
 			function init() {
 
-				container = document.createElement('div');
-				document.body.appendChild(container);
+				container = document.createElement( 'div' );
+				document.body.appendChild( container );
 
-				camera = new THREE.Camera( 70, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 100000 );
+				camera = new THREE.PerspectiveCamera( 70, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
 				camera.position.z = 1000;
-				camera.useTarget = true;
 
 				scene = new THREE.Scene();
 
@@ -80,36 +77,30 @@
 				scene.add( ambient );
 
 				directionalLight = new THREE.DirectionalLight( 0xffffff );
-				directionalLight.position.x = 1;
-				directionalLight.position.y = 1;
-				directionalLight.position.z = 0.5;
-				directionalLight.position.normalize();
+				directionalLight.position.set( 1, 1, 0.5 ).normalize();
 				scene.add( directionalLight );
 
 				pointLight = new THREE.PointLight( 0xffaa00 );
-				pointLight.position.x = 0;
-				pointLight.position.y = 0;
-				pointLight.position.z = 0;
+				pointLight.position.set( 0, 0, 0 );
 				scene.add( pointLight );
 
-
-				sphere = new THREE.SphereGeometry( 100, 16, 8, 1 );
+				sphere = new THREE.SphereGeometry( 100, 16, 8 );
 				lightMesh = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xffaa00 } ) );
-				lightMesh.scale.x = lightMesh.scale.y = lightMesh.scale.z = 0.05;
+				lightMesh.scale.set( 0.05, 0.05, 0.05 );
 				lightMesh.position = pointLight.position;
-				lightMesh.overdraw = true;
-				scene.add(lightMesh);
+				scene.add( lightMesh );
 
+				renderer = new THREE.WebGLRenderer();
+				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
+				renderer.setFaceCulling( 0 );
 
-				webglRenderer = new THREE.WebGLRenderer();
-				webglRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
-				webglRenderer.setFaceCulling( 0 );
-				container.appendChild( webglRenderer.domElement );
+				container.appendChild( renderer.domElement );
 
 				stats = new Stats();
 				stats.domElement.style.position = 'absolute';
 				stats.domElement.style.top = '0px';
 				stats.domElement.style.zIndex = 100;
+
 				container.appendChild( stats.domElement );
 
 				document.addEventListener('mousemove', onDocumentMouseMove, false);
@@ -203,7 +194,7 @@
 
 			}
 
-			// 
+			//
 
 			function animate() {
 
@@ -221,19 +212,15 @@
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
+				camera.lookAt( scene.position );
+
 				lightMesh.position.x = 1500 * Math.cos( timer );
 				lightMesh.position.z = 1500 * Math.sin( timer );
 
-				webglRenderer.render( scene, camera );
+				renderer.render( scene, camera );
 
 			}
 
-			function log(text) {
-
-				var e = document.getElementById("log");
-				e.innerHTML = text + "<br/>" + e.innerHTML;
-
-			}
 
 		</script>
 

examples/webgl_materials_cars_camaro_crosseyed.html

@@ -17,7 +17,7 @@
 			h1 { }
 			a { color:skyblue }
 			canvas { pointer-events:none; z-index:10; position:relative; }
-			#log { position:absolute; top:50px; text-align:left; display:block; z-index:100 }
+
 			#d { text-align:center; margin:1em 0 -2.5em 0; z-index:0; position:relative; display:block }
 			#buttons { margin:0.5em 0 0 0 }
 			button { font-family:georgia; border:0; background:#222; color:#fff; padding:0.2em 0.5em; cursor:pointer; border-radius:3px }
@@ -34,8 +34,6 @@
 			<div id="buttons"></div>
 		</div>
 
-		<div id="log"></div>
-
 		<script src="../build/Three.js"></script>
 
 		<script src="js/Detector.js"></script>
@@ -51,7 +49,7 @@
 
 			var container, stats;
 
-			var camera, scene, webglRenderer;
+			var camera, scene, renderer;
 
 			var lightMesh;
 
@@ -70,9 +68,10 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.Camera( 70, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 100000 );
+				camera = new THREE.PerspectiveCamera( 70, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 100000 );
 				camera.position.z = 1000;
-				camera.useTarget = true;
+
+				camera.target = new THREE.Vector3( 0, 0, 0 );
 
 				scene = new THREE.Scene();
 
@@ -82,16 +81,11 @@
 				scene.add( ambient );
 
 				directionalLight = new THREE.DirectionalLight( 0xffffff );
-				directionalLight.position.x = 1;
-				directionalLight.position.y = 1;
-				directionalLight.position.z = 0.5;
-				directionalLight.position.normalize();
+				directionalLight.position.set( 1, 1, 0.5 ).normalize();
 				scene.add( directionalLight );
 
 				pointLight = new THREE.PointLight( 0xffaa00 );
-				pointLight.position.x = 0;
-				pointLight.position.y = 0;
-				pointLight.position.z = 0;
+				pointLight.position.set( 0, 0, 0 );
 				scene.add( pointLight );
 
 
@@ -99,15 +93,15 @@
 				lightMesh = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xffaa00 } ) );
 				lightMesh.scale.x = lightMesh.scale.y = lightMesh.scale.z = 0.05;
 				lightMesh.position = pointLight.position;
-				lightMesh.overdraw = true;
-				scene.add(lightMesh);
+				scene.add( lightMesh );
 
 
-				webglRenderer = new THREE.CrosseyedWebGLRenderer( { separation: 20, antialias: true } );
-				webglRenderer.setSize( window.innerWidth, window.innerHeight );
-				container.appendChild( webglRenderer.domElement );
+				renderer = new THREE.CrosseyedWebGLRenderer( { separation: 20, antialias: true } );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setFaceCulling( 0 );
+
+				container.appendChild( renderer.domElement );
 
-				webglRenderer.setFaceCulling( 0 );
 
 				stats = new Stats();
 				stats.domElement.style.position = 'absolute';
@@ -210,20 +204,20 @@
 			function onKeyDown ( event ) {
 
 				switch( event.keyCode ) {
-				
+
 					/* O */
-					case 79: webglRenderer.separation -= 0.5; break;
-					
+					case 79: renderer.separation -= 0.5; break;
+
 					/* P */
-					case 80: webglRenderer.separation += 0.5; break;
+					case 80: renderer.separation += 0.5; break;
 
 				}
 
-				console.log( webglRenderer.separation );
+				console.log( renderer.separation );
 
 			};
 
-			// 
+			//
 
 			function animate() {
 
@@ -241,19 +235,15 @@
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
+				camera.lookAt( camera.target );
+
 				lightMesh.position.x = 1500 * Math.cos( timer );
 				lightMesh.position.z = 1500 * Math.sin( timer );
 
-				webglRenderer.render( scene, camera );
+				renderer.render( scene, camera );
 
 			}
 
-			function log(text) {
-
-				var e = document.getElementById("log");
-				e.innerHTML = text + "<br/>" + e.innerHTML;
-
-			}
 
 		</script>
 

examples/webgl_materials_cubemap.html

@@ -48,7 +48,7 @@
 			var container, stats;
 
 			var camera, scene, renderer;
-			var cameraCube, sceneCube;
+			var cameraCube, sceneCube, cubeTarget;
 
 			var mesh, zmesh, lightMesh, geometry;
 
@@ -72,12 +72,12 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.Camera( 50, window.innerWidth / window.innerHeight, 1, 5000 );
+				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 5000 );
 				camera.position.z = 2000;
-				camera.useTarget = true;
 
-				cameraCube = new THREE.Camera( 50, window.innerWidth / window.innerHeight, 1, 100 );
-				cameraCube.useTarget = true;
+				cameraCube = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 100 );
+
+				cubeTarget = new THREE.Vector3( 0, 0, 0 );
 
 				scene = new THREE.Scene();
 				sceneCube = new THREE.Scene();
@@ -138,12 +138,16 @@
 				renderer.autoClear = false;
 				container.appendChild( renderer.domElement );
 
+				//
+
 				stats = new Stats();
 				stats.domElement.style.position = 'absolute';
 				stats.domElement.style.top = '0px';
 				stats.domElement.style.zIndex = 100;
 				container.appendChild( stats.domElement );
 
+				//
+
 				loader = new THREE.BinaryLoader( true );
 				document.body.appendChild( loader.statusDomElement );
 
@@ -201,10 +205,13 @@
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
-				cameraCube.target.position.x = - camera.position.x;
-				cameraCube.target.position.y = - camera.position.y;
-				cameraCube.target.position.z = - camera.position.z;
+				camera.lookAt( scene.position );
+
+				cubeTarget.x = - camera.position.x;
+				cubeTarget.y = - camera.position.y;
+				cubeTarget.z = - camera.position.z;
 
+				cameraCube.lookAt( cubeTarget );
 
 				lightMesh.position.x = 1500 * Math.cos( timer );
 				lightMesh.position.z = 1500 * Math.sin( timer );

examples/webgl_materials_cubemap_balls_reflection.html

@@ -46,8 +46,8 @@
 
 			var container, timer;
 
-			var camera, scene, webglRenderer;
-			var cameraCube, sceneCube;
+			var camera, scene, renderer;
+			var cameraCube, sceneCube, cubeTarget;
 
 			var mesh, zmesh, lightMesh, geometry;
 			var spheres = [];
@@ -70,12 +70,12 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.Camera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
+				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
 				camera.position.z = 3200;
-				camera.useTarget = true;
 
-				cameraCube = new THREE.Camera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
-				cameraCube.useTarget = true;
+				cameraCube = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
+
+				cubeTarget = new THREE.Vector3( 0, 0, 0 );
 
 				scene = new THREE.Scene();
 				sceneCube = new THREE.Scene();
@@ -96,10 +96,13 @@
 				for ( var i = 0; i < 500; i ++ ) {
 
 					var mesh = new THREE.Mesh( geometry, material );
+
 					mesh.position.x = Math.random() * 10000 - 5000;
 					mesh.position.y = Math.random() * 10000 - 5000;
 					mesh.position.z = Math.random() * 10000 - 5000;
+
 					mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 3 + 1;
+
 					scene.add( mesh );
 
 					spheres.push( mesh );
@@ -125,14 +128,14 @@
 
 				//
 
-				webglRenderer = new THREE.WebGLRenderer();
-				webglRenderer.setSize( window.innerWidth, window.innerHeight );
-				webglRenderer.autoClear = false;
-				container.appendChild( webglRenderer.domElement );
+				renderer = new THREE.WebGLRenderer();
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.autoClear = false;
+				container.appendChild( renderer.domElement );
 
 			}
 
-			function onDocumentMouseMove(event) {
+			function onDocumentMouseMove( event ) {
 
 				mouseX = ( event.clientX - windowHalfX ) * 10;
 				mouseY = ( event.clientY - windowHalfY ) * 10;
@@ -156,9 +159,13 @@
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
-				cameraCube.target.position.x = - camera.position.x;
-				cameraCube.target.position.y = - camera.position.y;
-				cameraCube.target.position.z = - camera.position.z;
+				camera.lookAt( scene.position );
+
+				cubeTarget.x = - camera.position.x;
+				cubeTarget.y = - camera.position.y;
+				cubeTarget.z = - camera.position.z;
+
+				cameraCube.lookAt( cubeTarget );
 
 				for ( var i = 0, il = spheres.length; i < il; i ++ ) {
 
@@ -169,9 +176,9 @@
 
 				}
 
-				webglRenderer.clear();
-				webglRenderer.render( sceneCube, cameraCube );
-				webglRenderer.render( scene, camera );
+				renderer.clear();
+				renderer.render( sceneCube, cameraCube );
+				renderer.render( scene, camera );
 
 			}
 

examples/webgl_materials_cubemap_balls_reflection_anaglyph.html

@@ -46,7 +46,7 @@
 
 			var container, timer;
 
-			var camera, scene, webglRenderer;
+			var camera, scene, renderer;
 
 			var mesh, zmesh, lightMesh, geometry;
 			var spheres = [];
@@ -69,9 +69,8 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.Camera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
+				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
 				camera.position.z = 3200;
-				camera.useTarget = true;
 
 				scene = new THREE.Scene();
 
@@ -91,10 +90,13 @@
 				for ( var i = 0; i < 500; i ++ ) {
 
 					var mesh = new THREE.Mesh( geometry, material );
+
 					mesh.position.x = Math.random() * 10000 - 5000;
 					mesh.position.y = Math.random() * 10000 - 5000;
 					mesh.position.z = Math.random() * 10000 - 5000;
+
 					mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 3 + 1;
+
 					scene.add( mesh );
 
 					spheres.push( mesh );
@@ -119,9 +121,9 @@
 
 				//
 
-				webglRenderer = new THREE.AnaglyphWebGLRenderer();
-				webglRenderer.setSize( window.innerWidth, window.innerHeight );
-				container.appendChild( webglRenderer.domElement );
+				renderer = new THREE.AnaglyphWebGLRenderer();
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				container.appendChild( renderer.domElement );
 
 			}
 
@@ -149,6 +151,8 @@
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
+				camera.lookAt( scene.position );
+
 				for ( var i = 0, il = spheres.length; i < il; i ++ ) {
 
 					var sphere = spheres[ i ];
@@ -158,7 +162,7 @@
 
 				}
 
-				webglRenderer.render( scene, camera );
+				renderer.render( scene, camera );
 
 			}
 

examples/webgl_materials_cubemap_balls_refraction.html

@@ -46,8 +46,8 @@
 
 			var container, timer;
 
-			var camera, scene, webglRenderer;
-			var cameraCube, sceneCube;
+			var camera, scene, renderer;
+			var cameraCube, sceneCube, cubeTarget;
 
 			var mesh, zmesh, lightMesh, geometry;
 			var spheres = [];
@@ -66,15 +66,15 @@
 
 			function init() {
 
-				container = document.createElement('div');
-				document.body.appendChild(container);
+				container = document.createElement( 'div' );
+				document.body.appendChild( container );
 
-				camera = new THREE.Camera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
+				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
 				camera.position.z = 3200;
-				camera.useTarget = true;
 
-				cameraCube = new THREE.Camera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
-				cameraCube.useTarget = true;
+				cameraCube = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
+
+				cubeTarget = new THREE.Vector3( 0, 0, 0 );
 
 				scene = new THREE.Scene();
 				sceneCube = new THREE.Scene();
@@ -95,10 +95,13 @@
 				for ( var i = 0; i < 500; i ++ ) {
 
 					var mesh = new THREE.Mesh( geometry, material );
+
 					mesh.position.x = Math.random() * 10000 - 5000;
 					mesh.position.y = Math.random() * 10000 - 5000;
 					mesh.position.z = Math.random() * 10000 - 5000;
+
 					mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 3 + 1;
+
 					scene.add( mesh );
 
 					spheres.push( mesh );
@@ -124,10 +127,10 @@
 
 				//
 
-				webglRenderer = new THREE.WebGLRenderer();
-				webglRenderer.setSize( window.innerWidth, window.innerHeight );
-				webglRenderer.autoClear = false;
-				container.appendChild( webglRenderer.domElement );
+				renderer = new THREE.WebGLRenderer();
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.autoClear = false;
+				container.appendChild( renderer.domElement );
 
 			}
 
@@ -155,9 +158,13 @@
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
-				cameraCube.target.position.x = - camera.position.x;
-				cameraCube.target.position.y = - camera.position.y;
-				cameraCube.target.position.z = - camera.position.z;
+				camera.lookAt( scene.position );
+
+				cubeTarget.x = - camera.position.x;
+				cubeTarget.y = - camera.position.y;
+				cubeTarget.z = - camera.position.z;
+
+				cameraCube.lookAt( cubeTarget );
 
 				for ( var i = 0, il = spheres.length; i < il; i ++ ) {
 
@@ -168,9 +175,9 @@
 
 				}
 
-				webglRenderer.clear();
-				webglRenderer.render( sceneCube, cameraCube );
-				webglRenderer.render( scene, camera );
+				renderer.clear();
+				renderer.render( sceneCube, cameraCube );
+				renderer.render( scene, camera );
 
 			}
 

examples/webgl_materials_cubemap_balls_refraction_crosseyed.html

@@ -49,7 +49,7 @@
 
 			var container, timer;
 
-			var camera, scene, webglRenderer;
+			var camera, scene, renderer;
 
 			var mesh, zmesh, lightMesh, geometry;
 			var spheres = [];
@@ -71,9 +71,10 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.Camera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
+				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
 				camera.position.z = 3200;
-				camera.useTarget = true;
+
+				camera.target = new THREE.Vector3( 0, 0, 0 );
 
 				scene = new THREE.Scene();
 
@@ -121,9 +122,9 @@
 
 				//
 
-				webglRenderer = new THREE.CrosseyedWebGLRenderer( { separation: 90 } );
-				webglRenderer.setSize( window.innerWidth, window.innerHeight );
-				container.appendChild( webglRenderer.domElement );
+				renderer = new THREE.CrosseyedWebGLRenderer( { separation: 90 } );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				container.appendChild( renderer.domElement );
 
 				document.addEventListener( 'keydown', onKeyDown, false );
 
@@ -141,14 +142,14 @@
 				switch( event.keyCode ) {
 
 					/* O */
-					case 79: webglRenderer.separation -= 0.5; break;
+					case 79: renderer.separation -= 0.5; break;
 
 					/* P */
-					case 80: webglRenderer.separation += 0.5; break;
+					case 80: renderer.separation += 0.5; break;
 
 				}
 
-				console.log( webglRenderer.separation );
+				console.log( renderer.separation );
 
 			};
 
@@ -178,7 +179,7 @@
 
 				}
 
-				webglRenderer.render( scene, camera );
+				renderer.render( scene, camera );
 
 			}
 

examples/webgl_materials_cubemap_escher.html

@@ -44,7 +44,7 @@
 
 			var container, stats;
 
-			var camera, scene, webglRenderer;
+			var camera, scene, renderer;
 
 			var mesh, zmesh, lightMesh, geometry;
 
@@ -63,12 +63,11 @@
 
 			function init() {
 
-				container = document.createElement('div');
-				document.body.appendChild(container);
+				container = document.createElement( 'div' );
+				document.body.appendChild( container );
 
-				camera = new THREE.Camera( 75, window.innerWidth / window.innerHeight, 1, 100000 );
+				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 100000 );
 				camera.position.z = 3200;
-				camera.useTarget = true;
 
 				scene = new THREE.Scene();
 
@@ -105,9 +104,9 @@
 
 				//
 
-				webglRenderer = new THREE.WebGLRenderer();
-				webglRenderer.setSize( window.innerWidth, window.innerHeight );
-				container.appendChild( webglRenderer.domElement );
+				renderer = new THREE.WebGLRenderer();
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				container.appendChild( renderer.domElement );
 
 				if ( statsEnabled ) {
 
@@ -144,7 +143,9 @@
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
-				webglRenderer.render( scene, camera );
+				camera.lookAt( scene.position );
+
+				renderer.render( scene, camera );
 
 			}
 

examples/webgl_materials_cubemap_refraction.html

@@ -48,8 +48,8 @@
 
 			var container, stats;
 
-			var camera, scene, webglRenderer;
-			var cameraCube, sceneCube;
+			var camera, scene, renderer;
+			var cameraCube, sceneCube, cubeTarget;
 
 			var mesh, zmesh, lightMesh, geometry;
 
@@ -70,12 +70,12 @@
 				container = document.createElement('div');
 				document.body.appendChild(container);
 
-				camera = new THREE.Camera( 50, window.innerWidth / window.innerHeight, 1, 100000 );
+				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 100000 );
 				camera.position.z = 2000;
-				camera.useTarget = true;
 
-				cameraCube = new THREE.Camera( 50, window.innerWidth / window.innerHeight, 1, 100000 );
-				cameraCube.useTarget = true;
+				cameraCube = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 100000 );
+
+				cubeTarget = new THREE.Vector3( 0, 0, 0 );
 
 				scene = new THREE.Scene();
 				sceneCube = new THREE.Scene();
@@ -94,7 +94,7 @@
 				lightMesh = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color:0xffaa00 } ) );
 				lightMesh.position = pointLight.position;
 				lightMesh.scale.x = lightMesh.scale.y = lightMesh.scale.z = 0.05;
-				scene.add(lightMesh);
+				scene.add( lightMesh );
 
 				// material samples
 
@@ -128,10 +128,10 @@
 
 				//
 
-				webglRenderer = new THREE.WebGLRenderer();
-				webglRenderer.setSize( window.innerWidth, window.innerHeight );
-				webglRenderer.autoClear = false;
-				container.appendChild( webglRenderer.domElement );
+				renderer = new THREE.WebGLRenderer();
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.autoClear = false;
+				container.appendChild( renderer.domElement );
 
 				stats = new Stats();
 				stats.domElement.style.position = 'absolute';
@@ -198,17 +198,20 @@
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
-				cameraCube.target.position.x = - camera.position.x;
-				cameraCube.target.position.y = - camera.position.y;
-				cameraCube.target.position.z = - camera.position.z;
+				camera.lookAt( scene.position );
+
+				cubeTarget.x = - camera.position.x;
+				cubeTarget.y = - camera.position.y;
+				cubeTarget.z = - camera.position.z;
 
+				cameraCube.lookAt( cubeTarget );
 
 				lightMesh.position.x = 1500 * Math.cos( timer );
 				lightMesh.position.z = 1500 * Math.sin( timer );
 
-				webglRenderer.clear();
-				webglRenderer.render( sceneCube, cameraCube );
-				webglRenderer.render( scene, camera );
+				renderer.clear();
+				renderer.render( sceneCube, cameraCube );
+				renderer.render( scene, camera );
 
 			}
 

examples/webgl_materials_grass.html

@@ -35,10 +35,8 @@
 
 			function init() {
 
-				camera = new THREE.Camera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
-				camera.position.y = 75;
-				camera.position.z = 100;
-				camera.useTarget = true;
+				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera.position.set( 0, 75, 100 );
 
 				scene = new THREE.Scene();
 
@@ -50,8 +48,10 @@
 
 					mesh = levels[ i ] = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { map: new THREE.Texture( generateTextureLevel( bitmap ) ), transparent: true, depthTest: false } ) );
 					mesh.materials[0].map.needsUpdate = true;
+
 					mesh.rotation.x = - 90 * ( Math.PI / 180 );
 					mesh.position.y = i * 0.25;
+
 					scene.add( mesh );
 
 				}
@@ -118,6 +118,8 @@
 				camera.position.x = 80 * Math.cos( time );
 				camera.position.z = 80 * Math.sin( time );
 
+				camera.lookAt( scene.position );
+
 				for ( var i = 0, l = levels.length; i < l; i ++ ) {
 
 					mesh = levels[ i ];

examples/webgl_materials_normalmap.html

@@ -85,7 +85,7 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.OrthoCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
+				camera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
 				camera.position.z = 6200;
 
 				scene = new THREE.Scene();
@@ -100,10 +100,7 @@
 				scene.add( pointLight );
 
 				directionalLight = new THREE.DirectionalLight( 0xaaaa88 );
-				directionalLight.position.x = 1;
-				directionalLight.position.y = 1;
-				directionalLight.position.z = 0.5;
-				directionalLight.position.normalize();
+				directionalLight.position.set( 1, 1, 0.5 ).normalize();
 				scene.add( directionalLight );
 
 				// light representation
@@ -112,7 +109,7 @@
 				lightMesh = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xffaa00 } ) );
 				lightMesh.position = pointLight.position;
 				lightMesh.scale.x = lightMesh.scale.y = lightMesh.scale.z = 0.05;
-				scene.add(lightMesh);
+				scene.add( lightMesh );
 
 				// common material parameters
 
@@ -145,15 +142,21 @@
 
 				var material2 = new THREE.MeshPhongMaterial( { color: diffuse, specular: specular, ambient: ambient, shininess: shininess } );
 
+				//
+
 				loader = new THREE.BinaryLoader( true );
 				document.body.appendChild( loader.statusDomElement );
 
 				loader.load( { model: "obj/ninja/NinjaLo_bin.js", callback: function( geometry ) { createScene( geometry, scale, material1, material2 ) } } );
 
+				//
+
 				renderer = new THREE.WebGLRenderer();
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 
+				//
+
 				var description = "normal + ao" + ( renderer.supportsVertexTextures() ? " + displacement" : " + <strike>displacement</strike>" );
 				document.getElementById( "description" ).innerHTML = description;
 				document.getElementById( "vt" ).style.display = renderer.supportsVertexTextures() ? "none" : "block";

examples/webgl_materials_normalmap2.html

@@ -64,7 +64,7 @@
 
 			var container, stats, loader;
 
-			var camera, scene, webglRenderer;
+			var camera, scene, renderer;
 
 			var mesh, zmesh, lightMesh, geometry;
 			var mesh1;
@@ -85,7 +85,7 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.Camera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.z = 900;
 
 				scene = new THREE.Scene();
@@ -101,15 +101,12 @@
 				scene.add( pointLight );
 
 				directionalLight = new THREE.DirectionalLight( 0xffffff );
-				directionalLight.position.x = 1;
-				directionalLight.position.y = 1;
-				directionalLight.position.z = - 1;
-				directionalLight.position.normalize();
+				directionalLight.position.set( 1, 1, -1 ).normalize();
 				scene.add( directionalLight );
 
 				// material parameters
 
-				var ambient = 0x444444, diffuse = 0x888888, specular = 0x080810, shininess = 2;
+				var ambient = 0x111111, diffuse = 0xaaaaaa, specular = 0x080810, shininess = 2;
 
 				var shader = THREE.ShaderUtils.lib[ "normal" ];
 				var uniforms = THREE.UniformsUtils.clone( shader.uniforms );
@@ -137,9 +134,9 @@
 
 				loader.load( { model: "obj/leeperrysmith/LeePerrySmith.js", callback: function( geometry ) { createScene( geometry, 100, material ) } } );
 
-				webglRenderer = new THREE.WebGLRenderer();
-				webglRenderer.setSize( window.innerWidth, window.innerHeight );
-				container.appendChild( webglRenderer.domElement );
+				renderer = new THREE.WebGLRenderer();
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				container.appendChild( renderer.domElement );
 
 				if ( statsEnabled ) {
 
@@ -160,8 +157,10 @@
 				geometry.computeTangents();
 
 				mesh1 = new THREE.Mesh( geometry, material );
+
 				mesh1.position.y = - 50;
 				mesh1.scale.x = mesh1.scale.y = mesh1.scale.z = scale;
+
 				scene.add( mesh1 );
 
 				loader.statusDomElement.style.display = "none";
@@ -197,7 +196,7 @@
 
 				}
 
-				webglRenderer.render( scene, camera );
+				renderer.render( scene, camera );
 
 			}
 

examples/webgl_materials_shaders.html

@@ -93,12 +93,11 @@
 
 			function init() {
 
-				container = document.createElement('div');
-				document.body.appendChild(container);
+				container = document.createElement( 'div' );
+				document.body.appendChild( container );
 
-				camera = new THREE.Camera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 100000 );
+				camera = new THREE.PerspectiveCamera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 100000 );
 				camera.position.z = 1000;
-				camera.useTarget = true;
 
 				scene = new THREE.Scene();
 
@@ -108,8 +107,7 @@
 				scene.add( ambient );
 
 				directionalLight = new THREE.DirectionalLight( 0xffffff );
-				directionalLight.position.set( 1, 1, 2 );
-				directionalLight.position.normalize();
+				directionalLight.position.set( 1, 1, 2 ).normalize();
 				scene.add( directionalLight );
 
 				pointLight = new THREE.PointLight( 0xffffff );
@@ -234,6 +232,8 @@
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
+				camera.lookAt( scene.position );
+
 				lightMesh.position.x = 700 * Math.cos( timer );
 				lightMesh.position.z = 700 * Math.sin( timer );
 

examples/webgl_materials_shaders_fresnel.html

@@ -45,7 +45,7 @@
 
 			var container, timer;
 
-			var camera, scene, webglRenderer;
+			var camera, scene, renderer;
 			var cameraCube, sceneCube;
 
 			var mesh, zmesh, lightMesh, geometry;
@@ -65,15 +65,15 @@
 
 			function init() {
 
-				container = document.createElement('div');
-				document.body.appendChild(container);
+				container = document.createElement( 'div' );
+				document.body.appendChild( container );
 
-				camera = new THREE.Camera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
+				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
 				camera.position.z = 3200;
-				camera.useTarget = true;
 
-				cameraCube = new THREE.Camera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
-				cameraCube.useTarget = true;
+				cameraCube = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
+
+				cubeTarget = new THREE.Vector3( 0, 0, 0 );
 
 				scene = new THREE.Scene();
 				sceneCube = new THREE.Scene();
@@ -91,10 +91,10 @@
 
 				var textureCube = THREE.ImageUtils.loadTextureCube( urls );
 
-				var shader = THREE.ShaderUtils.lib["fresnel"];
+				var shader = THREE.ShaderUtils.lib[ "fresnel" ];
 				var uniforms = THREE.UniformsUtils.clone( shader.uniforms );
 
-				uniforms["tCube"].texture = textureCube;
+				uniforms[ "tCube" ].texture = textureCube;
 
 				var parameters = { fragmentShader: shader.fragmentShader, vertexShader: shader.vertexShader, uniforms: uniforms };
 				var material = new THREE.ShaderMaterial( parameters );
@@ -102,10 +102,13 @@
 				for ( var i = 0; i < 500; i ++ ) {
 
 					var mesh = new THREE.Mesh( geometry, material );
+
 					mesh.position.x = Math.random() * 10000 - 5000;
 					mesh.position.y = Math.random() * 10000 - 5000;
 					mesh.position.z = Math.random() * 10000 - 5000;
+
 					mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 3 + 1;
+
 					scene.add( mesh );
 
 					spheres.push( mesh );
@@ -132,10 +135,10 @@
 
 				//
 
-				webglRenderer = new THREE.WebGLRenderer( { antialias: false } );
-				webglRenderer.setSize( window.innerWidth, window.innerHeight );
-				webglRenderer.autoClear = false;
-				container.appendChild( webglRenderer.domElement );
+				renderer = new THREE.WebGLRenderer( { antialias: false } );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.autoClear = false;
+				container.appendChild( renderer.domElement );
 
 			}
 
@@ -163,9 +166,13 @@
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
-				cameraCube.target.position.x = - camera.position.x;
-				cameraCube.target.position.y = - camera.position.y;
-				cameraCube.target.position.z = - camera.position.z;
+				camera.lookAt( scene.position );
+
+				cubeTarget.x = - camera.position.x;
+				cubeTarget.y = - camera.position.y;
+				cubeTarget.z = - camera.position.z;
+
+				cameraCube.lookAt( cubeTarget );
 
 				for ( var i = 0, il = spheres.length; i < il; i ++ ) {
 
@@ -176,9 +183,9 @@
 
 				}
 
-				webglRenderer.clear();
-				webglRenderer.render( sceneCube, cameraCube );
-				webglRenderer.render( scene, camera );
+				renderer.clear();
+				renderer.render( sceneCube, cameraCube );
+				renderer.render( scene, camera );
 
 			}
 

examples/webgl_materials_skin.html

@@ -91,7 +91,7 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.Camera( 35, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.z = 900;
 
 				scene = new THREE.Scene();
@@ -103,8 +103,7 @@
 
 
 				directionalLight = new THREE.DirectionalLight( 0xffeedd, 1 );
-				directionalLight.position.set( 1, -1, 1 );
-				directionalLight.position.normalize();
+				directionalLight.position.set( 1, -1, 1 ).normalize();
 				scene.add( directionalLight );
 
 				// MATERIALS

examples/webgl_materials_texture_filters.html

@@ -89,12 +89,11 @@
 
 			function init() {
 
-				container = document.createElement('div');
-				document.body.appendChild(container);
+				container = document.createElement( 'div' );
+				document.body.appendChild( container );
 
-				camera = new THREE.Camera( 35, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 5000 );
+				camera = new THREE.PerspectiveCamera( 35, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 5000 );
 				camera.position.z = 1500;
-				camera.useTarget = true;
 
 				scene = new THREE.Scene();
 				scene2 = new THREE.Scene();
@@ -241,6 +240,8 @@
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.y += ( - ( mouseY - 200) - camera.position.y ) * .05;
 
+				camera.lookAt( scene.position );
+
 				renderer.enableScissorTest( false );
 				renderer.clear();
 				renderer.enableScissorTest( true );

examples/webgl_materials_video.html

@@ -86,18 +86,16 @@
 
 			function init() {
 
-				container = document.createElement('div');
+				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.Camera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.z = 500;
-				camera.useTarget = true;
 
 				scene = new THREE.Scene();
 
 				var light = new THREE.DirectionalLight( 0xffffff );
-				light.position.set( 0.5, 1, 1 );
-				light.position.normalize();
+				light.position.set( 0.5, 1, 1 ).normalize();
 				scene.add( light );
 
 				renderer = new THREE.WebGLRenderer( { antialias: false } );
@@ -233,6 +231,8 @@
 				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
 				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
 
+				camera.lookAt( scene.position );
+
 				if ( video.readyState === video.HAVE_ENOUGH_DATA ) {
 
 					if ( texture ) texture.needsUpdate = true;

examples/webgl_morphtargets.html

@@ -94,9 +94,8 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.Camera( 45, window.innerWidth / window.innerHeight, 1, 15000 );
+				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 15000 );
 				camera.position.z = 500;
-				camera.useTarget = true;
 
 
 				scene = new THREE.Scene();
@@ -173,14 +172,9 @@
 				//camera.position.x += ( mouseX - camera.position.x ) * .005;
 				camera.position.y += ( - mouseY - camera.position.y ) * .01;
 
-				renderer.render( scene, camera );
-
-			}
+				camera.lookAt( scene.position );
 
-			function log( text ) {
-
-				var e = document.getElementById("log");
-				e.innerHTML = text + "<br/>" + e.innerHTML;
+				renderer.render( scene, camera );
 
 			}
 

examples/webgl_morphtargets_horse.html

@@ -42,25 +42,23 @@
 				info.innerHTML = '<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> webgl - morph targets - horse. model by <a href="http://mirada.com/">mirada</a> from <a href="http://ro.me">rome</a>';
 				container.appendChild( info );
 
-				camera = new THREE.Camera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
+				//
+
+				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.y = 300;
-				camera.useTarget = true;
-				camera.target.position.y = 150;
+
+				camera.target = new THREE.Vector3( 0, 150, 0 );
 
 				scene = new THREE.Scene();
 
+				//
+
 				var light = new THREE.DirectionalLight( 0xefefff, 2 );
-				light.position.x = 1;
-				light.position.y = 1;
-				light.position.z = 1;
-				light.position.normalize();
+				light.position.set( 1, 1, 1 ).normalize();
 				scene.add( light );
 
 				var light = new THREE.DirectionalLight( 0xffefef, 2 );
-				light.position.x = - 1;
-				light.position.y = - 1;
-				light.position.z = - 1;
-				light.position.normalize();
+				light.position.set( -1, -1, -1 ).normalize();
 				scene.add( light );
 
 				var loader = new THREE.JSONLoader( true );
@@ -72,12 +70,16 @@
 
 				} } );
 
+				//
+
 				renderer = new THREE.WebGLRenderer();
 				renderer.sortObjects = false;
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				container.appendChild(renderer.domElement);
 
+				//
+
 				stats = new Stats();
 				stats.domElement.style.position = 'absolute';
 				stats.domElement.style.top = '0px';
@@ -106,9 +108,12 @@
 			function render() {
 
 				theta += 0.2;
+
 				camera.position.x = radius * Math.sin( theta * Math.PI / 360 );
 				camera.position.z = radius * Math.cos( theta * Math.PI / 360 );
 
+				camera.lookAt( camera.target );
+
 				if ( mesh ) {
 
 					// Alternate morph targets

src/extras/renderers/AnaglyphWebGLRenderer.js

@@ -10,19 +10,23 @@ if ( THREE.WebGLRenderer ) {
 		THREE.WebGLRenderer.call( this, parameters );
 
 		var _this = this, _setSize = this.setSize, _render = this.render;
-		var _cameraL = new THREE.Camera(), _cameraR = new THREE.Camera();
+
+		var _cameraL = new THREE.PerspectiveCamera(),
+			_cameraR = new THREE.PerspectiveCamera();
+
 		var eyeRight = new THREE.Matrix4(),
 			eyeLeft = new THREE.Matrix4(),
 			focalLength = 125,
 			aspect, near, fov;
 
-		_cameraL.useTarget = _cameraR.useTarget = false;
 		_cameraL.matrixAutoUpdate = _cameraR.matrixAutoUpdate = false;
 
 		var _params = { minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter, format: THREE.RGBAFormat };
-		var _renderTargetL = new THREE.WebGLRenderTarget( 512, 512, _params ), _renderTargetR = new THREE.WebGLRenderTarget( 512, 512, _params );
 
-		var _camera = new THREE.Camera( 53, 1, 1, 10000 );
+		var _renderTargetL = new THREE.WebGLRenderTarget( 512, 512, _params ),
+			_renderTargetR = new THREE.WebGLRenderTarget( 512, 512, _params );
+
+		var _camera = new THREE.PerspectiveCamera( 53, 1, 1, 10000 );
 		_camera.position.z = 2;
 
 		_material = new THREE.ShaderMaterial( {

src/extras/renderers/CrosseyedWebGLRenderer.js

@@ -14,11 +14,11 @@ if ( THREE.WebGLRenderer ) {
 
 		var _width, _height;
 
-		var _cameraL = new THREE.Camera();
-		_cameraL.useTarget = true;
+		var _cameraL = new THREE.PerspectiveCamera();
+		_cameraL.target = new THREE.Vector3( 0, 0, 0 );
 
-		var _cameraR = new THREE.Camera();
-		_cameraR.useTarget = true;
+		var _cameraR = new THREE.PerspectiveCamera();
+		_cameraR.target = new THREE.Vector3( 0, 0, 0 );
 
 		_this.separation = 10;
 		if ( parameters && parameters.separation !== undefined ) _this.separation = parameters.separation;
@@ -47,14 +47,16 @@ if ( THREE.WebGLRenderer ) {
 			_cameraL.updateProjectionMatrix();
 
 			_cameraL.position.copy( camera.position );
-			_cameraL.target.position.copy( camera.target.position );
+			_cameraL.target.copy( camera.target );
 			_cameraL.translateX( _this.separation );
+			_cameraL.lookAt( _cameraL.target );
 
 			_cameraR.projectionMatrix = _cameraL.projectionMatrix;
 
 			_cameraR.position.copy( camera.position );
-			_cameraR.target.position.copy( camera.target.position );
+			_cameraR.target.copy( camera.target );
 			_cameraR.translateX( - _this.separation );
+			_cameraR.lookAt( _cameraR.target );
 
 			this.setViewport( 0, 0, _width, _height );
 			_render.call( _this, scene, _cameraL );