More examples resizing handling. Also fixed typo in flag name and cleaned...

More examples resizing handling. Also fixed typo in flag name and cleaned whitespace in CombinedCamera.

build/Three.js

@@ -570,10 +570,10 @@ THREE.CubeCamera=function(a,b,c){THREE.Object3D.call(this);var d=new THREE.Persp
 1,a,b);h.up.set(0,-1,0);h.lookAt(new THREE.Vector3(0,0,1));this.add(h);var i=new THREE.PerspectiveCamera(90,1,a,b);i.up.set(0,-1,0);i.lookAt(new THREE.Vector3(0,0,-1));this.add(i);this.renderTarget=new THREE.WebGLRenderTargetCube(c,c,{format:THREE.RGBFormat,magFilter:THREE.LinearFilter,minFilter:THREE.LinearFilter});this.updateCubeMap=function(a,b){var c=this.renderTarget,m=c.generateMipmaps;c.generateMipmaps=false;c.activeCubeFace=0;a.render(b,d,c);c.activeCubeFace=1;a.render(b,e,c);c.activeCubeFace=
 2;a.render(b,f,c);c.activeCubeFace=3;a.render(b,g,c);c.activeCubeFace=4;a.render(b,h,c);c.generateMipmaps=m;c.activeCubeFace=5;a.render(b,i,c)}};THREE.CubeCamera.prototype=new THREE.Object3D;THREE.CubeCamera.prototype.constructor=THREE.CubeCamera;
 THREE.CombinedCamera=function(a,b,c,d,e,f,g){THREE.Camera.call(this);this.fov=c;this.left=-a/2;this.right=a/2;this.top=b/2;this.bottom=-b/2;this.cameraO=new THREE.OrthographicCamera(a/-2,a/2,b/2,b/-2,f,g);this.cameraP=new THREE.PerspectiveCamera(c,a/b,d,e);this.zoom=1;this.toPerspective()};THREE.CombinedCamera.prototype=new THREE.Camera;THREE.CombinedCamera.prototype.constructor=THREE.CombinedCamera;
