Another batch of examples resizing handling.

examples/canvas_ascii_effect.html

@@ -10,7 +10,7 @@
 				font-family: Monospace;
 				background-color: #f0f0f0;
 				margin: 0px;
-				overflow: hidden; 
+				overflow: hidden;
 			}
 		</style>
 	</head>
@@ -19,6 +19,7 @@
 		<script src="../build/Three.js"></script>
 		<script src="js/effects/AsciiEffect.js"></script>
 		<script src="js/Stats.js"></script>
+
 		<script>
 
 			var container, stats;
@@ -34,6 +35,9 @@
 
 			function init() {
 
+				var width = window.innerWidth || 2;
+				var height = window.innerHeight || 2;
+
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
@@ -47,7 +51,7 @@
 
 				scene = new THREE.Scene();
 
-				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera = new THREE.PerspectiveCamera( 70, width / height, 1, 1000 );
 				camera.position.y = 150;
 				camera.position.z = 500;
 				scene.add( camera );
@@ -72,10 +76,11 @@
 				scene.add( plane );
 
 				renderer = new THREE.CanvasRenderer();
+				renderer.setSize( width, height );
 				// container.appendChild( renderer.domElement );
 
 				effect = new THREE.AsciiEffect( renderer );
-				effect.setSize( window.innerWidth, window.innerHeight );
+				effect.setSize( width, height );
 				container.appendChild( effect.domElement );
 
 				stats = new Stats();
@@ -83,6 +88,20 @@
 				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 );
+				effect.setSize( window.innerWidth, window.innerHeight );
+
 			}
 
 			//

examples/canvas_camera_orthographic.html

@@ -84,7 +84,7 @@
 					cube.position.y = ( cube.scale.y * 50 ) / 2;
 					cube.position.z = Math.floor( ( Math.random() * 1000 - 500 ) / 50 ) * 50 + 25;
 
-					scene.add(cube);
+					scene.add( cube );
 
 				}
 
@@ -117,6 +117,23 @@
 				stats.domElement.style.top = '0px';
 				container.appendChild( stats.domElement );
 
+				//
+
+				window.addEventListener( 'resize', onWindowResize, false );
+
+			}
+
+			function onWindowResize() {
+
+				camera.left = window.innerWidth / - 2;
+				camera.right = window.innerWidth / 2;
+				camera.top = window.innerHeight / 2;
+				camera.bottom = window.innerHeight / - 2;
+
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
 			}
 
 			//

examples/canvas_geometry_birds.html

@@ -383,6 +383,19 @@
 
 				document.getElementById( '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 onDocumentMouseMove( event ) {

examples/canvas_geometry_cube.html

@@ -91,6 +91,23 @@
 				document.addEventListener( 'mousedown', onDocumentMouseDown, false );
 				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 );
+
 			}
 
 			//
@@ -105,6 +122,7 @@
 
 				mouseXOnMouseDown = event.clientX - windowHalfX;
 				targetRotationOnMouseDown = targetRotation;
