Another batch of examples resizing.

This should be the last one. The only ones left should be "webgl_postprocessing" and "webgl_postprocessing_dof" where I got stuck.

examples/js/postprocessing/EffectComposer.js

@@ -124,8 +124,8 @@ THREE.EffectComposer.prototype = {
 
 // shared ortho camera
 
-THREE.EffectComposer.initWidth = window.innerWidth | 1;
-THREE.EffectComposer.initHeight = window.innerHeight | 1;
+THREE.EffectComposer.initWidth = window.innerWidth || 1;
+THREE.EffectComposer.initHeight = window.innerHeight || 1;
 
 THREE.EffectComposer.camera = new THREE.OrthographicCamera( THREE.EffectComposer.initWidth / - 2, THREE.EffectComposer.initWidth / 2, THREE.EffectComposer.initHeight / 2, THREE.EffectComposer.initHeight / - 2, -10000, 10000 );
 

examples/webgl_materials2.html

@@ -133,6 +133,19 @@
 
 				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 );
+
 			}
 
 			//

examples/webgl_materials_cubemap_dynamic.html

@@ -76,8 +76,11 @@
 
 			var MARGIN = 100;
 
-			var SCREEN_WIDTH = window.innerWidth;
-			var SCREEN_HEIGHT = window.innerHeight - 2 * MARGIN;
+			var WIDTH = window.innerWidth || 2;
+			var HEIGHT = window.innerHeight || ( 2 + 2 * MARGIN );
+
+			var SCREEN_WIDTH = WIDTH;
+			var SCREEN_HEIGHT = HEIGHT - 2 * MARGIN;
 
 			var SHADOW_MAP_WIDTH = 1024, SHADOW_MAP_HEIGHT = 1024;
 

examples/webgl_materials_skin.html

@@ -256,6 +256,21 @@
 
 				uniforms[ "tBeckmann" ].texture = composerBeckmann.renderTarget1;
 
+				//
+
+				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_materials_video.html

@@ -109,6 +109,7 @@
 				texture.minFilter = THREE.LinearFilter;
 				texture.magFilter = THREE.LinearFilter;
 				texture.format = THREE.RGBFormat;
+				texture.generateMipmaps = false;
 
 				//
 
@@ -155,7 +156,7 @@
 
 					mesh.scale.x = mesh.scale.y = mesh.scale.z = 1;
 
-					scene.add(mesh);
+					scene.add( mesh );
 
 					mesh.dx = 0.001 * ( 0.5 - Math.random() );
 					mesh.dy = 0.001 * ( 0.5 - Math.random() );
@@ -184,6 +185,23 @@
 				composer.addPass( effectBloom );
 				composer.addPass( effectScreen );
 
+				//
+
+				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();
+
 			}
 
 			function change_uvs( geometry, unitx, unity, offsetx, offsety ) {
@@ -240,20 +258,20 @@
 
 				}
 