-THREE.CombinedCamera.prototype.toPerspective=function(){this.near=this.cameraP.near;this.far=this.cameraP.far;this.cameraP.fov=this.fov/this.zoom;this.cameraP.updateProjectionMatrix();this.projectionMatrix=this.cameraP.projectionMatrix;this.inPersepectiveMode=true;this.inOrthographicMode=false};
-THREE.CombinedCamera.prototype.toOrthographic=function(){var a=this.cameraP.aspect,b=(this.cameraP.near+this.cameraP.far)/2,b=Math.tan(this.fov/2)*b,a=2*b*a/2,b=b/this.zoom,a=a/this.zoom;this.cameraO.left=-a;this.cameraO.right=a;this.cameraO.top=b;this.cameraO.bottom=-b;this.cameraO.updateProjectionMatrix();this.near=this.cameraO.near;this.far=this.cameraO.far;this.projectionMatrix=this.cameraO.projectionMatrix;this.inPersepectiveMode=false;this.inOrthographicMode=true};
-THREE.CombinedCamera.prototype.setSize=function(a,b){this.cameraP.aspect=a/b;this.left=-a/2;this.right=a/2;this.top=b/2;this.bottom=-b/2};THREE.CombinedCamera.prototype.setFov=function(a){this.fov=a;this.inPersepectiveMode?this.toPerspective():this.toOrthographic()};THREE.CombinedCamera.prototype.updateProjectionMatrix=function(){if(this.inPersepectiveMode)this.toPerspective();else{this.toPerspective();this.toOrthographic()}};
-THREE.CombinedCamera.prototype.setLens=function(a,b){var c=2*Math.atan((b!==void 0?b:24)/(a*2))*(180/Math.PI);this.setFov(c);return c};THREE.CombinedCamera.prototype.setZoom=function(a){this.zoom=a;this.inPersepectiveMode?this.toPerspective():this.toOrthographic()};THREE.CombinedCamera.prototype.toFrontView=function(){this.rotation.x=0;this.rotation.y=0;this.rotation.z=0;this.rotationAutoUpdate=false};
+THREE.CombinedCamera.prototype.toPerspective=function(){this.near=this.cameraP.near;this.far=this.cameraP.far;this.cameraP.fov=this.fov/this.zoom;this.cameraP.updateProjectionMatrix();this.projectionMatrix=this.cameraP.projectionMatrix;this.inPerspectiveMode=true;this.inOrthographicMode=false};
+THREE.CombinedCamera.prototype.toOrthographic=function(){var a=this.cameraP.aspect,b=(this.cameraP.near+this.cameraP.far)/2,b=Math.tan(this.fov/2)*b,a=2*b*a/2,b=b/this.zoom,a=a/this.zoom;this.cameraO.left=-a;this.cameraO.right=a;this.cameraO.top=b;this.cameraO.bottom=-b;this.cameraO.updateProjectionMatrix();this.near=this.cameraO.near;this.far=this.cameraO.far;this.projectionMatrix=this.cameraO.projectionMatrix;this.inPerspectiveMode=false;this.inOrthographicMode=true};
+THREE.CombinedCamera.prototype.setSize=function(a,b){this.cameraP.aspect=a/b;this.left=-a/2;this.right=a/2;this.top=b/2;this.bottom=-b/2};THREE.CombinedCamera.prototype.setFov=function(a){this.fov=a;this.inPerspectiveMode?this.toPerspective():this.toOrthographic()};THREE.CombinedCamera.prototype.updateProjectionMatrix=function(){if(this.inPerspectiveMode)this.toPerspective();else{this.toPerspective();this.toOrthographic()}};
+THREE.CombinedCamera.prototype.setLens=function(a,b){var c=2*Math.atan((b!==void 0?b:24)/(a*2))*(180/Math.PI);this.setFov(c);return c};THREE.CombinedCamera.prototype.setZoom=function(a){this.zoom=a;this.inPerspectiveMode?this.toPerspective():this.toOrthographic()};THREE.CombinedCamera.prototype.toFrontView=function(){this.rotation.x=0;this.rotation.y=0;this.rotation.z=0;this.rotationAutoUpdate=false};
 THREE.CombinedCamera.prototype.toBackView=function(){this.rotation.x=0;this.rotation.y=Math.PI;this.rotation.z=0;this.rotationAutoUpdate=false};THREE.CombinedCamera.prototype.toLeftView=function(){this.rotation.x=0;this.rotation.y=-Math.PI/2;this.rotation.z=0;this.rotationAutoUpdate=false};THREE.CombinedCamera.prototype.toRightView=function(){this.rotation.x=0;this.rotation.y=Math.PI/2;this.rotation.z=0;this.rotationAutoUpdate=false};
 THREE.CombinedCamera.prototype.toTopView=function(){this.rotation.x=-Math.PI/2;this.rotation.y=0;this.rotation.z=0;this.rotationAutoUpdate=false};THREE.CombinedCamera.prototype.toBottomView=function(){this.rotation.x=Math.PI/2;this.rotation.y=0;this.rotation.z=0;this.rotationAutoUpdate=false};
 THREE.FirstPersonControls=function(a,b){function c(a,b){return function(){b.apply(a,arguments)}}this.object=a;this.target=new THREE.Vector3(0,0,0);this.domElement=b!==void 0?b:document;this.movementSpeed=1;this.lookSpeed=0.0050;this.noFly=false;this.lookVertical=true;this.autoForward=false;this.activeLook=true;this.heightSpeed=false;this.heightCoef=1;this.heightMin=0;this.constrainVertical=false;this.verticalMin=0;this.verticalMax=Math.PI;this.theta=this.phi=this.lon=this.lat=this.mouseY=this.mouseX=

build/custom/ThreeExtras.js

@@ -125,10 +125,10 @@ THREE.CubeCamera=function(b,a,c){THREE.Object3D.call(this);var d=new THREE.Persp
 1,b,a);h.up.set(0,-1,0);h.lookAt(new THREE.Vector3(0,0,1));this.add(h);var i=new THREE.PerspectiveCamera(90,1,b,a);i.up.set(0,-1,0);i.lookAt(new THREE.Vector3(0,0,-1));this.add(i);this.renderTarget=new THREE.WebGLRenderTargetCube(c,c,{format:THREE.RGBFormat,magFilter:THREE.LinearFilter,minFilter:THREE.LinearFilter});this.updateCubeMap=function(a,b){var c=this.renderTarget,k=c.generateMipmaps;c.generateMipmaps=false;c.activeCubeFace=0;a.render(b,d,c);c.activeCubeFace=1;a.render(b,e,c);c.activeCubeFace=
 2;a.render(b,f,c);c.activeCubeFace=3;a.render(b,g,c);c.activeCubeFace=4;a.render(b,h,c);c.generateMipmaps=k;c.activeCubeFace=5;a.render(b,i,c)}};THREE.CubeCamera.prototype=new THREE.Object3D;THREE.CubeCamera.prototype.constructor=THREE.CubeCamera;
 THREE.CombinedCamera=function(b,a,c,d,e,f,g){THREE.Camera.call(this);this.fov=c;this.left=-b/2;this.right=b/2;this.top=a/2;this.bottom=-a/2;this.cameraO=new THREE.OrthographicCamera(b/-2,b/2,a/2,a/-2,f,g);this.cameraP=new THREE.PerspectiveCamera(c,b/a,d,e);this.zoom=1;this.toPerspective()};THREE.CombinedCamera.prototype=new THREE.Camera;THREE.CombinedCamera.prototype.constructor=THREE.CombinedCamera;