+
 			}
 
 			function onDocumentMouseMove( event ) {
@@ -112,6 +130,7 @@
 				mouseX = event.clientX - windowHalfX;
 
 				targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;
+
 			}
 
 			function onDocumentMouseUp( event ) {
@@ -119,6 +138,7 @@
 				document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
 				document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
 				document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
+
 			}
 
 			function onDocumentMouseOut( event ) {
@@ -126,11 +146,12 @@
 				document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
 				document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
 				document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
+
 			}
 
 			function onDocumentTouchStart( event ) {
 
-				if ( event.touches.length == 1 ) {
+				if ( event.touches.length === 1 ) {
 
 					event.preventDefault();
 
@@ -138,11 +159,12 @@
 					targetRotationOnMouseDown = targetRotation;
 
 				}
+
 			}
 
 			function onDocumentTouchMove( event ) {
 
-				if ( event.touches.length == 1 ) {
+				if ( event.touches.length === 1 ) {
 
 					event.preventDefault();
 
@@ -150,6 +172,7 @@
 					targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;
 
 				}
+
 			}
 
 			//

examples/canvas_geometry_earth.html

@@ -64,7 +64,7 @@
 				scene.add( group );
 
 				// earth
-				
+
 				var earthTexture = new THREE.Texture();
 				var loader = new THREE.ImageLoader();
 
@@ -84,12 +84,12 @@
 				group.add( mesh );
 
 				// shadow
-				
+
 				var shadowTexture = new THREE.Texture();
 				var loader = new THREE.ImageLoader();
 
 				loader.addEventListener( 'load', function ( event ) {
-				
+
 					shadowTexture.image = event.content;
 					shadowTexture.needsUpdate = true;
 
@@ -116,6 +116,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 onDocumentMouseMove( event ) {

examples/canvas_geometry_hierarchy.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) {

examples/canvas_geometry_panorama.html

@@ -96,6 +96,21 @@
 				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 
+				//
+
+				window.addEventListener( 'resize', onWindowResize, false );
+
+			}
+
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+				render();
+
 			}
 
 			function loadTexture( path ) {
@@ -141,6 +156,7 @@
 					render();
 
 				}
+
 			}
 
 			function onDocumentMouseUp( event ) {

examples/canvas_geometry_panorama_fisheye.html

@@ -106,6 +106,21 @@
 				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 
+				//
+
+				window.addEventListener( 'resize', onWindowResize, false );
+
+			}
+
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+				render();
+
 			}
 
 			function loadTexture( path ) {

examples/canvas_geometry_terrain.html

@@ -98,6 +98,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 generateHeight( width, height ) {

examples/canvas_geometry_text.html

@@ -120,6 +120,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/canvas_interactive_cubes.html

@@ -102,6 +102,19 @@
 
 				document.addEventListener( 'mousedown', onDocumentMouseDown, 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/canvas_interactive_cubes_tween.html

@@ -81,6 +81,19 @@
 
 				document.addEventListener( 'mousedown', onDocumentMouseDown, 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/canvas_interactive_particles.html

@@ -95,6 +95,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/canvas_interactive_voxelpainter.html

@@ -115,6 +115,19 @@
 				document.addEventListener( 'keydown', onDocumentKeyDown, false );
 				document.addEventListener( 'keyup', onDocumentKeyUp, 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/canvas_lights_pointlights.html

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

examples/canvas_lights_pointlights_smooth.html

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

examples/canvas_lines.html

@@ -97,6 +97,23 @@
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 				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 );
+
 			}
 
 			//
@@ -105,6 +122,7 @@
 
 				mouseX = event.clientX - windowHalfX;
 				mouseY = event.clientY - windowHalfY;
+
 			}
 
 			function onDocumentTouchStart( event ) {

examples/canvas_lines_sphere.html

@@ -111,6 +111,23 @@
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 				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/canvas_materials.html

@@ -162,6 +162,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 loadImage( path ) {

examples/canvas_materials_depth.html

@@ -33,9 +33,6 @@
 			var mouseX = 0;
 			var mouseXOnMouseDown = 0;
 
-			var windowHalfX = window.innerWidth / 2;
-			var windowHalfY = window.innerHeight / 2;
-
 			var moveForward = false;
 			var moveBackwards = false;
 			var moveLeft = false;
@@ -121,6 +118,20 @@
 
 				document.addEventListener( 'keydown', onDocumentKeyDown, false );
 				document.addEventListener( 'keyup', onDocumentKeyUp, false );
+
+				//
+
+				window.addEventListener( 'resize', onWindowResize, false );
+
+			}
+
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
 			}
 
 			function onDocumentKeyDown( event ) {

examples/canvas_materials_normal.html

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

examples/canvas_materials_reflection.html

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

examples/canvas_materials_video.html

@@ -151,6 +151,7 @@
 						scene.add( particle );
 
 					}
+
 				}
 
 				renderer = new THREE.CanvasRenderer();
@@ -165,9 +166,25 @@
 
 				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 onDocumentMouseMove(event) {
+			function onDocumentMouseMove( event ) {
 
 				mouseX = ( event.clientX - windowHalfX );
 				mouseY = ( event.clientY - windowHalfY ) * 0.2;

examples/canvas_particles_floor.html

@@ -88,11 +88,28 @@
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 				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) {
+			function onDocumentMouseMove( event ) {
 
 				mouseX = event.clientX - windowHalfX;
 				mouseY = event.clientY - windowHalfY;
@@ -118,6 +135,7 @@
 					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 				}
+
 			}
 
 			//

examples/canvas_particles_random.html

@@ -81,6 +81,23 @@
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 				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 );
+
 			}
 
 			//
@@ -93,24 +110,28 @@
 
 			function onDocumentTouchStart( event ) {
 
-				if ( event.touches.length == 1 ) {
+				if ( event.touches.length === 1 ) {
 
 					event.preventDefault();
 
 					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
+
 				}
+
 			}
 
 			function onDocumentTouchMove( event ) {
 
-				if ( event.touches.length == 1 ) {
+				if ( event.touches.length === 1 ) {
 
 					event.preventDefault();
 
 					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
+
 				}
+
 			}
 
 			//

examples/canvas_particles_shapes.html

@@ -138,6 +138,7 @@
 				heartShape.bezierCurveTo( x + 35, y, x + 25, y + 25, x + 25, y + 25 );
 
 				var circleLines = function ( context ) {
+
 					context.lineWidth = 0.05;
 					context.beginPath();
 					context.arc( 0, 0, 1, 0, Math.PI*2, true );
@@ -146,11 +147,13 @@
 
 					context.globalAlpha = 0.2;
 					context.fill();
+
 				}
 
 				var hue = 0;
 
 				var hearts = function ( context ) {
+
 					context.globalAlpha = 0.5;
 					var x = 0, y = 0;
 					context.scale(0.1, -0.1); // Scale so canvas render can redraw within bounds
@@ -166,6 +169,7 @@
 					context.fill();
 					context.lineWidth = 0.5; //0.05
 					context.stroke();
+
 				}
 
 				var setTargetParticle = function() {
@@ -183,6 +187,7 @@
 					particleCloud.add( particle );
 
 					return particle;
+
 				};
 
 				var onParticleCreated = function(p) {
@@ -233,6 +238,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 );
+
 			}
 
 			//
@@ -246,10 +267,14 @@
 				mouseXOnMouseDown = event.clientX - windowHalfX;
 				targetRotationOnMouseDown = targetRotation;
 
-				if (sparksEmitter.isRunning()) {
+				if ( sparksEmitter.isRunning() ) {
+
 					sparksEmitter.stop();
+
 				} else {
+
 					sparksEmitter.start();
+
 				}
 
 			}

examples/canvas_particles_sprites.html

@@ -72,8 +72,24 @@
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 				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 generateSprite() {
 

examples/canvas_particles_waves.html

@@ -93,6 +93,23 @@
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 				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 );
+
 			}
 
 			//
@@ -106,7 +123,7 @@
 
 			function onDocumentTouchStart( event ) {
 
-				if ( event.touches.length == 1 ) {
+				if ( event.touches.length === 1 ) {
 
 					event.preventDefault();
 
@@ -119,7 +136,7 @@
 
 			function onDocumentTouchMove( event ) {
 
-				if ( event.touches.length == 1 ) {
+				if ( event.touches.length === 1 ) {
 
 					event.preventDefault();
 
@@ -158,6 +175,7 @@
 						particle.scale.x = particle.scale.y = ( Math.sin( ( ix + count ) * 0.3 ) + 1 ) * 2 + ( Math.sin( ( iy + count ) * 0.5 ) + 1 ) * 2;
 
 					}
+
 				}
 
 				renderer.render( scene, camera );

examples/canvas_performance.html

@@ -27,15 +27,6 @@
 
 			var sphere, plane;
 
-			var targetRotation = 0;
-			var targetRotationOnMouseDown = 0;
-
-			var mouseX = 0;
-			var mouseXOnMouseDown = 0;
-
-			var windowHalfX = window.innerWidth / 2;
-			var windowHalfY = window.innerHeight / 2;
-
 			init();
 			animate();
 
@@ -112,6 +103,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/canvas_sandbox.html

@@ -155,6 +155,23 @@
 
 				document.addEventListener( 'keydown', onDocumentKeyDown, false );
 				document.addEventListener( 'keyup', onDocumentKeyUp, 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 onDocumentKeyDown( event ) {

examples/js/effects/AsciiEffect.js

 /*
- * @author zz85 / https://github.com/zz85 
+ * @author zz85 / https://github.com/zz85
  *
  * Ascii generation is based on http://www.nihilogic.dk/labs/jsascii/
  * Maybe more about this later with a blog post at http://lab4games.net/zz85/blog
- * 
+ *
  * 16 April 2012 - @blurspline
  */
-  
+
 THREE.AsciiEffect = function ( renderer, charSet, options ) {
 
 	// its fun to create one your own!
-	charSet = (charSet === undefined) ? ' .:-=+*#%@' : charSet; 
-	
-	// ' .,:;=|iI+hHOE#`$'; 
+
+	charSet = ( charSet === undefined ) ? ' .:-=+*#%@' : charSet;
+
+	// ' .,:;=|iI+hHOE#`$';
 	// darker bolder character set from https://github.com/saw/Canvas-ASCII-Art/
 	// ' .\'`^",:;Il!i~+_-?][}{1)(|/tfjrxnuvczXYUJCLQ0OZmwqpdbkhao*#MW&8%B@$'.split('');
 
-	if (!options) options = {};
+	if ( !options ) options = {};
+
 	// Some ASCII settings
+
 	var bResolution = !options['resolution'] ? 0.15 : options['resolution']; // Higher for more details
 	var iScale = !options['scale'] ? 1 : options['scale'];
 	var bColor = !options['color'] ? false : options['color']; // nice but slows down rendering!
 	var bAlpha = !options['alpha'] ? false : options['alpha']; // Transparency
 	var bBlock = !options['block'] ? false : options['block']; // blocked characters. like good O dos
 	var bInvert = !options['invert'] ? false : options['invert']; // black is white, white is black
-	
+
 	var strResolution = 'low';
 
 	var width, height;
@@ -33,7 +36,7 @@ THREE.AsciiEffect = function ( renderer, charSet, options ) {
 	domElement.style.cursor = 'default';
 
 	var oAscii = document.createElement("table");
-	domElement.appendChild(oAscii);
+	domElement.appendChild( oAscii );
 
 	var iWidth, iHeight;
 	var oImg;
@@ -61,6 +64,7 @@ THREE.AsciiEffect = function ( renderer, charSet, options ) {
 
 
 	// Throw in ascii library from http://www.nihilogic.dk/labs/jsascii/jsascii.js
+
 	/*
 	* jsAscii 0.1
 	* Copyright (c) 2008 Jacob Seidelin, jseidelin@nihilogic.dk, http://blog.nihilogic.dk/
@@ -68,8 +72,9 @@ THREE.AsciiEffect = function ( renderer, charSet, options ) {
 	*/
 
 	function initAsciiSize() {
-		iWidth = Math.round(width * fResolution);
-		iHeight = Math.round(height * fResolution);
+
+		iWidth = Math.round( width * fResolution );
+		iHeight = Math.round( height * fResolution );
 
 		oCanvas.width = iWidth;
 		oCanvas.height = iHeight;
@@ -78,9 +83,12 @@ THREE.AsciiEffect = function ( renderer, charSet, options ) {
 		// oCanvas.style.height = iHeight;
 
 		oImg = renderer.domElement;
-		if (oImg.style.backgroundColor) {
+
+		if ( oImg.style.backgroundColor ) {
+
 			oAscii.rows[0].cells[0].style.backgroundColor = oImg.style.backgroundColor;
 			oAscii.rows[0].cells[0].style.color = oImg.style.color;
+
 		}
 
 		oAscii.cellSpacing = 0;
@@ -112,6 +120,7 @@ THREE.AsciiEffect = function ( renderer, charSet, options ) {
 	if (!oCanvas.getContext) {
 		return;
 	}
+
 	var oCtx = oCanvas.getContext("2d");
 	if (!oCtx.getImageData) {
 		return;
@@ -119,49 +128,63 @@ THREE.AsciiEffect = function ( renderer, charSet, options ) {
 
 	var aCharList = (bColor ? aDefaultColorCharList : aDefaultCharList);
 
-	if (charSet) aCharList = charSet; 
+	if (charSet) aCharList = charSet;
 
 	var fResolution = 0.5;
-	switch (strResolution) {
+
+	switch ( strResolution ) {
+
 		case "low" : 	fResolution = 0.25; break;
 		case "medium" : fResolution = 0.5; break;
 		case "high" : 	fResolution = 1; break;
+
 	}
 
-	if (bResolution) fResolution = bResolution;
+	if ( bResolution ) fResolution = bResolution;
 
 	// Setup dom
+
 	var fFontSize = (2/fResolution)*iScale;
 	var fLineHeight = (2/fResolution)*iScale;
 
 	// adjust letter-spacing for all combinations of scale and resolution to get it to fit the image width.
+
 	var fLetterSpacing = 0;
-	if (strResolution == "low") {
+
+	if ( strResolution == "low" ) {
+
 		switch (iScale) {
 			case 1 : fLetterSpacing = -1; break;
-			case 2 : 
+			case 2 :
 			case 3 : fLetterSpacing = -2.1; break;
 			case 4 : fLetterSpacing = -3.1; break;
 			case 5 : fLetterSpacing = -4.15; break;
 		}
+
 	}
-	if (strResolution == "medium") {
+
+	if ( strResolution == "medium" ) {
+
 		switch (iScale) {
 			case 1 : fLetterSpacing = 0; break;
 			case 2 : fLetterSpacing = -1; break;
 			case 3 : fLetterSpacing = -1.04; break;
-			case 4 : 
+			case 4 :
 			case 5 : fLetterSpacing = -2.1; break;
 		}
+
 	}
-	if (strResolution == "high") {
+
+	if ( strResolution == "high" ) {
+
 		switch (iScale) {
-			case 1 : 
+			case 1 :
 			case 2 : fLetterSpacing = 0; break;
-			case 3 : 
-			case 4 : 
+			case 3 :
+			case 4 :
 			case 5 : fLetterSpacing = -1; break;
 		}
+
 	}
 
 
@@ -169,10 +192,11 @@ THREE.AsciiEffect = function ( renderer, charSet, options ) {
 
 
 	// convert img element to ascii
-	function asciifyImage(canvasRenderer, oAscii) {
 
-		oCtx.clearRect(0, 0, iWidth, iHeight);
-		oCtx.drawImage(oCanvasImg, 0, 0, iWidth, iHeight);
+	function asciifyImage( canvasRenderer, oAscii ) {
+
+		oCtx.clearRect( 0, 0, iWidth, iHeight );
+		oCtx.drawImage( oCanvasImg, 0, 0, iWidth, iHeight );
 		var oImgData = oCtx.getImageData(0, 0, iWidth, iHeight).data;
 
 		// Coloring loop starts now
@@ -183,7 +207,7 @@ THREE.AsciiEffect = function ( renderer, charSet, options ) {
 		for (var y=0;y<iHeight;y+=2) {
 			for (var x=0;x<iWidth;x++) {
 				var iOffset = (y*iWidth + x) * 4;
-	
+
 				var iRed = oImgData[iOffset];
 				var iGreen = oImgData[iOffset + 1];
 				var iBlue = oImgData[iOffset + 2];
@@ -194,14 +218,14 @@ THREE.AsciiEffect = function ( renderer, charSet, options ) {
 
 				fBrightness = (0.3*iRed + 0.59*iGreen + 0.11*iBlue) / 255;
 				// fBrightness = (0.3*iRed + 0.5*iGreen + 0.3*iBlue) / 255;
-				
+
 				if (iAlpha == 0) {
 					// should calculate alpha instead, but quick hack :)
-					//fBrightness *= (iAlpha / 255); 
+					//fBrightness *= (iAlpha / 255);
 					fBrightness = 1;
-					
-				} 
-							 
+
+				}
+
 				iCharIdx = Math.floor((1-fBrightness) * (aCharList.length-1));
 
 				if (bInvert) {
@@ -212,7 +236,7 @@ THREE.AsciiEffect = function ( renderer, charSet, options ) {
 				//fBrightness = Math.floor(fBrightness * 10);
 				//strThisChar = fBrightness;
 
-				var strThisChar = aCharList[iCharIdx];		
+				var strThisChar = aCharList[iCharIdx];
 
 				if (strThisChar===undefined || strThisChar == " ")
 					strThisChar = "&nbsp;";
@@ -229,14 +253,14 @@ THREE.AsciiEffect = function ( renderer, charSet, options ) {
 			}
 			strChars += "<br/>";
 		}
-	
+
 		oAscii.innerHTML = "<tr><td>" + strChars + "</td></tr>";
 
 		// console.timeEnd('rendering');
-		
+
 		// return oAscii;
 	}
 
 	// end modified asciifyImage block
-	
+
 };

examples/misc_lights_test.html

@@ -178,8 +178,8 @@
 				camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
 				camera.updateProjectionMatrix();
 
-				if ( render_canvas ) canvasRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
-				if ( render_gl && has_gl ) webglRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
+				if ( canvasRenderer ) canvasRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
+				if ( webglRenderer ) webglRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 
 			}
 

examples/webgl_loader_json_objconverter.html

@@ -205,8 +205,8 @@
 				camera.aspect = window.innerWidth / window.innerHeight;
 				camera.updateProjectionMatrix();
 
-				if ( render_gl && has_gl ) webglRenderer.setSize( window.innerWidth, window.innerHeight );
-				if ( render_canvas ) canvasRenderer.setSize( window.innerWidth, window.innerHeight );
+				if ( webglRenderer ) webglRenderer.setSize( window.innerWidth, window.innerHeight );
+				if ( canvasRenderer ) canvasRenderer.setSize( window.innerWidth, window.innerHeight );
 
 			}
 

examples/webgl_loader_obj.html

@@ -46,7 +46,7 @@
 
 			var windowHalfX = window.innerWidth / 2;
 			var windowHalfY = window.innerHeight / 2;
-		
+
 
 			init();
 			animate();
@@ -104,7 +104,7 @@
 				});
 				loader.load( 'obj/male02/male02.obj' );
 
-				// 
+				//
 
 				renderer = new THREE.WebGLRenderer();
 				renderer.setSize( window.innerWidth, window.innerHeight );
@@ -112,6 +112,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 onDocumentMouseMove( event ) {

examples/webgl_loader_scene.html

@@ -311,6 +311,22 @@
 
 				$( "plus_exp" ).addEventListener( 'click', createToggle( "exp" ), 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 setButtonActive( id ) {

examples/webgl_loader_scene_blender.html

@@ -278,6 +278,22 @@
 
 				$( "plus_exp" ).addEventListener( 'click', createToggle( "exp" ), 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 setButtonActive( id ) {

examples/webgl_loader_utf8.html

@@ -125,6 +125,22 @@
 
 				}, { scale: 0.707192, offsetX: -0.109362, offsetY: -0.006435, offsetZ: -0.268751 } );
 
+				//
+
+				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 callbackModel( geometry, s, color, x, y, z ) {

examples/webgl_loader_vtk.html

@@ -110,6 +110,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 animate() {