-				for( i = 0; i < cube_count; i++ ) {
+				for ( i = 0; i < cube_count; i ++ ) {
 
-					material = materials[i];
+					material = materials[ i ];
 
 					h = ( 360 * ( material.hue + time ) % 360 ) / 360;
 					material.color.setHSV( h, material.saturation, 1 );
 
 				}
 
-				if( counter % 1000  > 200 ) {
+				if ( counter % 1000 > 200 ) {
 
-					for( i = 0; i < cube_count; i++ ) {
+					for ( i = 0; i < cube_count; i ++ ) {
 
-						mesh = meshes[i];
+						mesh = meshes[ i ];
 
 						mesh.rotation.x += 10 * mesh.dx;
 						mesh.rotation.y += 10 * mesh.dy;
@@ -266,11 +284,11 @@
 
 				}
 
-				if( counter % 1000  == 0 ) {
+				if ( counter % 1000 === 0 ) {
 
-					for( i = 0; i < cube_count; i++ ) {
+					for ( i = 0; i < cube_count; i ++ ) {
 
-						mesh = meshes[i];
+						mesh = meshes[ i ];
 
 						mesh.dx *= -1;
 						mesh.dy *= -1;
@@ -284,7 +302,6 @@
 				renderer.clear();
 				composer.render();
 
-
 			}
 
 

examples/webgl_morphtargets.html

@@ -139,12 +139,29 @@
 
 				scene.add( mesh );
 
+				//
 
-				renderer = new THREE.WebGLRenderer( { clearColor:0x222222, clearAlpha: 1 } );
+				renderer = new THREE.WebGLRenderer( { clearColor: 0x222222, clearAlpha: 1 } );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.sortObjects = false;
 				container.appendChild( renderer.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_morphtargets_horse.html

@@ -86,6 +86,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 );
+
 			}
 
 			//

examples/webgl_panorama_equirectangular.html

@@ -76,6 +76,19 @@
 				document.addEventListener( 'mousewheel', onDocumentMouseWheel, false );
 				document.addEventListener( 'DOMMouseScroll', onDocumentMouseWheel, false);
 
+				//
+
+				window.addEventListener( 'resize', onWindowResize, false );
+
+			}
+
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
 			}
 
 			function onDocumentMouseDown( event ) {

examples/webgl_particles_billboards.html

@@ -108,6 +108,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 );
+
 			}
 
 			function onDocumentMouseMove( event ) {

examples/webgl_particles_billboards_colors.html

@@ -113,10 +113,12 @@
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
+
 				window.addEventListener( 'resize', onWindowResize, false );
 
 			}
 
+
 			function onDocumentMouseMove( event ) {
 
 				mouseX = event.clientX - windowHalfX;
@@ -126,7 +128,7 @@
 
 			function onDocumentTouchStart( event ) {
 
-				if ( event.touches.length == 1 ) {
+				if ( event.touches.length === 1 ) {
 
 					event.preventDefault();
 
@@ -134,11 +136,12 @@
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 
 				}
+
 			}
 
 			function onDocumentTouchMove( event ) {
 
-				if ( event.touches.length == 1 ) {
+				if ( event.touches.length === 1 ) {
 
 					event.preventDefault();
 
@@ -151,6 +154,9 @@
 
 			function onWindowResize( event ) {
 
+				windowHalfX = window.innerWidth / 2;
+				windowHalfY = window.innerHeight / 2;
+
 				camera.aspect = window.innerWidth / window.innerHeight;
 				camera.updateProjectionMatrix();
 

examples/webgl_particles_random.html

@@ -117,6 +117,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 );
+
 			}
 
 			function onDocumentMouseMove( event ) {
@@ -128,7 +144,7 @@
 
 			function onDocumentTouchStart( event ) {
 
-				if ( event.touches.length == 1 ) {
+				if ( event.touches.length === 1 ) {
 
 					event.preventDefault();
 
@@ -136,11 +152,12 @@
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 
 				}
+
 			}
 
 			function onDocumentTouchMove( event ) {
 
-				if ( event.touches.length == 1 ) {
+				if ( event.touches.length === 1 ) {
 
 					event.preventDefault();
 

examples/webgl_particles_shapes.html

@@ -100,6 +100,9 @@
 			var _rotation = 0;
 			var timeOnShapePath = 0;
 
+			var composer;
+			var effectBlurX, effectBlurY, hblur, vblur;
+
 			init();
 			animate();
 
@@ -511,15 +514,15 @@
 				effectFilm = new THREE.FilmPass( 0.5, 0.25, 2048, false );
 
 				var shaderBlur = THREE.ShaderExtras[ "triangleBlur" ];
-				var effectBlurX = new THREE.ShaderPass( shaderBlur, 'texture' );
-				var effectBlurY = new THREE.ShaderPass( shaderBlur, 'texture' );
+				effectBlurX = new THREE.ShaderPass( shaderBlur, 'texture' );
+				effectBlurY = new THREE.ShaderPass( shaderBlur, 'texture' );
 
 				var radius = 15;
 				var blurAmountX = radius / window.innerWidth;
 				var blurAmountY = radius / window.innerHeight;
 
-				var hblur = new THREE.ShaderPass( THREE.ShaderExtras[ "horizontalBlur" ] );
-				var vblur = new THREE.ShaderPass( THREE.ShaderExtras[ "verticalBlur" ] );
+				hblur = new THREE.ShaderPass( THREE.ShaderExtras[ "horizontalBlur" ] );
+				vblur = new THREE.ShaderPass( THREE.ShaderExtras[ "verticalBlur" ] );
 
 				hblur.uniforms[ 'h' ].value =  1 / window.innerWidth;
 				vblur.uniforms[ 'v' ].value =  1 / window.innerHeight;
@@ -552,6 +555,36 @@
 				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 );
+
+				//
+
+				hblur.uniforms[ 'h' ].value =  1 / window.innerWidth;
+				vblur.uniforms[ 'v' ].value =  1 / window.innerHeight;
+
+				var radius = 15;
+				var blurAmountX = radius / window.innerWidth;
+				var blurAmountY = radius / window.innerHeight;
+
+				effectBlurX.uniforms[ 'delta' ].value = new THREE.Vector2( blurAmountX, 0 );
+				effectBlurY.uniforms[ 'delta' ].value = new THREE.Vector2( 0, blurAmountY );
+
+				composer.reset();
+
 			}
 
 			//
@@ -588,7 +621,7 @@
 
 			function onDocumentTouchStart( event ) {
 
-				if ( event.touches.length == 1 ) {
+				if ( event.touches.length === 1 ) {
 
 					event.preventDefault();
 
@@ -601,7 +634,7 @@
 
 			function onDocumentTouchMove( event ) {
 
-				if ( event.touches.length == 1 ) {
+				if ( event.touches.length === 1 ) {
 
 					event.preventDefault();
 

examples/webgl_particles_sprites.html

@@ -126,6 +126,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 );
+
 			}
 
 			function onDocumentMouseMove( event ) {
@@ -137,7 +153,7 @@
 
 			function onDocumentTouchStart( event ) {
 
-				if ( event.touches.length == 1 ) {
+				if ( event.touches.length === 1 ) {
 
 					event.preventDefault();
 
@@ -145,11 +161,12 @@
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 
 				}
+
 			}
 
 			function onDocumentTouchMove( event ) {
 
-				if ( event.touches.length == 1 ) {
+				if ( event.touches.length === 1 ) {
 
 					event.preventDefault();
 

examples/webgl_performance.html

@@ -89,6 +89,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) {
@@ -115,7 +131,7 @@
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 				camera.lookAt( scene.position );
 
-				for ( var i = 0; i < 5000; i ++ ) {
+				for ( var i = 0, il = objects.length; i < il; i ++ ) {
 
 					objects[ i ].rotation.x += 0.01;
 					objects[ i ].rotation.y += 0.02;

examples/webgl_performance_static.html

@@ -88,6 +88,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_postprocessing.html

@@ -67,8 +67,11 @@
 
 			var cameraOrtho, cameraPerspective, sceneModel, sceneBG, renderer, mesh, directionalLight;
 
-			var halfWidth = window.innerWidth / 2;
-			var halfHeight = window.innerHeight / 2;
+			var width = window.innerWidth || 2;
+			var height = window.innerHeight || 2;
+
+			var halfWidth = width / 2;
+			var halfHeight = height / 2;
 
 			var materialColor, material2D, quadBG, quadMask, renderScene;
 
@@ -93,7 +96,7 @@
 				cameraOrtho = new THREE.OrthographicCamera( -halfWidth, halfWidth, halfHeight, -halfHeight, -10000, 10000 );
 				cameraOrtho.position.z = 100;
 
-				cameraPerspective = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
+				cameraPerspective = new THREE.PerspectiveCamera( 50, width / height, 1, 10000 );
 				cameraPerspective.position.z = 900;
 
 				sceneModel.add( cameraPerspective );
@@ -116,7 +119,7 @@
 				quadBG = new THREE.Mesh( new THREE.PlaneGeometry( 1, 1 ), materialColor );
 				quadBG.position.z = -500;
 				quadBG.rotation.x = Math.PI / 2;
-				quadBG.scale.set( window.innerWidth, 1, window.innerHeight );
+				quadBG.scale.set( width, 1, height );
 				sceneBG.add( quadBG );
 
 				//
@@ -126,13 +129,13 @@
 				quadMask = new THREE.Mesh( new THREE.PlaneGeometry( 1, 1 ), new THREE.MeshBasicMaterial( { color: 0xffaa00 } )  );
 				quadMask.position.z = -300;
 				quadMask.rotation.x = Math.PI / 2;
-				quadMask.scale.set( window.innerWidth / 2, 1, window.innerHeight / 2 );
+				quadMask.scale.set( width / 2, 1, height / 2 );
 				sceneMask.add( quadMask );
 
 				//
 
 				renderer = new THREE.WebGLRenderer( { antialias: false } );
-				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setSize( width, height );
 				renderer.setClearColorHex( 0x000000, 1 );
 				renderer.autoClear = false;
 
@@ -178,8 +181,8 @@
 
 				var effectHBlur = new THREE.ShaderPass( THREE.ShaderExtras[ "horizontalBlur" ] );
 				var effectVBlur = new THREE.ShaderPass( THREE.ShaderExtras[ "verticalBlur" ] );
-				effectHBlur.uniforms[ 'h' ].value = 2 / ( window.innerWidth/2 );
-				effectVBlur.uniforms[ 'v' ].value = 2 / ( window.innerHeight/2 );
+				effectHBlur.uniforms[ 'h' ].value = 2 / ( width/2 );
+				effectVBlur.uniforms[ 'v' ].value = 2 / ( height/2 );
 
 				var effectColorify1 = new THREE.ShaderPass( THREE.ShaderExtras[ "colorify" ] );
 				var effectColorify2 = new THREE.ShaderPass( THREE.ShaderExtras[ "colorify" ] );
@@ -203,8 +206,8 @@
 
 				rtParameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat, stencilBuffer: true };
 
-				var rtWidth  = window.innerWidth / 2;
-				var rtHeight = window.innerHeight / 2;
+				var rtWidth  = width / 2;
+				var rtHeight = height / 2;
 
 				//
 

examples/webgl_ribbons.html

@@ -209,6 +209,24 @@
 				composer.addPass( effectBloom );
 				composer.addPass( effectScreen );
 
+				//
+
+				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();
+
 			}
 
 			function onDocumentMouseMove( event ) {
@@ -220,7 +238,7 @@
 
 			function onDocumentTouchStart( event ) {
 
-				if ( event.touches.length == 1 ) {
+				if ( event.touches.length === 1 ) {
 
 					event.preventDefault();
 
@@ -228,11 +246,12 @@
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 
 				}
+
 			}
 
 			function onDocumentTouchMove( event ) {
 
-				if ( event.touches.length == 1 ) {
+				if ( event.touches.length === 1 ) {
 
 					event.preventDefault();
 

examples/webgl_sandbox.html

@@ -171,6 +171,22 @@
 
 				document.addEventListener( 'mousemove', onDocumentMouseMove, 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 );
+
 			}
 
 			function generateTexture( r, g, b ) {

examples/webgl_shader2.html

@@ -211,7 +211,7 @@
 					texture: { type: "t", value: 0, texture: THREE.ImageUtils.loadTexture( "textures/disturb.jpg" ) }
 				};
 
-				uniforms2.texture.texture.wrapS = uniforms2.texture.texture.wrapT = THREE.Repeat;
+				uniforms2.texture.texture.wrapS = uniforms2.texture.texture.wrapT = THREE.RepeatWrapping;
 
 				var size = 0.75, mlib = [],
 					params = [ [ 'fragment_shader1', uniforms1 ],  [ 'fragment_shader2', uniforms2 ], [ 'fragment_shader3', uniforms1 ], [ 'fragment_shader4', uniforms1 ] ];
@@ -259,6 +259,9 @@
 				uniforms2.resolution.value.x = window.innerWidth;
 				uniforms2.resolution.value.y = window.innerHeight;
 
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 			}

examples/webgl_shader_lava.html

@@ -129,8 +129,11 @@
 			var mouseX = 0, mouseY = 0,
 			lat = 0, lon = 0, phy = 0, theta = 0;
 
-			var windowHalfX = window.innerWidth / 2;
-			var windowHalfY = window.innerHeight / 2;
+			var width = window.innerWidth || 2;
+			var height = window.innerHeight || 2;
+
+			var windowHalfX = width / 2;
+			var windowHalfY = height / 2;
 
 			init();
 			animate();
@@ -157,8 +160,8 @@
 
 				};
 
-				uniforms.texture1.texture.wrapS = uniforms.texture1.texture.wrapT = THREE.Repeat;
-				uniforms.texture2.texture.wrapS = uniforms.texture2.texture.wrapT = THREE.Repeat;
+				uniforms.texture1.texture.wrapS = uniforms.texture1.texture.wrapT = THREE.RepeatWrapping;
+				uniforms.texture2.texture.wrapS = uniforms.texture2.texture.wrapT = THREE.RepeatWrapping;
 
 				var size = 0.65;
 

examples/webgl_shading_physical.html

@@ -59,8 +59,11 @@
 
 			var MARGIN = 0;
 
-			var SCREEN_WIDTH = window.innerWidth;
-			var SCREEN_HEIGHT = window.innerHeight - 2 * MARGIN;
+			var WIDTH = window.innerWidth || 2;
+			var HEIGHT = window.innerHeight || ( 2 + 2 * MARGIN );
+
+			var SCREEN_WIDTH = WIDTH;
+			var SCREEN_HEIGHT = HEIGHT - 2 * MARGIN;
 
 			var FAR = 10000;
 
@@ -507,6 +510,8 @@
 
 				effectFXAA.uniforms[ 'resolution' ].value.set( 1 / SCREEN_WIDTH, 1 / SCREEN_HEIGHT );
 
+				controls.handleResize();
+
 			}
 
 			//

examples/webgl_shadowmap.html

@@ -150,6 +150,24 @@
 				stats.domElement.style.zIndex = 100;
 				//container.appendChild( stats.domElement );
 
+				//
+
+				window.addEventListener( 'resize', onWindowResize, false );
+
+			}
+
+			function onWindowResize() {
+
+				SCREEN_WIDTH = window.innerWidth;
+				SCREEN_HEIGHT = window.innerHeight - 2 * MARGIN;
+
+				camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
+
+				controls.handleResize();
+
 			}
 
 			function createHUD() {

examples/webgl_shadowmap_performance.html

@@ -150,6 +150,24 @@
 				stats.domElement.style.zIndex = 100;
 				container.appendChild( stats.domElement );
 
+				//
+
+				window.addEventListener( 'resize', onWindowResize, false );
+
+			}
+
+			function onWindowResize() {
+
+				SCREEN_WIDTH = window.innerWidth;
+				SCREEN_HEIGHT = window.innerHeight - 2 * MARGIN;
+
+				camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
+
+				controls.handleResize();
+
 			}
 
 			function createHUD() {
@@ -302,8 +320,8 @@
 				loader.load( "models/animated/horse.js", function( geometry ) {
 
 					morphColorsToFaceColors( geometry );
-                    
-                    
+
+
                     var i = -600;
                     while (i < 601){
 					    addMorph( geometry, 550, 1000, 100 - Math.random() * 3000, FLOOR, i, true );

examples/webgl_sprites.html

@@ -122,8 +122,20 @@
 				stats.domElement.style.zIndex = 100;
 				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_trackballcamera_earth.html

@@ -256,10 +256,7 @@
 				camera.aspect = width / height;
 				camera.updateProjectionMatrix();
 
-				controls.screen.width = width;
-				controls.screen.height = height;
-
-				controls.radius = ( width + height ) / 4;
+				controls.handleResize();
 
 			};
 

examples/webgl_trails.html

@@ -82,6 +82,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) {