-THREE.CombinedCamera.prototype.toPerspective=function(){this.near=this.cameraP.near;this.far=this.cameraP.far;this.cameraP.fov=this.fov/this.zoom;this.cameraP.updateProjectionMatrix();this.projectionMatrix=this.cameraP.projectionMatrix;this.inPersepectiveMode=true;this.inOrthographicMode=false};
-THREE.CombinedCamera.prototype.toOrthographic=function(){var b=this.cameraP.aspect,a=(this.cameraP.near+this.cameraP.far)/2,a=Math.tan(this.fov/2)*a,b=2*a*b/2,a=a/this.zoom,b=b/this.zoom;this.cameraO.left=-b;this.cameraO.right=b;this.cameraO.top=a;this.cameraO.bottom=-a;this.cameraO.updateProjectionMatrix();this.near=this.cameraO.near;this.far=this.cameraO.far;this.projectionMatrix=this.cameraO.projectionMatrix;this.inPersepectiveMode=false;this.inOrthographicMode=true};
-THREE.CombinedCamera.prototype.setSize=function(b,a){this.cameraP.aspect=b/a;this.left=-b/2;this.right=b/2;this.top=a/2;this.bottom=-a/2};THREE.CombinedCamera.prototype.setFov=function(b){this.fov=b;this.inPersepectiveMode?this.toPerspective():this.toOrthographic()};THREE.CombinedCamera.prototype.updateProjectionMatrix=function(){if(this.inPersepectiveMode)this.toPerspective();else{this.toPerspective();this.toOrthographic()}};
-THREE.CombinedCamera.prototype.setLens=function(b,a){var c=2*Math.atan((a!==void 0?a:24)/(b*2))*(180/Math.PI);this.setFov(c);return c};THREE.CombinedCamera.prototype.setZoom=function(b){this.zoom=b;this.inPersepectiveMode?this.toPerspective():this.toOrthographic()};THREE.CombinedCamera.prototype.toFrontView=function(){this.rotation.x=0;this.rotation.y=0;this.rotation.z=0;this.rotationAutoUpdate=false};
+THREE.CombinedCamera.prototype.toPerspective=function(){this.near=this.cameraP.near;this.far=this.cameraP.far;this.cameraP.fov=this.fov/this.zoom;this.cameraP.updateProjectionMatrix();this.projectionMatrix=this.cameraP.projectionMatrix;this.inPerspectiveMode=true;this.inOrthographicMode=false};
+THREE.CombinedCamera.prototype.toOrthographic=function(){var b=this.cameraP.aspect,a=(this.cameraP.near+this.cameraP.far)/2,a=Math.tan(this.fov/2)*a,b=2*a*b/2,a=a/this.zoom,b=b/this.zoom;this.cameraO.left=-b;this.cameraO.right=b;this.cameraO.top=a;this.cameraO.bottom=-a;this.cameraO.updateProjectionMatrix();this.near=this.cameraO.near;this.far=this.cameraO.far;this.projectionMatrix=this.cameraO.projectionMatrix;this.inPerspectiveMode=false;this.inOrthographicMode=true};
+THREE.CombinedCamera.prototype.setSize=function(b,a){this.cameraP.aspect=b/a;this.left=-b/2;this.right=b/2;this.top=a/2;this.bottom=-a/2};THREE.CombinedCamera.prototype.setFov=function(b){this.fov=b;this.inPerspectiveMode?this.toPerspective():this.toOrthographic()};THREE.CombinedCamera.prototype.updateProjectionMatrix=function(){if(this.inPerspectiveMode)this.toPerspective();else{this.toPerspective();this.toOrthographic()}};
+THREE.CombinedCamera.prototype.setLens=function(b,a){var c=2*Math.atan((a!==void 0?a:24)/(b*2))*(180/Math.PI);this.setFov(c);return c};THREE.CombinedCamera.prototype.setZoom=function(b){this.zoom=b;this.inPerspectiveMode?this.toPerspective():this.toOrthographic()};THREE.CombinedCamera.prototype.toFrontView=function(){this.rotation.x=0;this.rotation.y=0;this.rotation.z=0;this.rotationAutoUpdate=false};
 THREE.CombinedCamera.prototype.toBackView=function(){this.rotation.x=0;this.rotation.y=Math.PI;this.rotation.z=0;this.rotationAutoUpdate=false};THREE.CombinedCamera.prototype.toLeftView=function(){this.rotation.x=0;this.rotation.y=-Math.PI/2;this.rotation.z=0;this.rotationAutoUpdate=false};THREE.CombinedCamera.prototype.toRightView=function(){this.rotation.x=0;this.rotation.y=Math.PI/2;this.rotation.z=0;this.rotationAutoUpdate=false};
 THREE.CombinedCamera.prototype.toTopView=function(){this.rotation.x=-Math.PI/2;this.rotation.y=0;this.rotation.z=0;this.rotationAutoUpdate=false};THREE.CombinedCamera.prototype.toBottomView=function(){this.rotation.x=Math.PI/2;this.rotation.y=0;this.rotation.z=0;this.rotationAutoUpdate=false};
 THREE.FirstPersonControls=function(b,a){function c(a,b){return function(){b.apply(a,arguments)}}this.object=b;this.target=new THREE.Vector3(0,0,0);this.domElement=a!==void 0?a:document;this.movementSpeed=1;this.lookSpeed=0.0050;this.noFly=false;this.lookVertical=true;this.autoForward=false;this.activeLook=true;this.heightSpeed=false;this.heightCoef=1;this.heightMin=0;this.constrainVertical=false;this.verticalMin=0;this.verticalMax=Math.PI;this.theta=this.phi=this.lon=this.lat=this.mouseY=this.mouseX=

examples/webgl_geometry_extrude_splines.html

@@ -15,7 +15,7 @@
 		</style>
 	</head>
 	<body>
-	
+
 		<script src="../build/Three.js"></script>
 		<script src="../src/extras/core/Curve.js"></script>
 		<script src="../src/extras/geometries/TubeGeometry.js"></script>
@@ -104,7 +104,7 @@
 		function addTube() {
 
 			var value = document.getElementById('dropdown').value;
-			
+
 			var segments = parseInt(document.getElementById('segments').value);
 			closed2 = document.getElementById('closed').checked;
 			debug = document.getElementById('debug').checked;
@@ -115,12 +115,12 @@
 			if (tubeMesh) parent.remove(tubeMesh);
 
 			extrudePath = splines[value];
-			
+
 			tube = new THREE.TubeGeometry(extrudePath, segments, 2, radiusSegments, closed2, debug);
 
 			addGeometry(tube, 0xff00ff);
 			setScale();
-		
+
 		}
 
 		function setScale() {
@@ -159,7 +159,7 @@
 				animation = !animation;
 				document.getElementById('animation').value = 'Camera Spline Animation View: ' + (animation? 'ON': 'OFF');
 			}
-			
+
 			lookAhead = document.getElementById('lookAhead').checked;
 
 			showCameraHelper = document.getElementById('cameraHelper').checked;
@@ -197,16 +197,16 @@
 
 			scene = new THREE.Scene();
 
-			// 
+			//
 			camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.01, 1000);
 			splineCamera = new THREE.PerspectiveCamera(84, window.innerWidth / window.innerHeight, 0.01, 1000);
 			cameraHelper = new THREE.CameraHelper(splineCamera);
 
 			camera.position.set(0, 50, 500);
-			
+
 			scene.add(camera);
 
-			
+
 			var light = new THREE.DirectionalLight(0xffffff);
 			light.position.set(0, 0, 1);
 			scene.add(light);
@@ -248,6 +248,22 @@
 			renderer.domElement.addEventListener('touchstart', onDocumentTouchStart, false);
 			renderer.domElement.addEventListener('touchmove', onDocumentTouchMove, false);
 
+			//
+
+			window.addEventListener( 'resize', onWindowResize, false );
+
+		}
+
+		function onWindowResize() {
+
+			windowHalfX = window.innerWidth / 2;
+			windowHalfY = window.innerHeight / 2;
+
+			camera.aspect = window.innerWidth / window.innerHeight;
+			camera.updateProjectionMatrix();
+
+			renderer.setSize( window.innerWidth, window.innerHeight );
+
 		}
 
 		//
@@ -364,7 +380,7 @@
 
 			// Using arclength for stablization in look ahead.
 			var lookAt = tube.path.getPointAt((t + 30/tube.path.getLength()) % 1).multiplyScalar(scale);
-			
+
 			// Camera Orientation 2 - up orientation via normal
 			if (!lookAhead)
 			lookAt.copy(pos).addSelf(dir);
@@ -385,8 +401,8 @@
 
 			}
 
-			
-			
+
+
 		}
 	</script>
 

examples/webgl_geometry_hierarchy.html

@@ -85,6 +85,22 @@
 				stats.domElement.style.zIndex = 100;
 				container.appendChild( stats.domElement );
 
+			//
+
+			window.addEventListener( 'resize', onWindowResize, false );
+
+			}
+
+			function onWindowResize() {
+
+				windowHalfX = window.innerWidth / 2;
+				windowHalfY = window.innerHeight / 2;
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
 			}
 
 			function onDocumentMouseMove(event) {

examples/webgl_geometry_hierarchy2.html

@@ -138,6 +138,22 @@
 				stats.domElement.style.zIndex = 100;
 				container.appendChild( stats.domElement );
 
+				//
+
+				window.addEventListener( 'resize', onWindowResize, false );
+
+			}
+
+			function onWindowResize() {
+
+				windowHalfX = window.innerWidth / 2;
+				windowHalfY = window.innerHeight / 2;
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
 			}
 
 			function onDocumentMouseMove(event) {

examples/webgl_geometry_large_mesh.html

@@ -171,6 +171,23 @@
 				//loader.load( 'obj/lucy/Lucy100k_slim.js', callback );
 				loader.load( 'obj/lucy/Lucy100k_bin.js', callback );
 
+				//
+
+				window.addEventListener( 'resize', onWindowResize, false );
+
+			}
+
+			function onWindowResize() {
+
+				windowHalfX = window.innerWidth / 2;
+				windowHalfY = window.innerHeight / 2;
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				if ( render_canvas ) canvasRenderer.setSize( window.innerWidth, window.innerHeight );
+				if ( render_gl && has_gl ) webglRenderer.setSize( window.innerWidth, window.innerHeight );
+
 			}
 
 

examples/webgl_geometry_minecraft.html

@@ -171,8 +171,22 @@
 				stats.domElement.style.top = '0px';
 				container.appendChild( stats.domElement );
 
+				//
+
+				window.addEventListener( 'resize', onWindowResize, false );
+
 			}
 
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+				controls.handleResize();
+
+			}
 
 			function loadTexture( path ) {
 

examples/webgl_geometry_minecraft_ao.html

@@ -465,6 +465,21 @@
 				document.getElementById( "baot" ).addEventListener( "click", function() { mat.map = m_aot.map; }, false );
 				document.getElementById( "bt" ).addEventListener( "click",   function() { mat.map = m_t.map; }, false );
 
+				//
+
+				window.addEventListener( 'resize', onWindowResize, false );
+
+			}
+
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+				controls.handleResize();
+
 			}
 
 			function generateMegamaterialAO( textures, strength, debug_texture, debug_numbers, debug_corner_colors  ) {

examples/webgl_geometry_shapes.html

@@ -342,7 +342,7 @@
 				//splineShape.debug( document.getElementById("debug") );
 
 				// TODO 3d path?
-				
+
 				var apath = new THREE.SplineCurve3();
 				apath.points.push(new THREE.Vector3(-50, 150, 10));
 				apath.points.push(new THREE.Vector3(-20, 180, 20));
@@ -385,6 +385,22 @@
 				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 
+				//
+
+				window.addEventListener( 'resize', onWindowResize, false );
+
+			}
+
+			function onWindowResize() {
+
+				windowHalfX = window.innerWidth / 2;
+				windowHalfY = window.innerHeight / 2;
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
 			}
 
 			//

examples/webgl_geometry_subdivison.html

@@ -225,11 +225,11 @@
 
 				// mergeVertices(); is run in case of duplicated vertices
 				smooth.mergeVertices();
-				
+
 				smooth.computeCentroids();
 				smooth.computeFaceNormals();
 				smooth.computeVertexNormals();
-				
+
 				modifier.modify( smooth );
 
 				updateInfo();
@@ -379,6 +379,22 @@
 				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 
+				//
+
+				window.addEventListener( 'resize', onWindowResize, false );
+
+			}
+
+			function onWindowResize() {
+
+				windowHalfX = window.innerWidth / 2;
+				windowHalfY = window.innerHeight / 2;
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
 			}
 
 			//
@@ -395,6 +411,7 @@
 				mouseYOnMouseDown = event.clientY - windowHalfY;
 				targetYRotationOnMouseDown = targetYRotation;
 				targetXRotationOnMouseDown = targetXRotation;
+
 			}
 
 			function onDocumentMouseMove( event ) {

examples/webgl_geometry_terrain.html

@@ -106,6 +106,21 @@
 				stats.domElement.style.top = '0px';
 				container.appendChild( stats.domElement );
 
+				//
+
+				window.addEventListener( 'resize', onWindowResize, false );
+
+			}
+
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+				controls.handleResize();
+
 			}
 
 			function generateHeight( width, height ) {

examples/webgl_geometry_terrain_fog.html

@@ -109,6 +109,22 @@
 				stats.domElement.style.top = '0px';
 				container.appendChild( stats.domElement );
 
+
+				//
+
+				window.addEventListener( 'resize', onWindowResize, false );
+
+			}
+
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+				controls.handleResize();
+
 			}
 
 			function generateHeight( width, height ) {

examples/webgl_geometry_tessellation.html

@@ -231,6 +231,20 @@
 
 			container.appendChild( stats.domElement );
 
+
+			//
+
+			window.addEventListener( 'resize', onWindowResize, false );
+
+		}
+
+		function onWindowResize() {
+
+			camera.aspect = window.innerWidth / window.innerHeight;
+			camera.updateProjectionMatrix();
+
+			renderer.setSize( window.innerWidth, window.innerHeight );
+
 		}
 
 		function animate() {

examples/webgl_geometry_text.html

@@ -77,6 +77,7 @@
 			var camera, cameraTarget, scene, renderer;
 
 			var composer;
+			var effectFXAA;
 
 			var textMesh1, textMesh2, textGeo, faceMaterial, textMaterialFront, textMaterialSide, parent;
 
@@ -343,9 +344,13 @@
 				var renderModel = new THREE.RenderPass( scene, camera );
 				var effectBloom = new THREE.BloomPass( 0.25 );
 				var effectFilm = new THREE.FilmPass( 0.5, 0.125, 2048, false );
-				var effectFXAA = new THREE.ShaderPass( THREE.ShaderExtras[ "fxaa" ] );
 
-				effectFXAA.uniforms[ 'resolution' ].value.set( 1 / window.innerWidth, 1 / window.innerHeight );
+				effectFXAA = new THREE.ShaderPass( THREE.ShaderExtras[ "fxaa" ] );
+
+				var width = window.innerWidth || 2;
+				var height = window.innerHeight || 2;
+
+				effectFXAA.uniforms[ 'resolution' ].value.set( 1 / width, 1 / height );
 
 				effectFilm.renderToScreen = true;
 
@@ -356,6 +361,26 @@
 				composer.addPass( effectBloom );
 				composer.addPass( effectFilm );
 
+				//
+
+				window.addEventListener( 'resize', onWindowResize, false );
+
+			}
+
+			function onWindowResize() {
+
+				windowHalfX = window.innerWidth / 2;
+				windowHalfY = window.innerHeight / 2;
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+				composer.reset();
+
+				effectFXAA.uniforms[ 'resolution' ].value.set( 1 / window.innerWidth, 1 / window.innerHeight );
+
 			}
 
 			//

examples/webgl_hdr.html

@@ -160,6 +160,19 @@
 				stats.domElement.style.top = '0px';
 				container.appendChild( stats.domElement );
 
+				//
+
+				window.addEventListener( 'resize', onWindowResize, false );
+
+			}
+
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
 			}
 
 			function getText( id ) {

examples/webgl_interactive_cubes.html

@@ -93,6 +93,19 @@
 
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
+				//
+
+				window.addEventListener( 'resize', onWindowResize, false );
+
+			}
+
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
 			}
 
 			function onDocumentMouseMove( event ) {

examples/webgl_interactive_draggablecubes.html

@@ -65,8 +65,8 @@
 				light.shadowBias = -0.00022;
 				light.shadowDarkness = 0.5;
 
-				light.shadowMapWidth = 1024;
-				light.shadowMapHeight = 1024;
+				light.shadowMapWidth = 2048;
+				light.shadowMapHeight = 2048;
 
 				scene.add( light );
 
@@ -132,6 +132,19 @@
 				renderer.domElement.addEventListener( 'mousedown', onDocumentMouseDown, false );
 				renderer.domElement.addEventListener( 'mouseup', onDocumentMouseUp, false );
 
+				//
+
+				window.addEventListener( 'resize', onWindowResize, false );
+
+			}
+
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
 			}
 
 			function onDocumentMouseMove( event ) {

examples/webgl_interactive_voxelpainter.html

@@ -102,7 +102,7 @@
 				directionalLight.position.set( 1, 0.75, 0.5 ).normalize();
 				scene.add( directionalLight );
 
-				renderer = new THREE.WebGLRenderer( { antialias: true, preserveDrawingBuffer : true } );
+				renderer = new THREE.WebGLRenderer( { antialias: true, preserveDrawingBuffer: true } );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				container.appendChild( renderer.domElement );
@@ -117,7 +117,12 @@
 				document.addEventListener( 'keydown', onDocumentKeyDown, false );
 				document.addEventListener( 'keyup', onDocumentKeyUp, false );
 
+				//
+
+				window.addEventListener( 'resize', onWindowResize, false );
+
 				// add GUI
+
 				gui = new DAT.GUI();
 				gui.add(voxelConfig, 'orthographicProjection').onChange(function(){
 
@@ -133,10 +138,20 @@
 					}
 
 				});
+
 				gui.close();
 
 			}
 
+			function onWindowResize() {
+
+				camera.setSize( window.innerWidth, window.innerHeight );
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+			}
+
 			function getRealIntersector( intersects ) {
 
 				for( i = 0; i < intersects.length; i++ ) {

examples/webgl_kinect.html

@@ -154,7 +154,7 @@
 					geometry = new THREE.Geometry();
 
 					for ( var i = 0, l = width * height; i < l; i ++ ) {
- 
+
 						var vertex = new THREE.Vector3();
 						vertex.x = ( i % width );
 						vertex.y = Math.floor( i / width );
@@ -220,6 +220,19 @@
 
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
+				//
+
+				window.addEventListener( 'resize', onWindowResize, false );
+
+			}
+
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
 			}
 
 			function onDocumentMouseMove( event ) {

src/extras/cameras/CombinedCamera.js

 /*
- *	@author zz85 / http://twitter.com/blurspline / http://www.lab4games.net/zz85/blog 
- * 
- *	A general perpose camera, for setting FOV, Lens Focal Length,  
+ *	@author zz85 / http://twitter.com/blurspline / http://www.lab4games.net/zz85/blog
+ *
+ *	A general perpose camera, for setting FOV, Lens Focal Length,
  *		and switching between perspective and orthographic views easily.
- *		Use this only if you do not wish to manage 
+ *		Use this only if you do not wish to manage
  *		both a Orthographic and Perspective Camera
  *
  */
 
 
-THREE.CombinedCamera = function ( width, height, fov, near, far, orthonear, orthofar ) {
+THREE.CombinedCamera = function ( width, height, fov, near, far, orthoNear, orthoFar ) {
 
 	THREE.Camera.call( this );
 
 	this.fov = fov;
-	
+
 	this.left = -width / 2;
 	this.right = width / 2
 	this.top = height / 2;
 	this.bottom = -height / 2;
-	
+
 	// We could also handle the projectionMatrix internally, but just wanted to test nested camera objects
-	this.cameraO = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, 	orthonear, orthofar );
-	this.cameraP = new THREE.PerspectiveCamera( fov, width/height, near, far );
+
+	this.cameraO = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, 	orthoNear, orthoFar );
+	this.cameraP = new THREE.PerspectiveCamera( fov, width / height, near, far );
 
 	this.zoom = 1;
-	
+
 	this.toPerspective();
-	
-	
-	var aspect = width/height;
-	
-	
 
+	var aspect = width/height;
 
 };
 
@@ -40,15 +37,19 @@ THREE.CombinedCamera.prototype = new THREE.Camera();
 THREE.CombinedCamera.prototype.constructor = THREE.CombinedCamera;
 
 THREE.CombinedCamera.prototype.toPerspective = function () {
+
 	// Switches to the Perspective Camera
 
 	this.near = this.cameraP.near;
 	this.far = this.cameraP.far;
+
 	this.cameraP.fov =  this.fov / this.zoom ;
+
 	this.cameraP.updateProjectionMatrix();
+
 	this.projectionMatrix = this.cameraP.projectionMatrix;
-	
-	this.inPersepectiveMode = true;
+
+	this.inPerspectiveMode = true;
 	this.inOrthographicMode = false;
 
 };
@@ -56,28 +57,29 @@ THREE.CombinedCamera.prototype.toPerspective = function () {
 THREE.CombinedCamera.prototype.toOrthographic = function () {
 
 	// Switches to the Orthographic camera estimating viewport from Perspective
+
 	var fov = this.fov;
 	var aspect = this.cameraP.aspect;
 	var near = this.cameraP.near;
 	var far = this.cameraP.far;
-	
-	
+
 	// The size that we set is the mid plane of the viewing frustum
-	var hyperfocus = ( near + far ) / 2; 
-	
+
+	var hyperfocus = ( near + far ) / 2;
+
 	var halfHeight = Math.tan( fov / 2 ) * hyperfocus;
 	var planeHeight = 2 * halfHeight;
 	var planeWidth = planeHeight * aspect;
 	var halfWidth = planeWidth / 2;
-	
+
 	halfHeight /= this.zoom;
 	halfWidth /= this.zoom;
-	
+
 	this.cameraO.left = -halfWidth;
 	this.cameraO.right = halfWidth;
 	this.cameraO.top = halfHeight;
 	this.cameraO.bottom = -halfHeight;
-	
+
 	// this.cameraO.left = -farHalfWidth;
 	// this.cameraO.right = farHalfWidth;
 	// this.cameraO.top = farHalfHeight;
@@ -87,20 +89,20 @@ THREE.CombinedCamera.prototype.toOrthographic = function () {
 	// this.cameraO.right = this.right / this.zoom;
 	// this.cameraO.top = this.top / this.zoom;
 	// this.cameraO.bottom = this.bottom / this.zoom;
-	
+
 	this.cameraO.updateProjectionMatrix();
 
 	this.near = this.cameraO.near;
 	this.far = this.cameraO.far;
 	this.projectionMatrix = this.cameraO.projectionMatrix;
-	
-	this.inPersepectiveMode = false;
+
+	this.inPerspectiveMode = false;
 	this.inOrthographicMode = true;
 
 };
 
-	
-THREE.CombinedCamera.prototype.setSize = function(width, height) {
+
+THREE.CombinedCamera.prototype.setSize = function( width, height ) {
 
 	this.cameraP.aspect = width / height;
 	this.left = -width / 2;
@@ -108,28 +110,40 @@ THREE.CombinedCamera.prototype.setSize = function(width, height) {
 	this.top = height / 2;
 	this.bottom = -height / 2;
 
-}
+};
+
 
+THREE.CombinedCamera.prototype.setFov = function( fov ) {
 
-THREE.CombinedCamera.prototype.setFov = function(fov) {	
 	this.fov = fov;
-	
-	if (this.inPersepectiveMode) {
+
+	if ( this.inPerspectiveMode ) {
+
 		this.toPerspective();
+
 	} else {
+
 		this.toOrthographic();
+
 	}
 
 };
 
 // For mantaining similar API with PerspectiveCamera
+
 THREE.CombinedCamera.prototype.updateProjectionMatrix = function() {
-	if (this.inPersepectiveMode) {
+
+	if ( this.inPerspectiveMode ) {
+
 		this.toPerspective();
+
 	} else {
+
 		this.toPerspective();
 		this.toOrthographic();
+
 	}
+
 };
 
 /*
@@ -149,59 +163,76 @@ THREE.CombinedCamera.prototype.setLens = function ( focalLength, frameHeight ) {
 };
 
 
-THREE.CombinedCamera.prototype.setZoom = function(zoom) {
+THREE.CombinedCamera.prototype.setZoom = function( zoom ) {
 
 	this.zoom = zoom;
-	
-	if (this.inPersepectiveMode) {
+
+	if ( this.inPerspectiveMode ) {
+
 		this.toPerspective();
+
 	} else {
+
 		this.toOrthographic();
+
 	}
-	
 
 };
 
 THREE.CombinedCamera.prototype.toFrontView = function() {
+
 	this.rotation.x = 0;
 	this.rotation.y = 0;
 	this.rotation.z = 0;
+
 	// should we be modifing the matrix instead?
+
 	this.rotationAutoUpdate = false;
+
 };
 
 THREE.CombinedCamera.prototype.toBackView = function() {
+
 	this.rotation.x = 0;
 	this.rotation.y = Math.PI;
 	this.rotation.z = 0;
 	this.rotationAutoUpdate = false;
+
 };
-	
+
 THREE.CombinedCamera.prototype.toLeftView = function() {
+
 	this.rotation.x = 0;
 	this.rotation.y = - Math.PI / 2;
 	this.rotation.z = 0;
 	this.rotationAutoUpdate = false;
+
 };
 
 THREE.CombinedCamera.prototype.toRightView = function() {
+
 	this.rotation.x = 0;
 	this.rotation.y = Math.PI / 2;
 	this.rotation.z = 0;
 	this.rotationAutoUpdate = false;
+
 };
 
 THREE.CombinedCamera.prototype.toTopView = function() {
+
 	this.rotation.x = - Math.PI / 2;
 	this.rotation.y = 0;
 	this.rotation.z = 0;
 	this.rotationAutoUpdate = false;
+
 };
 
 THREE.CombinedCamera.prototype.toBottomView = function() {
+
 	this.rotation.x = Math.PI / 2;
 	this.rotation.y = 0;
 	this.rotation.z = 0;
 	this.rotationAutoUpdate = false;
+
 };