Fix linter errors in examples WebGL A-L

examples/webgl_animation_skinning_blending.html

@@ -183,23 +183,39 @@
 				var folder6 = panel.addFolder( 'General Speed' );
 
 				settings = {
-					'show model':            true,
-					'show skeleton':         false,
-					'deactivate all':        deactivateAllActions,
-					'activate all':          activateAllActions,
-					'pause/continue':        pauseContinue,
-					'make single step':      toSingleStepMode,
-					'modify step size':      0.05,
-					'from walk to idle':     function () { prepareCrossFade( walkAction, idleAction, 1.0 ) },
-					'from idle to walk':     function () { prepareCrossFade( idleAction, walkAction, 0.5 ) },
-					'from walk to run':      function () { prepareCrossFade( walkAction, runAction, 2.5 ) },
-					'from run to walk':      function () { prepareCrossFade( runAction, walkAction, 5.0 ) },
-					'use default duration':  true,
-					'set custom duration':   3.5,
-					'modify idle weight':    0.0,
-					'modify walk weight':    1.0,
-					'modify run weight':     0.0,
-					'modify time scale':     1.0
+					'show model': true,
+					'show skeleton': false,
+					'deactivate all': deactivateAllActions,
+					'activate all': activateAllActions,
+					'pause/continue': pauseContinue,
+					'make single step': toSingleStepMode,
+					'modify step size': 0.05,
+					'from walk to idle': function () {
+
+						prepareCrossFade( walkAction, idleAction, 1.0 );
+
+					},
+					'from idle to walk': function () {
+
+						prepareCrossFade( idleAction, walkAction, 0.5 );
+
+					},
+					'from walk to run': function () {
+
+						prepareCrossFade( walkAction, runAction, 2.5 );
+
+					},
+					'from run to walk': function () {
+
+						prepareCrossFade( runAction, walkAction, 5.0 );
+
+					},
+					'use default duration': true,
+					'set custom duration': 3.5,
+					'modify idle weight': 0.0,
+					'modify walk weight': 1.0,
+					'modify run weight': 0.0,
+					'modify time scale': 1.0
 				};
 
 				folder1.add( settings, 'show model' ).onChange( showModel );
@@ -215,9 +231,21 @@
 				crossFadeControls.push( folder4.add( settings, 'from run to walk' ) );
 				folder4.add( settings, 'use default duration' );
 				folder4.add( settings, 'set custom duration', 0, 10, 0.01 );
-				folder5.add( settings, 'modify idle weight', 0.0, 1.0, 0.01 ).listen().onChange( function ( weight ) { setWeight( idleAction, weight ) } );
-				folder5.add( settings, 'modify walk weight', 0.0, 1.0, 0.01 ).listen().onChange( function ( weight ) { setWeight( walkAction, weight ) } );
-				folder5.add( settings, 'modify run weight', 0.0, 1.0, 0.01 ).listen().onChange( function ( weight ) { setWeight( runAction, weight ) } );
+				folder5.add( settings, 'modify idle weight', 0.0, 1.0, 0.01 ).listen().onChange( function ( weight ) {
+
+					setWeight( idleAction, weight );
+
+				} );
+				folder5.add( settings, 'modify walk weight', 0.0, 1.0, 0.01 ).listen().onChange( function ( weight ) {
+
+					setWeight( walkAction, weight );
+
+				} );
+				folder5.add( settings, 'modify run weight', 0.0, 1.0, 0.01 ).listen().onChange( function ( weight ) {
+
+					setWeight( runAction, weight );
+
+				} );
 				folder6.add( settings, 'modify time scale', 0.0, 1.5, 0.01 ).onChange( modifyTimeScale );
 
 				folder1.open();
@@ -380,7 +408,6 @@
 
 			}
 
-
 			function setCrossFadeDuration( defaultDuration ) {
 
 				// Switch default crossfade duration <-> custom crossfade duration
@@ -397,7 +424,6 @@
 
 			}
 
-
 			function synchronizeCrossFade( startAction, endAction, duration ) {
 
 				mixer.addEventListener( 'loop', onLoopFinished );
@@ -416,7 +442,6 @@
 
 			}
 
-
 			function executeCrossFade( startAction, endAction, duration ) {
 
 				// Not only the start action, but also the end action must get a weight of 1 before fading
@@ -431,7 +456,6 @@
 
 			}
 
-
 			// This function is needed, since animationAction.crossFadeTo() disables its start action and sets
 			// the start action's timeScale to ((start animation's duration) / (end animation's duration))
 
@@ -443,7 +467,6 @@
 
 			}
 
-
 			// Called by the render loop
 
 			function updateWeightSliders() {
@@ -454,7 +477,6 @@
 
 			}
 
-
 			// Called by the render loop
 
 			function updateCrossFadeControls() {
@@ -486,7 +508,6 @@
 
 			}
 
-
 			function onWindowResize() {
 
 				camera.aspect = window.innerWidth / window.innerHeight;
@@ -496,7 +517,6 @@
 
 			}
 
-
 			function animate() {
 
 				// Render loop

examples/webgl_animation_skinning_morph.html

@@ -53,9 +53,9 @@
 
 			var SCREEN_WIDTH = window.innerWidth;
 			var SCREEN_HEIGHT = window.innerHeight;
-			var FLOOR = -250;
+			var FLOOR = - 250;
 
-			var container,stats;
+			var container, stats;
 
 			var camera, scene;
 			var renderer;
@@ -99,7 +99,7 @@
 
 				var ground = new THREE.Mesh( geometry, material );
 				ground.position.set( 0, FLOOR, 0 );
-				ground.rotation.x = -Math.PI/2;
+				ground.rotation.x = - Math.PI / 2;
 				scene.add( ground );
 
 				ground.receiveShadow = true;
@@ -120,10 +120,10 @@
 
 				var d = 390;
 
-				light.shadow.camera.left = -d;
+				light.shadow.camera.left = - d;
 				light.shadow.camera.right = d;
 				light.shadow.camera.top = d * 1.5;
-				light.shadow.camera.bottom = -d;
+				light.shadow.camera.bottom = - d;
 
 				light.shadow.camera.far = 3500;
 
@@ -152,7 +152,7 @@
 				var loader = new THREE.JSONLoader();
 				loader.load( "models/skinned/knight.js", function ( geometry, materials ) {
 
-					createScene( geometry, materials, 0, FLOOR, -300, 60 );
+					createScene( geometry, materials, 0, FLOOR, - 300, 60 );
 
 					// GUI
 
@@ -222,7 +222,7 @@
 
 				mixer = new THREE.AnimationMixer( mesh );
 
-				bonesClip = geometry.animations[0];
+				bonesClip = geometry.animations[ 0 ];
 				facesClip = THREE.AnimationClip.CreateFromMorphTargetSequence( 'facialExpressions', mesh.geometry.morphTargets, 3 );
 
 			}
@@ -230,28 +230,34 @@
 			function initGUI() {
 
 				var API = {
-					'show model'    	: true,
-					'show skeleton'		: false,
-					'show 2nd model'	: false,
-					'show mem. info'	: false
+					'show model': true,
+					'show skeleton': false,
+					'show 2nd model': false,
+					'show mem. info': false
 				};
 
 				var gui = new dat.GUI();
 
-				gui.add( API, 'show model' ).onChange( function() {
-						mesh.visible = API[ 'show model' ];
+				gui.add( API, 'show model' ).onChange( function () {
+
+					mesh.visible = API[ 'show model' ];
+
 				} );
 
-				gui.add( API, 'show skeleton' ).onChange( function() {
-						helper.visible = API[ 'show skeleton' ];
+				gui.add( API, 'show skeleton' ).onChange( function () {
+
+					helper.visible = API[ 'show skeleton' ];
+
 				} );
 
-				gui.add( API, 'show 2nd model' ).onChange( function() {
-						mesh2.visible = API[ 'show 2nd model' ];
+				gui.add( API, 'show 2nd model' ).onChange( function () {
+
+					mesh2.visible = API[ 'show 2nd model' ];
+
 				} );
 
 
-				gui.add( API, 'show mem. info' ).onChange( function() {
+				gui.add( API, 'show mem. info' ).onChange( function () {
 
 					showMemInfo = API[ 'show mem. info' ];
 					domMemInfo.style.display = showMemInfo ? 'block' : 'none';
@@ -259,7 +265,7 @@
 				} );
 
 				// utility function used for drop-down options lists in the GUI
-				var objectNames = function( objects ) {
+				var objectNames = function ( objects ) {
 
 					var result = [];
 
@@ -295,14 +301,14 @@
 
 							},
 
-							'stop()': function() {
+							'stop()': function () {
 
 								action = mixer.clipAction( clip, root );
 								action.stop();
 
 							},
 
-							'reset()': function() {
+							'reset()': function () {
 
 								action = mixer.clipAction( clip, root );
 								action.reset();
@@ -373,7 +379,7 @@
 
 							},
 
-							'play delayed': function() {
+							'play delayed': function () {
 
 								action = mixer.clipAction( clip, root );
 								action.startAt( mixer.time + 0.5 ).play();
@@ -406,14 +412,14 @@
 
 							},
 
-							'fade in': function() {
+							'fade in': function () {
 
 								action = mixer.clipAction( clip, root );
 								action.reset().fadeIn( 0.25 ).play();
 
 							},
 
-							'fade out': function() {
+							'fade out': function () {
 
 								action = mixer.clipAction( clip, root );
 								action.fadeOut( 0.25 ).play();
@@ -446,11 +452,11 @@
 
 							},
 
-							'time warp': function() {
+							'time warp': function () {
 
 								action = mixer.clipAction( clip, root );
 								var timeScaleNow = action.getEffectiveTimeScale();
-								var destTimeScale = timeScaleNow > 0 ? -1 : 1;
+								var destTimeScale = timeScaleNow > 0 ? - 1 : 1;
 								action.warp( timeScaleNow, destTimeScale, 4 ).play();
 
 							},
@@ -481,7 +487,11 @@
 
 							},
 
-							get 'local root'() { return rootName; },
+							get 'local root'() {
+
+								return rootName;
+
+							},
 
 							set 'local root'( value ) {
 
@@ -500,14 +510,14 @@
 					folder.add( API, 'paused =' ).listen();
 					folder.add( API, 'enabled =' ).listen();
 					folder.add( API, 'clamp =' );
-					folder.add( API, 'isRunning() =').listen();
+					folder.add( API, 'isRunning() =' ).listen();
 					folder.add( API, 'play delayed' );
 					folder.add( API, 'weight =', 0, 1 ).listen();
 					folder.add( API, 'eff. weight', 0, 1 ).listen();
 					folder.add( API, 'fade in' );
 					folder.add( API, 'fade out' );
-					folder.add( API, 'timeScale =', -2, 2).listen();
-					folder.add( API, 'eff.T.Scale', -2, 2).listen();
+					folder.add( API, 'timeScale =', - 2, 2 ).listen();
+					folder.add( API, 'eff.T.Scale', - 2, 2 ).listen();
 					folder.add( API, 'time warp' );
 					folder.add( API, 'loop mode', {
 						"LoopOnce": THREE.LoopOnce,
@@ -525,7 +535,7 @@
 				clipControl( gui, mixer, bonesClip, [ null, mesh, mesh2 ] );
 				clipControl( gui, mixer, facesClip, [ null, mesh, mesh2 ] );
 
-				var memoryControl = function( gui, mixer, clips, rootObjects ) {
+				var memoryControl = function ( gui, mixer, clips, rootObjects ) {
 
 					var clipNames = objectNames( clips ),
 						rootNames = objectNames( rootObjects );
@@ -540,7 +550,11 @@
 
 						API = {
 
-							get 'clip'() { return clipName; },
+							get 'clip'() {
+
+								return clipName;
+
+							},
 
 							set 'clip'( value ) {
 
@@ -549,7 +563,11 @@
 
 							},
 
-							get 'root'() { return rootName; },
+							get 'root'() {
+
+								return rootName;
+
+							},
 
 							set 'root'( value ) {
 
@@ -558,19 +576,19 @@
 
 							},
 
-							'uncache clip': function() {
+							'uncache clip': function () {
 
 								mixer.uncacheClip( clip );
 
 							},
 
-							'uncache root': function() {
+							'uncache root': function () {
 
 								mixer.uncacheRoot( root );
 
 							},
 
-							'uncache action': function() {
+							'uncache action': function () {
 
 								mixer.uncacheAction( clip, root );
 
@@ -587,7 +605,7 @@
 				};
 
 				memoryControl( gui, mixer,
-						[ bonesClip, facesClip ], [ mesh, mesh2 ] );
+					[ bonesClip, facesClip ], [ mesh, mesh2 ] );
 
 
 			}
@@ -632,7 +650,7 @@
 
 				camera.lookAt( scene.position );
 
-				if( mixer ) {
+				if ( mixer ) {
 
 					mixer.update( delta );
 

examples/webgl_buffergeometry.html

@@ -77,7 +77,7 @@
 				scene.add( light1 );
 
 				var light2 = new THREE.DirectionalLight( 0xffffff, 1.5 );
-				light2.position.set( 0, -1, 0 );
+				light2.position.set( 0, - 1, 0 );
 				scene.add( light2 );
 
 				//
@@ -160,7 +160,11 @@
 
 				}
 
-				function disposeArray() { this.array = null; }
+				function disposeArray() {
+
+					this.array = null;
+
+				}
 
 				geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ).onUpload( disposeArray ) );
 				geometry.addAttribute( 'normal', new THREE.Float32BufferAttribute( normals, 3 ).onUpload( disposeArray ) );

examples/webgl_buffergeometry_constructed_from_geometry.html

@@ -192,7 +192,7 @@
 
 		}
 
-		function animate( time ) {
+		function animate() {
 
 			requestAnimationFrame( animate );
 

examples/webgl_buffergeometry_custom_attributes_particles.html

@@ -99,22 +99,22 @@
 
 			uniforms = {
 
-				texture:   { value: new THREE.TextureLoader().load( "textures/sprites/spark1.png" ) }
+				texture: { value: new THREE.TextureLoader().load( "textures/sprites/spark1.png" ) }
 
 			};
 
 			var shaderMaterial = new THREE.ShaderMaterial( {
 
-				uniforms:       uniforms,
-				vertexShader:   document.getElementById( 'vertexshader' ).textContent,
+				uniforms: uniforms,
+				vertexShader: document.getElementById( 'vertexshader' ).textContent,
 				fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
 
-				blending:       THREE.AdditiveBlending,
-				depthTest:      false,
-				transparent:    true,
-				vertexColors:   true
+				blending: THREE.AdditiveBlending,
+				depthTest: false,
+				transparent: true,
+				vertexColors: true
 
-			});
+			} );
 
 
 			var radius = 200;
@@ -137,7 +137,7 @@
 
 				colors.push( color.r, color.g, color.b );
 
-				sizes.push( 20 );;
+				sizes.push( 20 );
 
 			}
 
@@ -191,7 +191,7 @@
 
 			var sizes = geometry.attributes.size.array;
 
-			for ( var i = 0; i < particles; i++ ) {
+			for ( var i = 0; i < particles; i ++ ) {
 
 				sizes[ i ] = 10 * ( 1 + Math.sin( 0.1 * i + time ) );
 

examples/webgl_buffergeometry_drawcalls.html

@@ -73,17 +73,25 @@
 
 				var gui = new dat.GUI();
 
-				gui.add( effectController, "showDots" ).onChange( function( value ) { pointCloud.visible = value; } );
-				gui.add( effectController, "showLines" ).onChange( function( value ) { linesMesh.visible = value; } );
+				gui.add( effectController, "showDots" ).onChange( function ( value ) {
+
+					pointCloud.visible = value;
+
+				} );
+				gui.add( effectController, "showLines" ).onChange( function ( value ) {
+
+					linesMesh.visible = value;
+
+				} );
 				gui.add( effectController, "minDistance", 10, 300 );
 				gui.add( effectController, "limitConnections" );
 				gui.add( effectController, "maxConnections", 0, 30, 1 );
-				gui.add( effectController, "particleCount", 0, maxParticleCount, 1 ).onChange( function( value ) {
+				gui.add( effectController, "particleCount", 0, maxParticleCount, 1 ).onChange( function ( value ) {
 
 					particleCount = parseInt( value );
 					particles.setDrawRange( 0, particleCount );
 
-				});
+				} );
 
 			}
 
@@ -93,8 +101,6 @@
 
 				container = document.getElementById( 'container' );
 
-				//
-
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 4000 );
 				camera.position.z = 1750;
 
@@ -128,19 +134,19 @@
 				particles = new THREE.BufferGeometry();
 				particlePositions = new Float32Array( maxParticleCount * 3 );
 
-				for ( var i = 0; i < maxParticleCount; i++ ) {
+				for ( var i = 0; i < maxParticleCount; i ++ ) {
 
 					var x = Math.random() * r - r / 2;
 					var y = Math.random() * r - r / 2;
 					var z = Math.random() * r - r / 2;
 
-					particlePositions[ i * 3     ] = x;
+					particlePositions[ i * 3 ] = x;
 					particlePositions[ i * 3 + 1 ] = y;
 					particlePositions[ i * 3 + 2 ] = z;
 
 					// add it to the geometry
 					particlesData.push( {
-						velocity: new THREE.Vector3( -1 + Math.random() * 2, -1 + Math.random() * 2,  -1 + Math.random() * 2 ),
+						velocity: new THREE.Vector3( - 1 + Math.random() * 2, - 1 + Math.random() * 2, - 1 + Math.random() * 2 ),
 						numConnections: 0
 					} );
 
@@ -206,68 +212,71 @@
 				var colorpos = 0;
 				var numConnected = 0;
 
-				for ( var i = 0; i < particleCount; i++ )
+				for ( var i = 0; i < particleCount; i ++ )
 					particlesData[ i ].numConnections = 0;
 
-				for ( var i = 0; i < particleCount; i++ ) {
+				for ( var i = 0; i < particleCount; i ++ ) {
 
 					// get the particle
-					var particleData = particlesData[i];
+					var particleData = particlesData[ i ];
 
-					particlePositions[ i * 3     ] += particleData.velocity.x;
+					particlePositions[ i * 3 ] += particleData.velocity.x;
 					particlePositions[ i * 3 + 1 ] += particleData.velocity.y;
 					particlePositions[ i * 3 + 2 ] += particleData.velocity.z;
 
-					if ( particlePositions[ i * 3 + 1 ] < -rHalf || particlePositions[ i * 3 + 1 ] > rHalf )
-						particleData.velocity.y = -particleData.velocity.y;
+					if ( particlePositions[ i * 3 + 1 ] < - rHalf || particlePositions[ i * 3 + 1 ] > rHalf )
+						particleData.velocity.y = - particleData.velocity.y;
 
-					if ( particlePositions[ i * 3 ] < -rHalf || particlePositions[ i * 3 ] > rHalf )
-						particleData.velocity.x = -particleData.velocity.x;
+					if ( particlePositions[ i * 3 ] < - rHalf || particlePositions[ i * 3 ] > rHalf )
+						particleData.velocity.x = - particleData.velocity.x;
 
-					if ( particlePositions[ i * 3 + 2 ] < -rHalf || particlePositions[ i * 3 + 2 ] > rHalf )
-						particleData.velocity.z = -particleData.velocity.z;
+					if ( particlePositions[ i * 3 + 2 ] < - rHalf || particlePositions[ i * 3 + 2 ] > rHalf )
+						particleData.velocity.z = - particleData.velocity.z;
 
 					if ( effectController.limitConnections && particleData.numConnections >= effectController.maxConnections )
 						continue;
 
 					// Check collision
-					for ( var j = i + 1; j < particleCount; j++ ) {
+					for ( var j = i + 1; j < particleCount; j ++ ) {
 
 						var particleDataB = particlesData[ j ];
 						if ( effectController.limitConnections && particleDataB.numConnections >= effectController.maxConnections )
 							continue;
 
-						var dx = particlePositions[ i * 3     ] - particlePositions[ j * 3     ];
+						var dx = particlePositions[ i * 3 ] - particlePositions[ j * 3 ];
 						var dy = particlePositions[ i * 3 + 1 ] - particlePositions[ j * 3 + 1 ];
 						var dz = particlePositions[ i * 3 + 2 ] - particlePositions[ j * 3 + 2 ];
 						var dist = Math.sqrt( dx * dx + dy * dy + dz * dz );
 
 						if ( dist < effectController.minDistance ) {
 
-							particleData.numConnections++;
-							particleDataB.numConnections++;
+							particleData.numConnections ++;
+							particleDataB.numConnections ++;
 
 							var alpha = 1.0 - dist / effectController.minDistance;
 
-							positions[ vertexpos++ ] = particlePositions[ i * 3     ];
-							positions[ vertexpos++ ] = particlePositions[ i * 3 + 1 ];
-							positions[ vertexpos++ ] = particlePositions[ i * 3 + 2 ];
+							positions[ vertexpos ++ ] = particlePositions[ i * 3 ];
+							positions[ vertexpos ++ ] = particlePositions[ i * 3 + 1 ];
+							positions[ vertexpos ++ ] = particlePositions[ i * 3 + 2 ];
 
-							positions[ vertexpos++ ] = particlePositions[ j * 3     ];
-							positions[ vertexpos++ ] = particlePositions[ j * 3 + 1 ];
-							positions[ vertexpos++ ] = particlePositions[ j * 3 + 2 ];
+							positions[ vertexpos ++ ] = particlePositions[ j * 3 ];
+							positions[ vertexpos ++ ] = particlePositions[ j * 3 + 1 ];
+							positions[ vertexpos ++ ] = particlePositions[ j * 3 + 2 ];
 
-							colors[ colorpos++ ] = alpha;
-							colors[ colorpos++ ] = alpha;
-							colors[ colorpos++ ] = alpha;
+							colors[ colorpos ++ ] = alpha;
+							colors[ colorpos ++ ] = alpha;
+							colors[ colorpos ++ ] = alpha;
 
-							colors[ colorpos++ ] = alpha;
-							colors[ colorpos++ ] = alpha;
-							colors[ colorpos++ ] = alpha;
+							colors[ colorpos ++ ] = alpha;
+							colors[ colorpos ++ ] = alpha;
+							colors[ colorpos ++ ] = alpha;
+
+							numConnected ++;
 
-							numConnected++;
 						}
+
 					}
+
 				}
 
 

examples/webgl_buffergeometry_instancing.html

@@ -141,8 +141,8 @@
 			var orientationsStart = [];
 			var orientationsEnd = [];
 
-			positions.push( 0.025, -0.025, 0 );
-			positions.push( -0.025, 0.025, 0 );
+			positions.push( 0.025, - 0.025, 0 );
+			positions.push( - 0.025, 0.025, 0 );
 			positions.push( 0, 0, 0.025 );
 
 			// instanced attributes
@@ -233,7 +233,7 @@
 
 		}
 
-		function onWindowResize( event ) {
+		function onWindowResize() {
 
 			camera.aspect = window.innerWidth / window.innerHeight;
 			camera.updateProjectionMatrix();

examples/webgl_buffergeometry_instancing2.html

@@ -222,7 +222,7 @@
 
 		}
 
-		function onWindowResize( event ) {
+		function onWindowResize() {
 
 			camera.aspect = window.innerWidth / window.innerHeight;
 			camera.updateProjectionMatrix();

examples/webgl_buffergeometry_instancing_billboards.html

@@ -126,8 +126,10 @@
 			renderer = new THREE.WebGLRenderer();
 
 			if ( renderer.extensions.get( 'ANGLE_instanced_arrays' ) === null ) {
+
 				document.getElementById( 'notSupported' ).style.display = '';
 				return false;
+
 			}
 
 			container = document.createElement( 'div' );

examples/webgl_buffergeometry_instancing_interleaved_dynamic.html

@@ -120,7 +120,6 @@
 		container = document.getElementById( 'container' );
 
 		camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
-		//camera.position.z = 20;
 
 		scene = new THREE.Scene();
 		scene.background = new THREE.Color( 0x101010 );
@@ -137,35 +136,35 @@
 		// only use x,y,z and u,v; but x, y, z, nx, ny, nz, u, v would be a good layout
 		var vertexBuffer = new THREE.InterleavedBuffer( new Float32Array( [
 			// Front
-			-1, 1, 1, 0, 0, 0, 0, 0,
+			- 1, 1, 1, 0, 0, 0, 0, 0,
 			1, 1, 1, 0, 1, 0, 0, 0,
-			-1, -1, 1, 0, 0, 1, 0, 0,
-			1, -1, 1, 0, 1, 1, 0, 0,
+			- 1, - 1, 1, 0, 0, 1, 0, 0,
+			1, - 1, 1, 0, 1, 1, 0, 0,
 			// Back
-			1, 1, -1, 0, 1, 0, 0, 0,
-			-1, 1, -1, 0, 0, 0, 0, 0,
-			1, -1, -1, 0, 1, 1, 0, 0,
-			-1, -1, -1, 0, 0, 1, 0, 0,
+			1, 1, - 1, 0, 1, 0, 0, 0,
+			- 1, 1, - 1, 0, 0, 0, 0, 0,
+			1, - 1, - 1, 0, 1, 1, 0, 0,
+			- 1, - 1, - 1, 0, 0, 1, 0, 0,
 			// Left
-			-1, 1, -1, 0, 1, 1, 0, 0,
-			-1, 1, 1, 0, 1, 0, 0, 0,
-			-1, -1, -1, 0, 0, 1, 0, 0,
-			-1, -1, 1, 0, 0, 0, 0, 0,
+			- 1, 1, - 1, 0, 1, 1, 0, 0,
+			- 1, 1, 1, 0, 1, 0, 0, 0,
+			- 1, - 1, - 1, 0, 0, 1, 0, 0,
+			- 1, - 1, 1, 0, 0, 0, 0, 0,
 			// Right
 			1, 1, 1, 0, 1, 0, 0, 0,
-			1, 1, -1, 0, 1, 1, 0, 0,
-			1, -1, 1, 0, 0, 0, 0, 0,
-			1, -1, -1, 0, 0, 1, 0, 0,
+			1, 1, - 1, 0, 1, 1, 0, 0,
+			1, - 1, 1, 0, 0, 0, 0, 0,
+			1, - 1, - 1, 0, 0, 1, 0, 0,
 			// Top
-			-1, 1, 1, 0, 0, 0, 0, 0,
+			- 1, 1, 1, 0, 0, 0, 0, 0,
 			1, 1, 1, 0, 1, 0, 0, 0,
-			-1, 1, -1, 0, 0, 1, 0, 0,
-			1, 1, -1, 0, 1, 1, 0, 0,
+			- 1, 1, - 1, 0, 0, 1, 0, 0,
+			1, 1, - 1, 0, 1, 1, 0, 0,
 			// Bottom
-			1, -1, 1, 0, 1, 0, 0, 0,
-			-1, -1, 1, 0, 0, 0, 0, 0,
-			1, -1, -1, 0, 1, 1, 0, 0,
-			-1, -1, -1, 0, 0, 1, 0, 0
+			1, - 1, 1, 0, 1, 0, 0, 0,
+			- 1, - 1, 1, 0, 0, 0, 0, 0,
+			1, - 1, - 1, 0, 1, 1, 0, 0,
+			- 1, - 1, - 1, 0, 0, 1, 0, 0
 		] ), 8 );
 
 		// Use vertexBuffer, starting at offset 0, 3 items in position attribute
@@ -197,7 +196,8 @@
 		var offsets = new THREE.InterleavedBufferAttribute( instanceBuffer, 3, 0 );
 
 		var vector = new THREE.Vector4();
-		for ( var i = 0, ul = offsets.count; i < ul; i++ ) {
+		for ( var i = 0, ul = offsets.count; i < ul; i ++ ) {
+
 			var x = Math.random() * 100 - 50;
 			var y = Math.random() * 100 - 50;
 			var z = Math.random() * 100 - 50;
@@ -211,7 +211,7 @@
 
 		orientations = new THREE.InterleavedBufferAttribute( instanceBuffer, 4, 4 );
 
-		for ( var i = 0, ul = orientations.count; i < ul; i++ ) {
+		for ( var i = 0, ul = orientations.count; i < ul; i ++ ) {
 
 			vector.set( Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1 );
 			vector.normalize();
@@ -244,8 +244,10 @@
 
 
 		if ( renderer.extensions.get( 'ANGLE_instanced_arrays' ) === null ) {
+
 			document.getElementById( "notSupported" ).style.display = "";
 			return;
+
 		}
 
 		renderer.setPixelRatio( window.devicePixelRatio );
@@ -259,7 +261,7 @@
 
 	}
 
-	function onWindowResize( event ) {
+	function onWindowResize() {
 
 		camera.aspect = window.innerWidth / window.innerHeight;
 		camera.updateProjectionMatrix();
@@ -289,7 +291,7 @@
 		var time = performance.now();
 
 
-		var object = scene.children[0];
+		var object = scene.children[ 0 ];
 
 		object.rotation.y = time * 0.00005;
 
@@ -298,9 +300,10 @@
 		var delta = ( time - lastTime ) / 5000;
 		tmpQ.set( moveQ.x * delta, moveQ.y * delta, moveQ.z * delta, 1 ).normalize();
 
-		for ( var i = 0, ul = orientations.count; i < ul; i++ ) {
+		for ( var i = 0, ul = orientations.count; i < ul; i ++ ) {
+
 			var index = i * instanceBuffer.stride + orientations.offset;
-			currentQ.set( instanceBuffer.array[index], instanceBuffer.array[index + 1], instanceBuffer.array[index + 2], instanceBuffer.array[index + 3] );
+			currentQ.set( instanceBuffer.array[ index ], instanceBuffer.array[ index + 1 ], instanceBuffer.array[ index + 2 ], instanceBuffer.array[ index + 3 ] );
 			currentQ.multiply( tmpQ );
 
 			orientations.setXYZW( i, currentQ.x, currentQ.y, currentQ.z, currentQ.w );
@@ -308,6 +311,7 @@
 		}
 		instanceBuffer.needsUpdate = true;
 		lastTime = time;
+
 	}
 
 	init();

examples/webgl_buffergeometry_instancing_lambert.html

@@ -319,7 +319,7 @@
 			} );
 
 			material.defines = material.defines || {};
-			material.defines[ 'INSTANCED'] = "";
+			material.defines[ 'INSTANCED' ] = "";
 
 
 			// custom depth material - required for instanced shadows
@@ -373,7 +373,7 @@
 
 		}
 
-		function onWindowResize( event ) {
+		function onWindowResize() {
 
 			renderer.setSize( window.innerWidth, window.innerHeight );
 

examples/webgl_buffergeometry_lines_indexed.html

@@ -90,7 +90,7 @@
 				}
 
 				// simple Koch curve
-				
+
 				function snowflake_iteration( p0, p4, depth ) {
 
 					if ( -- depth < 0 ) {
@@ -128,7 +128,7 @@
 
 						add_vertex( points[ 0 ] );
 
-						for ( var p_index=0, p_count = points.length - 1; p_index != p_count; p_index ++ ) {
+						for ( var p_index = 0, p_count = points.length - 1; p_index != p_count; p_index ++ ) {
 
 							snowflake_iteration( points[ p_index ], points[ p_index + 1 ], iteration );
 
@@ -140,7 +140,7 @@
 
 						for ( var p_index = 0, p_count = points.length; p_index != p_count; p_index ++ ) {
 
-							points[p_index].x += x_offset;
+							points[ p_index ].x += x_offset;
 
 						}
 
@@ -149,8 +149,7 @@
 				}
 
 				var y = 0;
-				snowflake
-				(
+				snowflake(
 					[
 						new THREE.Vector3( 0, y, 0 ),
 						new THREE.Vector3( 500, y, 0 )
@@ -159,10 +158,9 @@
 				);
 
 				y += 600;
-				snowflake
-				(
+				snowflake(
 					[
-						new THREE.Vector3( 0, y, 0) ,
+						new THREE.Vector3( 0, y, 0 ),
 						new THREE.Vector3( 250, y + 400, 0 ),
 						new THREE.Vector3( 500, y, 0 )
 					],
@@ -170,8 +168,7 @@
 				);
 
 				y += 600;
-				snowflake
-				(
+				snowflake(
 					[
 						new THREE.Vector3( 0, y, 0 ),
 						new THREE.Vector3( 500, y, 0 ),
@@ -182,8 +179,7 @@
 				);
 
 				y += 1000;
-				snowflake
-				(
+				snowflake(
 					[
 						new THREE.Vector3( 250, y, 0 ),
 						new THREE.Vector3( 500, y, 0 ),

examples/webgl_buffergeometry_rawshader.html

@@ -170,7 +170,7 @@
 
 			}
 
-			function onWindowResize( event ) {
+			function onWindowResize() {
 
 				camera.aspect = window.innerWidth / window.innerHeight;
 				camera.updateProjectionMatrix();

examples/webgl_buffergeometry_uint.html

@@ -77,7 +77,7 @@
 				scene.add( light1 );
 
 				var light2 = new THREE.DirectionalLight( 0xffffff, 1.5 );
-				light2.position.set( 0, -1, 0 );
+				light2.position.set( 0, - 1, 0 );
 				scene.add( light2 );
 
 				//

examples/webgl_camera.html

@@ -23,12 +23,9 @@
 				z-index: 100;
 			}
 
-			a {
-
-				color: #0080ff;
-			}
-
+			a {color: #0080ff; }
 			b { color: lightgreen }
+
 		</style>
 	</head>
 	<body>
@@ -125,9 +122,9 @@
 
 				for ( var i = 0; i < 10000; i ++ ) {
 
-					vertices.push(  THREE.Math.randFloatSpread( 2000 ) ); // x
-					vertices.push(  THREE.Math.randFloatSpread( 2000 ) ); // y
-					vertices.push(  THREE.Math.randFloatSpread( 2000 ) ); // z
+					vertices.push( THREE.Math.randFloatSpread( 2000 ) ); // x
+					vertices.push( THREE.Math.randFloatSpread( 2000 ) ); // y
+					vertices.push( THREE.Math.randFloatSpread( 2000 ) ); // z
 
 				}
 
@@ -138,7 +135,6 @@
 
 				//
 
-
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
@@ -160,9 +156,9 @@
 
 			//
 
-			function onKeyDown ( event ) {
+			function onKeyDown( event ) {
 
-				switch( event.keyCode ) {
+				switch ( event.keyCode ) {
 
 					case 79: /*O*/
 
@@ -184,7 +180,7 @@
 
 			//
 
-			function onWindowResize( event ) {
+			function onWindowResize() {
 
 				SCREEN_WIDTH = window.innerWidth;
 				SCREEN_HEIGHT = window.innerHeight;
@@ -198,9 +194,9 @@
 				cameraPerspective.aspect = 0.5 * aspect;
 				cameraPerspective.updateProjectionMatrix();
 
-				cameraOrtho.left   = - 0.5 * frustumSize * aspect / 2;
-				cameraOrtho.right  =   0.5 * frustumSize * aspect / 2;
-				cameraOrtho.top    =   frustumSize / 2;
+				cameraOrtho.left = - 0.5 * frustumSize * aspect / 2;
+				cameraOrtho.right = 0.5 * frustumSize * aspect / 2;
+				cameraOrtho.top = frustumSize / 2;
 				cameraOrtho.bottom = - frustumSize / 2;
 				cameraOrtho.updateProjectionMatrix();
 
@@ -258,12 +254,12 @@
 
 				activeHelper.visible = false;
 
-				renderer.setViewport( 0, 0, SCREEN_WIDTH/2, SCREEN_HEIGHT );
+				renderer.setViewport( 0, 0, SCREEN_WIDTH / 2, SCREEN_HEIGHT );
 				renderer.render( scene, activeCamera );
 
 				activeHelper.visible = true;
 
-				renderer.setViewport( SCREEN_WIDTH/2, 0, SCREEN_WIDTH/2, SCREEN_HEIGHT );
+				renderer.setViewport( SCREEN_WIDTH / 2, 0, SCREEN_WIDTH / 2, SCREEN_HEIGHT );
 				renderer.render( scene, camera );
 
 			}

examples/webgl_camera_cinematic.html

@@ -86,7 +86,7 @@
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
-				var effectController  = {
+				var effectController = {
 
 					focalLength: 15,
 					// jsDepthCalculation: true,
@@ -114,7 +114,7 @@
 
 				};
 
-				var matChanger = function( ) {
+				var matChanger = function ( ) {
 
 					for ( var e in effectController ) {
 
@@ -197,7 +197,7 @@
 
 					var targetDistance = intersects[ 0 ].distance;
 
-					camera.focusAt( targetDistance );  // using Cinematic camera focusAt method
+					camera.focusAt( targetDistance ); // using Cinematic camera focusAt method
 
 					if ( INTERSECTED != intersects[ 0 ].object ) {
 
@@ -206,6 +206,7 @@
 						INTERSECTED = intersects[ 0 ].object;
 						INTERSECTED.currentHex = INTERSECTED.material.emissive.getHex();
 						INTERSECTED.material.emissive.setHex( 0xff0000 );
+
 					}
 
 				} else {

examples/webgl_camera_logarithmicdepthbuffer.html

@@ -40,10 +40,6 @@
 				display: block;
 				text-align: center;
 			}
-			.renderer_label.renderer_label_normal {
-			}
-			.renderer_label.renderer_label_logzbuf {
-			}
 			#container {
 				white-space: nowrap;
 			}
@@ -75,7 +71,7 @@
 	<body>
 
 		<div id="container">
-			<div id="container_normal"><h2 class="renderer_label renderer_label_normal">normal z-buffer</h2></div><div id="container_logzbuf"><h2 class="renderer_label renderer_label_logzbuf">logarithmic z-buffer</h2></div>
+			<div id="container_normal"><h2 class="renderer_label">normal z-buffer</h2></div><div id="container_logzbuf"><h2 class="renderer_label">logarithmic z-buffer</h2></div>
 			<div id="renderer_border"></div>
 		</div>
 
@@ -96,8 +92,8 @@
 			var SCREEN_WIDTH = window.innerWidth;
 			var SCREEN_HEIGHT = window.innerHeight;
 			var screensplit = .25, screensplit_right = 0;
-			var mouse = [.5, .5];
-			var zoompos = -100, minzoomspeed = .015;
+			var mouse = [ .5, .5 ];
+			var zoompos = - 100, minzoomspeed = .015;
 			var zoomspeed = minzoomspeed;
 
 			var container, border, stats;
@@ -107,23 +103,23 @@
 			// Try to use some descriptive real-world examples of objects at each scale
 
 			var labeldata = [
-				{ size: .01,           scale: 0.0001, label: "microscopic (1µm)" }, // FIXME - triangulating text fails at this size, so we scale instead
-				{ size: .01,           scale: 0.1,  label: "minuscule (1mm)" },
-				{ size: .01,           scale: 1.0,  label: "tiny (1cm)" },
-				{ size: 1,             scale: 1.0,  label: "child-sized (1m)" },
-				{ size: 10,            scale: 1.0,  label: "tree-sized (10m)" },
-				{ size: 100,           scale: 1.0,  label: "building-sized (100m)" },
-				{ size: 1000,          scale: 1.0,  label: "medium (1km)" },
-				{ size: 10000,         scale: 1.0,  label: "city-sized (10km)" },
-				{ size: 3400000,       scale: 1.0,  label: "moon-sized (3,400 Km)" },
-				{ size: 12000000,      scale: 1.0,  label: "planet-sized (12,000 km)" },
-				{ size: 1400000000,    scale: 1.0,  label: "sun-sized (1,400,000 km)" },
-				{ size: 7.47e12,       scale: 1.0,  label: "solar system-sized (50Au)" },
-				{ size: 9.4605284e15,  scale: 1.0,  label: "gargantuan (1 light year)" },
-				{ size: 3.08567758e16, scale: 1.0,  label: "ludicrous (1 parsec)" },
-				{ size: 1e19,          scale: 1.0,  label: "mind boggling (1000 light years)" },
-				{ size: 1.135e21,      scale: 1.0,  label: "galaxy-sized (120,000 light years)" },
-				{ size: 9.46e23,       scale: 1.0,  label: "... (100,000,000 light years)" }
+				{ size: .01, scale: 0.0001, label: "microscopic (1µm)" }, // FIXME - triangulating text fails at this size, so we scale instead
+				{ size: .01, scale: 0.1, label: "minuscule (1mm)" },
+				{ size: .01, scale: 1.0, label: "tiny (1cm)" },
+				{ size: 1, scale: 1.0, label: "child-sized (1m)" },
+				{ size: 10, scale: 1.0, label: "tree-sized (10m)" },
+				{ size: 100, scale: 1.0, label: "building-sized (100m)" },
+				{ size: 1000, scale: 1.0, label: "medium (1km)" },
+				{ size: 10000, scale: 1.0, label: "city-sized (10km)" },
+				{ size: 3400000, scale: 1.0, label: "moon-sized (3,400 Km)" },
+				{ size: 12000000, scale: 1.0, label: "planet-sized (12,000 km)" },
+				{ size: 1400000000, scale: 1.0, label: "sun-sized (1,400,000 km)" },
+				{ size: 7.47e12, scale: 1.0, label: "solar system-sized (50Au)" },
+				{ size: 9.4605284e15, scale: 1.0, label: "gargantuan (1 light year)" },
+				{ size: 3.08567758e16, scale: 1.0, label: "ludicrous (1 parsec)" },
+				{ size: 1e19, scale: 1.0, label: "mind boggling (1000 light years)" },
+				{ size: 1.135e21, scale: 1.0, label: "galaxy-sized (120,000 light years)" },
+				{ size: 9.46e23, scale: 1.0, label: "... (100,000,000 light years)" }
 			];
 
 			init();
@@ -146,7 +142,7 @@
 				} );
 
 				stats = new Stats();
-				container.appendChild(stats.dom);
+				container.appendChild( stats.dom );
 
 				// Resize border allows the user to easily compare effects of logarithmic depth buffer over the whole scene
 				border = document.getElementById( 'renderer_border' );
@@ -160,17 +156,17 @@
 
 			function initView( scene, name, logDepthBuf ) {
 
-				var framecontainer = document.getElementById('container_' + name);
+				var framecontainer = document.getElementById( 'container_' + name );
 
 				var camera = new THREE.PerspectiveCamera( 50, screensplit * SCREEN_WIDTH / SCREEN_HEIGHT, NEAR, FAR );
-				scene.add(camera);
+				scene.add( camera );
 
-				var renderer = new THREE.WebGLRenderer({ antialias: true, logarithmicDepthBuffer: logDepthBuf });
+				var renderer = new THREE.WebGLRenderer( { antialias: true, logarithmicDepthBuffer: logDepthBuf } );
 				renderer.setPixelRatio( window.devicePixelRatio );
-				renderer.setSize(SCREEN_WIDTH/2, SCREEN_HEIGHT);
+				renderer.setSize( SCREEN_WIDTH / 2, SCREEN_HEIGHT );
 				renderer.domElement.style.position = "relative";
 				renderer.domElement.id = 'renderer_' + name;
-				framecontainer.appendChild(renderer.domElement);
+				framecontainer.appendChild( renderer.domElement );
 
 				return { container: framecontainer, renderer: renderer, scene: scene, camera: camera };
 
@@ -182,9 +178,9 @@
 
 				scene.add( new THREE.AmbientLight( 0x222222 ) );
 
-				var light = new THREE.DirectionalLight(0xffffff, 1);
-				light.position.set(100,100,100);
-				scene.add(light);
+				var light = new THREE.DirectionalLight( 0xffffff, 1 );
+				light.position.set( 100, 100, 100 );
+				scene.add( light );
 
 				var materialargs = {
 					color: 0xffffff,
@@ -193,16 +189,16 @@
 					emissive: 0x000000
 				};
 
-				var geometry = new THREE.SphereBufferGeometry(0.5, 24, 12);
+				var geometry = new THREE.SphereBufferGeometry( 0.5, 24, 12 );
 
-				for (var i = 0; i < labeldata.length; i++) {
+				for ( var i = 0; i < labeldata.length; i ++ ) {
 
-					var scale = labeldata[i].scale || 1;
+					var scale = labeldata[ i ].scale || 1;
 
-					var labelgeo = new THREE.TextBufferGeometry( labeldata[i].label, {
+					var labelgeo = new THREE.TextBufferGeometry( labeldata[ i ].label, {
 						font: font,
-						size: labeldata[i].size,
-						height: labeldata[i].size / 2
+						size: labeldata[ i ].size,
+						height: labeldata[ i ].size / 2
 					} );
 
 					labelgeo.computeBoundingSphere();
@@ -215,19 +211,19 @@
 					var material = new THREE.MeshPhongMaterial( materialargs );
 
 					var group = new THREE.Group();
-					group.position.z = -labeldata[i].size * scale;
-					scene.add(group);
+					group.position.z = - labeldata[ i ].size * scale;
+					scene.add( group );
 
 					var textmesh = new THREE.Mesh( labelgeo, material );
-					textmesh.scale.set(scale, scale, scale);
-					textmesh.position.z = -labeldata[i].size * scale;
-					textmesh.position.y = labeldata[i].size / 4 * scale;
-					group.add(textmesh);
+					textmesh.scale.set( scale, scale, scale );
+					textmesh.position.z = - labeldata[ i ].size * scale;
+					textmesh.position.y = labeldata[ i ].size / 4 * scale;
+					group.add( textmesh );
 
-					var dotmesh = new THREE.Mesh(geometry, material);
-					dotmesh.position.y = -labeldata[i].size / 4 * scale;
-					dotmesh.scale.multiplyScalar(labeldata[i].size * scale);
-					group.add(dotmesh);
+					var dotmesh = new THREE.Mesh( geometry, material );
+					dotmesh.position.y = - labeldata[ i ].size / 4 * scale;
+					dotmesh.scale.multiplyScalar( labeldata[ i ].size * scale );
+					group.add( dotmesh );
 
 				}
 
@@ -248,15 +244,15 @@
 				objects.normal.camera.aspect = screensplit * SCREEN_WIDTH / SCREEN_HEIGHT;
 				objects.normal.camera.updateProjectionMatrix();
 				objects.normal.camera.setViewOffset( SCREEN_WIDTH, SCREEN_HEIGHT, 0, 0, SCREEN_WIDTH * screensplit, SCREEN_HEIGHT );
-				objects.normal.container.style.width = (screensplit * 100) + '%';
+				objects.normal.container.style.width = ( screensplit * 100 ) + '%';
 
 				objects.logzbuf.renderer.setSize( screensplit_right * SCREEN_WIDTH, SCREEN_HEIGHT );
 				objects.logzbuf.camera.aspect = screensplit_right * SCREEN_WIDTH / SCREEN_HEIGHT;
 				objects.logzbuf.camera.updateProjectionMatrix();
 				objects.logzbuf.camera.setViewOffset( SCREEN_WIDTH, SCREEN_HEIGHT, SCREEN_WIDTH * screensplit, 0, SCREEN_WIDTH * screensplit_right, SCREEN_HEIGHT );
-				objects.logzbuf.container.style.width = (screensplit_right * 100) + '%';
+				objects.logzbuf.container.style.width = ( screensplit_right * 100 ) + '%';
 
-				border.style.left = (screensplit * 100) + "%";
+				border.style.left = ( screensplit * 100 ) + "%";
 
 			}
 
@@ -270,74 +266,94 @@
 			function render() {
 
 				// Put some limits on zooming
-				var minzoom = labeldata[0].size * labeldata[0].scale*1;
-				var maxzoom = labeldata[labeldata.length-1].size * labeldata[labeldata.length-1].scale * 100;
-				var damping = (Math.abs(zoomspeed) > minzoomspeed ? .95 : 1.0);
+				var minzoom = labeldata[ 0 ].size * labeldata[ 0 ].scale * 1;
+				var maxzoom = labeldata[ labeldata.length - 1 ].size * labeldata[ labeldata.length - 1 ].scale * 100;
+				var damping = ( Math.abs( zoomspeed ) > minzoomspeed ? .95 : 1.0 );
 
 				// Zoom out faster the further out you go
-				var zoom = THREE.Math.clamp(Math.pow(Math.E, zoompos), minzoom, maxzoom);
-				zoompos = Math.log(zoom);
+				var zoom = THREE.Math.clamp( Math.pow( Math.E, zoompos ), minzoom, maxzoom );
+				zoompos = Math.log( zoom );
 
 				// Slow down quickly at the zoom limits
-				if ((zoom == minzoom && zoomspeed < 0) || (zoom == maxzoom && zoomspeed > 0)) {
+				if ( ( zoom == minzoom && zoomspeed < 0 ) || ( zoom == maxzoom && zoomspeed > 0 ) ) {
+
 					damping = .85;
+
 				}
 
 				zoompos += zoomspeed;
 				zoomspeed *= damping;
 
-				objects.normal.camera.position.x = Math.sin(.5 * Math.PI * (mouse[0] - .5)) * zoom;
-				objects.normal.camera.position.y = Math.sin(.25 * Math.PI * (mouse[1] - .5)) * zoom;
-				objects.normal.camera.position.z = Math.cos(.5 * Math.PI * (mouse[0] - .5)) * zoom;
-				objects.normal.camera.lookAt(objects.normal.scene.position);
+				objects.normal.camera.position.x = Math.sin( .5 * Math.PI * ( mouse[ 0 ] - .5 ) ) * zoom;
+				objects.normal.camera.position.y = Math.sin( .25 * Math.PI * ( mouse[ 1 ] - .5 ) ) * zoom;
+				objects.normal.camera.position.z = Math.cos( .5 * Math.PI * ( mouse[ 0 ] - .5 ) ) * zoom;
+				objects.normal.camera.lookAt( objects.normal.scene.position );
 
 				// Clone camera settings across both scenes
-				objects.logzbuf.camera.position.copy(objects.normal.camera.position);
-				objects.logzbuf.camera.quaternion.copy(objects.normal.camera.quaternion);
+				objects.logzbuf.camera.position.copy( objects.normal.camera.position );
+				objects.logzbuf.camera.quaternion.copy( objects.normal.camera.quaternion );
 
 				// Update renderer sizes if the split has changed
-				if (screensplit_right != 1 - screensplit) {
+				if ( screensplit_right != 1 - screensplit ) {
+
 					updateRendererSizes();
+
 				}
 
-				objects.normal.renderer.render(objects.normal.scene, objects.normal.camera);
-				objects.logzbuf.renderer.render(objects.logzbuf.scene, objects.logzbuf.camera);
+				objects.normal.renderer.render( objects.normal.scene, objects.normal.camera );
+				objects.logzbuf.renderer.render( objects.logzbuf.scene, objects.logzbuf.camera );
 
 				stats.update();
 
 			}
 
-			function onWindowResize(event) {
+			function onWindowResize() {
+
 				updateRendererSizes();
+
 			}
 
-			function onBorderMouseDown(ev) {
+			function onBorderMouseDown( ev ) {
+
 				// activate draggable window resizing bar
-				window.addEventListener("mousemove", onBorderMouseMove);
-				window.addEventListener("mouseup", onBorderMouseUp);
+				window.addEventListener( "mousemove", onBorderMouseMove );
+				window.addEventListener( "mouseup", onBorderMouseUp );
 				ev.stopPropagation();
 				ev.preventDefault();
+
 			}
-			function onBorderMouseMove(ev) {
-				screensplit = Math.max(0, Math.min(1, ev.clientX / window.innerWidth));
+
+			function onBorderMouseMove( ev ) {
+
+				screensplit = Math.max( 0, Math.min( 1, ev.clientX / window.innerWidth ) );
 				ev.stopPropagation();
+
 			}
-			function onBorderMouseUp(ev) {
-				window.removeEventListener("mousemove", onBorderMouseMove);
-				window.removeEventListener("mouseup", onBorderMouseUp);
+
+			function onBorderMouseUp() {
+
+				window.removeEventListener( "mousemove", onBorderMouseMove );
+				window.removeEventListener( "mouseup", onBorderMouseUp );
+
 			}
-			function onMouseMove(ev) {
-				mouse[0] = ev.clientX / window.innerWidth;
-				mouse[1] = ev.clientY / window.innerHeight;
+
+			function onMouseMove( ev ) {
+
+				mouse[ 0 ] = ev.clientX / window.innerWidth;
+				mouse[ 1 ] = ev.clientY / window.innerHeight;
+
 			}
-			function onMouseWheel(ev) {
+
+			function onMouseWheel( ev ) {
+
 				var amount = ev.deltaY;
 				if ( amount === 0 ) return;
-				var dir = amount / Math.abs(amount);
-				zoomspeed = dir/10;
+				var dir = amount / Math.abs( amount );
+				zoomspeed = dir / 10;
 
 				// Slow down default zoom speed after user starts zooming, to give them more control
 				minzoomspeed = 0.001;
+
 			}
 		</script>
 	</body>

examples/webgl_clipping.html

@@ -72,15 +72,15 @@
 				// Geometry
 
 				var material = new THREE.MeshPhongMaterial( {
-						color: 0x80ee10,
-						shininess: 100,
-						side: THREE.DoubleSide,
+					color: 0x80ee10,
+					shininess: 100,
+					side: THREE.DoubleSide,
 
-						// ***** Clipping setup (material): *****
-						clippingPlanes: [ localPlane ],
-						clipShadows: true
+					// ***** Clipping setup (material): *****
+					clippingPlanes: [ localPlane ],
+					clipShadows: true
 
-					} );
+				} );
 
 				var geometry = new THREE.TorusKnotBufferGeometry( 0.4, 0.08, 95, 20 );
 
@@ -89,9 +89,9 @@
 				scene.add( object );
 
 				var ground = new THREE.Mesh(
-						new THREE.PlaneBufferGeometry( 9, 9, 1, 1 ),
-						new THREE.MeshPhongMaterial( { color: 0xa0adaf, shininess: 150 } )
-					);
+					new THREE.PlaneBufferGeometry( 9, 9, 1, 1 ),
+					new THREE.MeshPhongMaterial( { color: 0xa0adaf, shininess: 150 } )
+				);
 
 				ground.rotation.x = - Math.PI / 2; // rotates X/Y to X/Z
 				ground.receiveShadow = true;
@@ -129,26 +129,65 @@
 					folderLocal = gui.addFolder( 'Local Clipping' ),
 					propsLocal = {
 
-						get 'Enabled'() { return renderer.localClippingEnabled; },
-						set 'Enabled'( v ) { renderer.localClippingEnabled = v; },
+						get 'Enabled'() {
 
-						get 'Shadows'() { return material.clipShadows; },
-						set 'Shadows'( v ) { material.clipShadows = v; },
+							return renderer.localClippingEnabled;
 
-						get 'Plane'() { return localPlane.constant; },
-						set 'Plane'( v ) { localPlane.constant = v }
+						},
+						set 'Enabled'( v ) {
+
+							renderer.localClippingEnabled = v;
+
+						},
+
+						get 'Shadows'() {
+
+							return material.clipShadows;
+
+						},
+						set 'Shadows'( v ) {
+
+							material.clipShadows = v;
+
+						},
+
+						get 'Plane'() {
+
+							return localPlane.constant;
+
+						},
+						set 'Plane'( v ) {
+
+							localPlane.constant = v;
+
+						}
 
 					},
 
 					folderGlobal = gui.addFolder( 'Global Clipping' ),
 					propsGlobal = {
 
-						get 'Enabled'() { return renderer.clippingPlanes !== Empty; },
-						set 'Enabled'( v  ) {
-								renderer.clippingPlanes = v ? globalPlanes : Empty; },
+						get 'Enabled'() {
+
+							return renderer.clippingPlanes !== Empty;
+
+						},
+						set 'Enabled'( v ) {
+
+							renderer.clippingPlanes = v ? globalPlanes : Empty;
+
+						},
+
+						get 'Plane'() {
+
+							return globalPlane.constant;
+
+						},
+						set 'Plane'( v ) {
+
+							globalPlane.constant = v;
 
-						get 'Plane'() { return globalPlane.constant; },
-						set 'Plane'( v ) { globalPlane.constant = v; }
+						}
 
 					};
 
@@ -157,7 +196,7 @@
 				folderLocal.add( propsLocal, 'Plane', 0.3, 1.25 );
 
 				folderGlobal.add( propsGlobal, 'Enabled' );
-				folderGlobal.add( propsGlobal, 'Plane', -0.4, 3 );
+				folderGlobal.add( propsGlobal, 'Plane', - 0.4, 3 );
 
 				// Start
 

examples/webgl_clipping_advanced.html

@@ -23,6 +23,7 @@
 		<script>
 
 			function planesFromMesh( vertices, indices ) {
+
 				// creates a clipping volume from a convex triangular mesh
 				// specified by the arrays 'vertices' and 'indices'
 
@@ -31,12 +32,12 @@
 
 				for ( var i = 0, j = 0; i < n; ++ i, j += 3 ) {
 
-					var a = vertices[ indices[   j   ] ],
+					var a = vertices[ indices[ j ] ],
 						b = vertices[ indices[ j + 1 ] ],
 						c = vertices[ indices[ j + 2 ] ];
 
 					result[ i ] = new THREE.Plane().
-							setFromCoplanarPoints( a, b, c );
+						setFromCoplanarPoints( a, b, c );
 
 				}
 
@@ -45,6 +46,7 @@
 			}
 
 			function createPlanes( n ) {
+
 				// creates an array of n uninitialized plane objects
 
 				var result = new Array( n );
@@ -57,6 +59,7 @@
 			}
 
 			function assignTransformedPlanes( planesOut, planesIn, matrix ) {
+
 				// sets an array of existing planes to transformed 'planesIn'
 
 				for ( var i = 0, n = planesIn.length; i !== n; ++ i )
@@ -74,7 +77,7 @@
 						angle = i * Math.PI * 2 / n;
 
 					plane.normal.set(
-							Math.cos( angle ), 0, Math.sin( angle ) );
+						Math.cos( angle ), 0, Math.sin( angle ) );
 
 					plane.constant = innerRadius;
 
@@ -84,7 +87,8 @@
 
 			}
 
-			var planeToMatrix = ( function() {
+			var planeToMatrix = ( function () {
+
 				// creates a matrix that aligns X/Y to a given plane
 
 				// temporaries:
@@ -102,11 +106,11 @@
 
 					if ( Math.abs( zAxis.x ) > Math.abs( zAxis.z ) ) {
 
-						yAxis.set( -zAxis.y, zAxis.x, 0 );
+						yAxis.set( - zAxis.y, zAxis.x, 0 );
 
 					} else {
 
-						yAxis.set( 0, -zAxis.z, zAxis.y );
+						yAxis.set( 0, - zAxis.z, zAxis.y );
 
 					}
 
@@ -117,7 +121,7 @@
 						xAxis.x, yAxis.x, zAxis.x, trans.x,
 						xAxis.y, yAxis.y, zAxis.y, trans.y,
 						xAxis.z, yAxis.z, zAxis.z, trans.z,
-						0,	 0,	  0,	   1 );
+						0,	 0, 0, 1 );
 
 				};
 
@@ -127,10 +131,10 @@
 			// A regular tetrahedron for the clipping volume:
 
 			var Vertices = [
-					new THREE.Vector3( + 1,   0, + Math.SQRT1_2 ),
-					new THREE.Vector3( - 1,   0, + Math.SQRT1_2 ),
-					new THREE.Vector3(   0, + 1, - Math.SQRT1_2 ),
-					new THREE.Vector3(   0, - 1, - Math.SQRT1_2 )
+					new THREE.Vector3( + 1, 0, + Math.SQRT1_2 ),
+					new THREE.Vector3( - 1, 0, + Math.SQRT1_2 ),
+					new THREE.Vector3( 0, + 1, - Math.SQRT1_2 ),
+					new THREE.Vector3( 0, - 1, - Math.SQRT1_2 )
 				],
 
 				Indices = [
@@ -154,7 +158,7 @@
 			function init() {
 
 				camera = new THREE.PerspectiveCamera(
-						36, window.innerWidth / window.innerHeight, 0.25, 16 );
+					36, window.innerWidth / window.innerHeight, 0.25, 16 );
 
 				camera.position.set( 0, 1.5, 3 );
 
@@ -205,16 +209,16 @@
 
 				var geometry = new THREE.BoxBufferGeometry( 0.18, 0.18, 0.18 );
 
-				for ( var z = -2; z <= 2; ++ z )
-				for ( var y = -2; y <= 2; ++ y )
-				for ( var x = -2; x <= 2; ++ x ) {
+				for ( var z = - 2; z <= 2; ++ z )
+					for ( var y = - 2; y <= 2; ++ y )
+						for ( var x = - 2; x <= 2; ++ x ) {
 
-					var mesh = new THREE.Mesh( geometry, clipMaterial );
-					mesh.position.set( x / 5, y / 5, z / 5 );
-					mesh.castShadow = true;
-					object.add( mesh );
+							var mesh = new THREE.Mesh( geometry, clipMaterial );
+							mesh.position.set( x / 5, y / 5, z / 5 );
+							mesh.castShadow = true;
+							object.add( mesh );
 
-				}
+						}
 
 				scene.add( object );
 
@@ -230,7 +234,7 @@
 				for ( var i = 0, n = Planes.length; i !== n; ++ i ) {
 
 					var material = new THREE.MeshBasicMaterial( {
-						color:  color.setHSL( i / n, 0.5, 0.5 ).getHex(),
+						color: color.setHSL( i / n, 0.5, 0.5 ).getHex(),
 						side: THREE.DoubleSide,
 
 						opacity: 0.2,
@@ -239,7 +243,11 @@
 						// clip to the others to show the volume (wildly
 						// intersecting transparent planes look bad)
 						clippingPlanes: clipMaterial.clippingPlanes.
-								filter( function( _, j ) { return j !== i; } )
+							filter( function ( _, j ) {
+
+								return j !== i;
+
+							} )
 
 						// no need to enable shadow clipping - the plane
 						// visualization does not cast shadows
@@ -247,7 +255,7 @@
 					} );
 
 					volumeVisualization.add(
-							new THREE.Mesh( planeGeometry, material ) );
+						new THREE.Mesh( planeGeometry, material ) );
 
 				}
 
@@ -255,8 +263,8 @@
 
 
 				var ground = new THREE.Mesh( planeGeometry,
-						new THREE.MeshPhongMaterial( {
-							color: 0xa0adaf, shininess: 150 } ) );
+					new THREE.MeshPhongMaterial( {
+						color: 0xa0adaf, shininess: 150 } ) );
 				ground.rotation.x = - Math.PI / 2;
 				ground.scale.multiplyScalar( 3 );
 				ground.receiveShadow = true;
@@ -293,18 +301,40 @@
 				var gui = new dat.GUI(),
 					folder = gui.addFolder( "Local Clipping" ),
 					props = {
-						get 'Enabled'() { return renderer.localClippingEnabled; },
+						get 'Enabled'() {
+
+							return renderer.localClippingEnabled;
+
+						},
 						set 'Enabled'( v ) {
-								renderer.localClippingEnabled = v;
-								if ( ! v ) volumeVisualization.visible = false; },
 
-						get 'Shadows'() { return clipMaterial.clipShadows; },
-						set 'Shadows'( v ) { clipMaterial.clipShadows = v; },
+							renderer.localClippingEnabled = v;
+							if ( ! v ) volumeVisualization.visible = false;
+
+						},
+
+						get 'Shadows'() {
+
+							return clipMaterial.clipShadows;
+
+						},
+						set 'Shadows'( v ) {
 
-						get 'Visualize'() { return volumeVisualization.visible; },
+							clipMaterial.clipShadows = v;
+
+						},
+
+						get 'Visualize'() {
+
+							return volumeVisualization.visible;
+
+						},
 						set 'Visualize'( v ) {
-								if ( renderer.localClippingEnabled )
-									volumeVisualization.visible = v; }
+
+							if ( renderer.localClippingEnabled )
+								volumeVisualization.visible = v;
+
+						}
 					};
 
 				folder.add( props, 'Enabled' );
@@ -312,11 +342,19 @@
 				folder.add( props, 'Visualize' ).listen();
 
 				gui.addFolder( "Global Clipping" ).
-						add( {
-							get 'Enabled'() { return renderer.clippingPlanes !== Empty; },
-							set 'Enabled'( v  ) { renderer.clippingPlanes = v ?
-									globalClippingPlanes : Empty; }
-						}, "Enabled" );
+					add( {
+						get 'Enabled'() {
+
+							return renderer.clippingPlanes !== Empty;
+
+						},
+						set 'Enabled'( v ) {
+
+							renderer.clippingPlanes = v ?
+								globalClippingPlanes : Empty;
+
+						}
+					}, "Enabled" );
 
 
 				// Start
@@ -335,6 +373,7 @@
 			}
 
 			function setObjectWorldMatrix( object, matrix ) {
+
 				// set the orientation of an object based on a world matrix
 
 				var parent = object.parent;
@@ -363,10 +402,10 @@
 
 				var bouncy = Math.cos( time * .5 ) * 0.5 + 0.7;
 				transform.multiply(
-						tmpMatrix.makeScale( bouncy, bouncy, bouncy ) );
+					tmpMatrix.makeScale( bouncy, bouncy, bouncy ) );
 
 				assignTransformedPlanes(
-						clipMaterial.clippingPlanes, Planes, transform );
+					clipMaterial.clippingPlanes, Planes, transform );
 
 				var planeMeshes = volumeVisualization.children;
 
@@ -380,7 +419,7 @@
 				transform.makeRotationY( time * 0.1 );
 
 				assignTransformedPlanes(
-						globalClippingPlanes, GlobalClippingPlanes, transform );
+					globalClippingPlanes, GlobalClippingPlanes, transform );
 
 				stats.begin();
 				renderer.render( scene, camera );

examples/webgl_custom_attributes.html

@@ -110,8 +110,8 @@
 			uniforms = {
 
 				amplitude: { value: 1.0 },
-				color:     { value: new THREE.Color( 0xff2200 ) },
-				texture:   { value: new THREE.TextureLoader().load( "textures/water.jpg" ) }
+				color: { value: new THREE.Color( 0xff2200 ) },
+				texture: { value: new THREE.TextureLoader().load( "textures/water.jpg" ) }
 
 			};
 
@@ -120,10 +120,10 @@
 			var shaderMaterial = new THREE.ShaderMaterial( {
 
 				uniforms: uniforms,
-				vertexShader:document.getElementById( 'vertexshader' ).textContent,
+				vertexShader: document.getElementById( 'vertexshader' ).textContent,
 				fragmentShader: document.getElementById( 'fragmentshader' ).textContent
 
-			});
+			} );
 
 
 			var radius = 50, segments = 128, rings = 64;
@@ -192,7 +192,7 @@
 				displacement[ i ] = Math.sin( 0.1 * i + time );
 
 				noise[ i ] += 0.5 * ( 0.5 - Math.random() );
-				noise[ i ] = THREE.Math.clamp( noise[ i ], -5, 5 );
+				noise[ i ] = THREE.Math.clamp( noise[ i ], - 5, 5 );
 
 				displacement[ i ] += noise[ i ];
 

examples/webgl_custom_attributes_lines.html

@@ -104,21 +104,21 @@
 			uniforms = {
 
 				amplitude: { value: 5.0 },
-				opacity:   { value: 0.3 },
-				color:     { value: new THREE.Color( 0xffffff ) }
+				opacity: { value: 0.3 },
+				color: { value: new THREE.Color( 0xffffff ) }
 
 			};
 
 			var shaderMaterial = new THREE.ShaderMaterial( {
 
-				uniforms:       uniforms,
-				vertexShader:   document.getElementById( 'vertexshader' ).textContent,
+				uniforms: uniforms,
+				vertexShader: document.getElementById( 'vertexshader' ).textContent,
 				fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
-				blending:       THREE.AdditiveBlending,
-				depthTest:      false,
-				transparent:    true
+				blending: THREE.AdditiveBlending,
+				depthTest: false,
+				transparent: true
 
-			});
+			} );
 
 
 			var geometry = new THREE.TextBufferGeometry( 'three.js', {
@@ -148,7 +148,7 @@
 
 			var color = new THREE.Color( 0xffffff );
 
-			for( var i = 0, l = customColor.count; i < l; i ++ ) {
+			for ( var i = 0, l = customColor.count; i < l; i ++ ) {
 
 				color.setHSL( i / l, 0.5, 0.5 );
 				color.toArray( customColor.array, i * customColor.itemSize );
@@ -207,7 +207,7 @@
 
 			for ( var i = 0, l = array.length; i < l; i += 3 ) {
 
-				array[ i     ] += 0.3 * ( 0.5 - Math.random() );
+				array[ i ] += 0.3 * ( 0.5 - Math.random() );
 				array[ i + 1 ] += 0.3 * ( 0.5 - Math.random() );
 				array[ i + 2 ] += 0.3 * ( 0.5 - Math.random() );
 

examples/webgl_custom_attributes_points.html

@@ -87,8 +87,6 @@
 
 		var sphere;
 
-		var noise = [];
-
 		var WIDTH = window.innerWidth;
 		var HEIGHT = window.innerHeight;
 
@@ -146,17 +144,17 @@
 
 				uniforms: {
 					amplitude: { value: 1.0 },
-					color:     { value: new THREE.Color( 0xffffff ) },
-					texture:   { value: new THREE.TextureLoader().load( "textures/sprites/spark1.png" ) }
+					color: { value: new THREE.Color( 0xffffff ) },
+					texture: { value: new THREE.TextureLoader().load( "textures/sprites/spark1.png" ) }
 				},
-				vertexShader:   document.getElementById( 'vertexshader' ).textContent,
+				vertexShader: document.getElementById( 'vertexshader' ).textContent,
 				fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
 
-				blending:       THREE.AdditiveBlending,
-				depthTest:      false,
-				transparent:    true
+				blending: THREE.AdditiveBlending,
+				depthTest: false,
+				transparent: true
 
-			});
+			} );
 
 			//
 
@@ -208,7 +206,7 @@
 			var geometry = sphere.geometry;
 			var attributes = geometry.attributes;
 
-			for ( var i = 0; i < attributes.size.array.length; i++ ) {
+			for ( var i = 0; i < attributes.size.array.length; i ++ ) {
 
 				attributes.size.array[ i ] = 14 + 13 * Math.sin( 0.1 * i + time );
 

examples/webgl_custom_attributes_points2.html

@@ -150,14 +150,14 @@
 
 				uniforms: {
 					amplitude: { value: 1.0 },
-					color:     { value: new THREE.Color( 0xffffff ) },
-					texture:   { value: texture }
+					color: { value: new THREE.Color( 0xffffff ) },
+					texture: { value: texture }
 				},
-				vertexShader:   document.getElementById( 'vertexshader' ).textContent,
+				vertexShader: document.getElementById( 'vertexshader' ).textContent,
 				fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
-				transparent:    true
+				transparent: true
 
-			});
+			} );
 
 			//
 

examples/webgl_custom_attributes_points3.html

@@ -93,7 +93,7 @@
 
 		var renderer, scene, camera, stats;
 
-		var object, uniforms, attributes;
+		var object;
 
 		var vertices1;
 
@@ -121,11 +121,11 @@
 				vertex.z = Math.random() * 2 - 1;
 				vertex.multiplyScalar( radius );
 
-				if ( ( vertex.x > inner || vertex.x < -inner ) ||
-				     ( vertex.y > inner || vertex.y < -inner ) ||
-				     ( vertex.z > inner || vertex.z < -inner )  )
+				if ( ( vertex.x > inner || vertex.x < - inner ) ||
+				     ( vertex.y > inner || vertex.y < - inner ) ||
+				     ( vertex.z > inner || vertex.z < - inner ) )
 
-				vertices.push( vertex );
+					vertices.push( vertex );
 
 			}
 
@@ -158,26 +158,26 @@
 
 			// side 1
 
-			addGeo( geometry2, 0,  110,  110, 0 );
-			addGeo( geometry2, 0,  110, -110, 0 );
-			addGeo( geometry2, 0, -110,  110, 0 );
-			addGeo( geometry2, 0, -110, -110, 0 );
+			addGeo( geometry2, 0, 110, 110, 0 );
+			addGeo( geometry2, 0, 110, - 110, 0 );
+			addGeo( geometry2, 0, - 110, 110, 0 );
+			addGeo( geometry2, 0, - 110, - 110, 0 );
 
 			// side 2
 
-			addGeo( geometry2,  110,  110, 0, Math.PI/2 );
-			addGeo( geometry2,  110, -110, 0, Math.PI/2 );
-			addGeo( geometry2, -110,  110, 0, Math.PI/2 );
-			addGeo( geometry2, -110, -110, 0, Math.PI/2 );
+			addGeo( geometry2, 110, 110, 0, Math.PI / 2 );
+			addGeo( geometry2, 110, - 110, 0, Math.PI / 2 );
+			addGeo( geometry2, - 110, 110, 0, Math.PI / 2 );
+			addGeo( geometry2, - 110, - 110, 0, Math.PI / 2 );
 
 			// corner edges
 
 			var geometry3 = new THREE.BoxGeometry( 0.1 * radius, radius * 1.2, 0.1 * radius, 5, 60, 5 );
 
-			addGeo( geometry3,  110, 0,  110, 0 );
-			addGeo( geometry3,  110, 0, -110, 0 );
-			addGeo( geometry3, -110, 0,  110, 0 );
-			addGeo( geometry3, -110, 0, -110, 0 );
+			addGeo( geometry3, 110, 0, 110, 0 );
+			addGeo( geometry3, 110, 0, - 110, 0 );
+			addGeo( geometry3, - 110, 0, 110, 0 );
+			addGeo( geometry3, - 110, 0, - 110, 0 );
 
 			var positions = new Float32Array( vertices.length * 3 );
 			var colors = new Float32Array( vertices.length * 3 );
@@ -222,13 +222,13 @@
 
 				uniforms: {
 					amplitude: { value: 1.0 },
-					color:     { value: new THREE.Color( 0xffffff ) },
-					texture:   { value: texture }
+					color: { value: new THREE.Color( 0xffffff ) },
+					texture: { value: texture }
 				},
-				vertexShader:   document.getElementById( 'vertexshader' ).textContent,
+				vertexShader: document.getElementById( 'vertexshader' ).textContent,
 				fragmentShader: document.getElementById( 'fragmentshader' ).textContent
 
-			});
+			} );
 
 			//
 
@@ -284,7 +284,7 @@
 
 				if ( i < vertices1 ) {
 
-					attributes.size.array[ i ] = Math.max(0, 26 + 32 * Math.sin( 0.1 * i + 0.6 * time ));
+					attributes.size.array[ i ] = Math.max( 0, 26 + 32 * Math.sin( 0.1 * i + 0.6 * time ) );
 
 				}
 

examples/webgl_decals.html

@@ -46,7 +46,7 @@
 		var container = document.getElementById( 'container' );
 
 		var renderer, scene, camera, stats;
-		var mesh, decal;
+		var mesh;
 		var raycaster;
 		var line;
 
@@ -80,13 +80,12 @@
 		var position = new THREE.Vector3();
 		var orientation = new THREE.Euler();
 		var size = new THREE.Vector3( 10, 10, 10 );
-		var up = new THREE.Vector3( 0, 1, 0 );
 
 		var params = {
 			minScale: 10,
 			maxScale: 20,
 			rotate: true,
-			clear: function() {
+			clear: function () {
 
 				removeDecals();
 
@@ -122,7 +121,7 @@
 			scene.add( light );
 
 			var light = new THREE.DirectionalLight( 0xccccff, 1 );
-			light.position.set( -1, 0.75, -0.5 );
+			light.position.set( - 1, 0.75, - 0.5 );
 			scene.add( light );
 
 			var geometry = new THREE.BufferGeometry();
@@ -143,7 +142,7 @@
 
 			var moved = false;
 
-			controls.addEventListener( 'change', function() {
+			controls.addEventListener( 'change', function () {
 
 				moved = true;
 
@@ -155,7 +154,7 @@
 
 			}, false );
 
-			window.addEventListener( 'mouseup', function() {
+			window.addEventListener( 'mouseup', function () {
 
 				checkIntersection();
 				if ( ! moved && intersection.intersects ) shoot();
@@ -238,11 +237,11 @@
 
 		}
 
-		function loadLeePerrySmith( callback ) {
+		function loadLeePerrySmith() {
 
 			var loader = new THREE.GLTFLoader();
 
-			loader.load( 'models/gltf/LeePerrySmith/LeePerrySmith.glb', function( gltf ) {
+			loader.load( 'models/gltf/LeePerrySmith/LeePerrySmith.glb', function ( gltf ) {
 
 				mesh = gltf.scene.children[ 0 ];
 				mesh.material = new THREE.MeshPhongMaterial( {
@@ -282,7 +281,7 @@
 
 		function removeDecals() {
 
-			decals.forEach( function( d ) {
+			decals.forEach( function ( d ) {
 
 				scene.remove( d );
 

examples/webgl_depth_texture.html

@@ -111,7 +111,7 @@
 
 				renderer = new THREE.WebGLRenderer( { canvas: document.querySelector( 'canvas' ) } );
 
-				if ( !renderer.extensions.get( 'WEBGL_depth_texture' ) ) {
+				if ( ! renderer.extensions.get( 'WEBGL_depth_texture' ) ) {
 
 					supportsExtension = false;
 					document.querySelector( '#error' ).style.display = 'block';
@@ -158,7 +158,7 @@
 
 			}
 
-			function setupPost () {
+			function setupPost() {
 
 				// Setup post processing stage
 				postCamera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
@@ -167,11 +167,11 @@
 					fragmentShader: document.querySelector( '#post-frag' ).textContent.trim(),
 					uniforms: {
 						cameraNear: { value: camera.near },
-						cameraFar:  { value: camera.far },
-						tDiffuse:   { value: target.texture },
-						tDepth:     { value: target.depthTexture }
+						cameraFar: { value: camera.far },
+						tDiffuse: { value: target.texture },
+						tDepth: { value: target.depthTexture }
 					}
-				});
+				} );
 				var postPlane = new THREE.PlaneBufferGeometry( 2, 2 );
 				var postQuad = new THREE.Mesh( postPlane, postMaterial );
 				postScene = new THREE.Scene();
@@ -179,7 +179,7 @@
 
 			}
 
-			function setupScene () {
+			function setupScene() {
 
 				//var diffuse = new THREE.TextureLoader().load( 'textures/brick_diffuse.jpg' );
 				//diffuse.wrapS = diffuse.wrapT = THREE.RepeatWrapping;
@@ -224,7 +224,7 @@
 
 			function animate() {
 
-				if ( !supportsExtension ) return;
+				if ( ! supportsExtension ) return;
 
 				requestAnimationFrame( animate );
 

examples/webgl_effects_anaglyph.html

@@ -49,15 +49,10 @@
 
 			}
 
-			var container;
+			var container, camera, scene, renderer, effect;
 
-			var camera, scene, renderer, effect;
-
-			var mesh, lightMesh, geometry;
 			var spheres = [];
 
-			var directionalLight, pointLight;
-
 			var mouseX = 0;
 			var mouseY = 0;
 
@@ -140,7 +135,7 @@
 
 			}
 
-			function onDocumentMouseMove(event) {
+			function onDocumentMouseMove( event ) {
 
 				mouseX = ( event.clientX - windowHalfX ) / 100;
 				mouseY = ( event.clientY - windowHalfY ) / 100;

examples/webgl_effects_parallaxbarrier.html

@@ -49,15 +49,10 @@
 
 			}
 
-			var container;
+			var container, camera, scene, renderer, effect;
 
-			var camera, scene, renderer, effect;
-
-			var mesh, lightMesh, geometry;
 			var spheres = [];
 
-			var directionalLight, pointLight;
-
 			var mouseX = 0;
 			var mouseY = 0;
 
@@ -140,7 +135,7 @@
 
 			}
 
-			function onDocumentMouseMove(event) {
+			function onDocumentMouseMove( event ) {
 
 				mouseX = ( event.clientX - windowHalfX ) / 100;
 				mouseY = ( event.clientY - windowHalfY ) / 100;

examples/webgl_effects_peppersghost.html

@@ -63,94 +63,94 @@
 
 		function init() {
 
-				container = document.createElement( 'div' );
-				document.body.appendChild( container );
+			container = document.createElement( 'div' );
+			document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
+			camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
 
-				scene = new THREE.Scene();
+			scene = new THREE.Scene();
 
-				group = new THREE.Group();
-				scene.add( group );
+			group = new THREE.Group();
+			scene.add( group );
 
-				// Cube
+			// Cube
 
-				var geometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
-				geometry = geometry.toNonIndexed(); // ensure unique vertices for each triangle
+			var geometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
+			geometry = geometry.toNonIndexed(); // ensure unique vertices for each triangle
 
-				var position = geometry.attributes.position;
-				var colors = [];
-				var color = new THREE.Color();
+			var position = geometry.attributes.position;
+			var colors = [];
+			var color = new THREE.Color();
 
-				// generate for each side of the cube a different color
+			// generate for each side of the cube a different color
 
-				for ( var i = 0; i < position.count; i += 6 ) {
+			for ( var i = 0; i < position.count; i += 6 ) {
 
-					color.setHex( Math.random() * 0xffffff );
+				color.setHex( Math.random() * 0xffffff );
 
-					// first face
+				// first face
 
-					colors.push( color.r, color.g, color.b );
-					colors.push( color.r, color.g, color.b );
-					colors.push( color.r, color.g, color.b );
+				colors.push( color.r, color.g, color.b );
+				colors.push( color.r, color.g, color.b );
+				colors.push( color.r, color.g, color.b );
 
-					// second face
+				// second face
 
-					colors.push( color.r, color.g, color.b );
-					colors.push( color.r, color.g, color.b );
-					colors.push( color.r, color.g, color.b );
+				colors.push( color.r, color.g, color.b );
+				colors.push( color.r, color.g, color.b );
+				colors.push( color.r, color.g, color.b );
 
-				}
+			}
 
-				geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
+			geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
 
-				var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.VertexColors, overdraw: 0.5 } );
+			var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.VertexColors, overdraw: 0.5 } );
 
-				for ( var i = 0; i < 10; i ++ ) {
+			for ( var i = 0; i < 10; i ++ ) {
 
-					var cube = new THREE.Mesh( geometry, material );
-					cube.position.x = Math.random() * 2 - 1;
-					cube.position.y = Math.random() * 2 - 1;
-					cube.position.z = Math.random() * 2 - 1;
-					cube.scale.multiplyScalar( Math.random() + 0.5 );
-					group.add( cube );
+				var cube = new THREE.Mesh( geometry, material );
+				cube.position.x = Math.random() * 2 - 1;
+				cube.position.y = Math.random() * 2 - 1;
+				cube.position.z = Math.random() * 2 - 1;
+				cube.scale.multiplyScalar( Math.random() + 0.5 );
+				group.add( cube );
 
-				}
+			}
 
-				renderer = new THREE.WebGLRenderer();
-				renderer.setPixelRatio( window.devicePixelRatio );
-				container.appendChild( renderer.domElement );
+			renderer = new THREE.WebGLRenderer();
+			renderer.setPixelRatio( window.devicePixelRatio );
+			container.appendChild( renderer.domElement );
 
-				effect = new THREE.PeppersGhostEffect( renderer );
-				effect.setSize( window.innerWidth, window.innerHeight );
-				effect.cameraDistance = 5;
+			effect = new THREE.PeppersGhostEffect( renderer );
+			effect.setSize( window.innerWidth, window.innerHeight );
+			effect.cameraDistance = 5;
 
-				window.addEventListener( 'resize', onWindowResize, false );
+			window.addEventListener( 'resize', onWindowResize, false );
 
 		}
 
 		function onWindowResize() {
 
-				camera.aspect = window.innerWidth / window.innerHeight;
-				camera.updateProjectionMatrix();
+			camera.aspect = window.innerWidth / window.innerHeight;
+			camera.updateProjectionMatrix();
 
-				effect.setSize( window.innerWidth, window.innerHeight );
+			effect.setSize( window.innerWidth, window.innerHeight );
 
 		}
 
 		function animate() {
 
-				requestAnimationFrame( animate );
+			requestAnimationFrame( animate );
 
-				render();
+			render();
 
 		}
 
 		function render() {
 
-				group.rotation.y += 0.01;
+			group.rotation.y += 0.01;
 
-				effect.render( scene, camera );
+			effect.render( scene, camera );
 
 		}
 

examples/webgl_effects_stereo.html

@@ -51,15 +51,10 @@
 
 			}
 
-			var container;
+			var container, camera, scene, renderer, effect;
 
-			var camera, scene, renderer, effect;
-
-			var mesh, lightMesh, geometry;
 			var spheres = [];
 
-			var directionalLight, pointLight;
-
 			var mouseX = 0, mouseY = 0;
 
 			var windowHalfX = window.innerWidth / 2;

examples/webgl_geometries.html

@@ -179,7 +179,7 @@
 
 				camera.lookAt( scene.position );
 
-				scene.traverse( function( object ) {
+				scene.traverse( function ( object ) {
 
 					if ( object.isMesh === true ) {
 

examples/webgl_geometry_colors_lookuptable.html

@@ -104,11 +104,11 @@
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
-				renderer.setSize(  window.innerWidth,  window.innerHeight );
+				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 
 				window.addEventListener( 'resize', onWindowResize, false );
-				window.addEventListener( 'keydown', onKeyDown, true);
+				window.addEventListener( 'keydown', onKeyDown, true );
 
 			}
 
@@ -139,9 +139,9 @@
 
 			}
 
-			function loadModel ( colorMap, numberOfColors, legendLayout ) {
+			function loadModel( colorMap, numberOfColors, legendLayout ) {
 
-				loader.load( 'models/json/pressure.json', function( geometry ) {
+				loader.load( 'models/json/pressure.json', function ( geometry ) {
 
 					geometry.center();
 					geometry.computeVertexNormals();
@@ -186,7 +186,7 @@
 
 						if ( legendLayout === 'horizontal' ) {
 
-							legend = lut.setLegendOn( { 'layout':'horizontal', 'position': { 'x': 4, 'y': 0, 'z': 0 } } );
+							legend = lut.setLegendOn( { 'layout': 'horizontal', 'position': { 'x': 4, 'y': 0, 'z': 0 } } );
 
 						} else {
 
@@ -194,16 +194,16 @@
 
 						}
 
-						scene.add ( legend );
+						scene.add( legend );
 
 						var labels = lut.setLegendLabels( { 'title': 'Pressure', 'um': 'Pa', 'ticks': 5 } );
 
-						scene.add ( labels['title'] );
+						scene.add( labels[ 'title' ] );
 
 						for ( var i = 0; i < Object.keys( labels[ 'ticks' ] ).length; i ++ ) {
 
-							scene.add ( labels[ 'ticks' ][ i ] );
-							scene.add ( labels[ 'lines' ][ i ] );
+							scene.add( labels[ 'ticks' ][ i ] );
+							scene.add( labels[ 'lines' ][ i ] );
 
 						}
 
@@ -257,7 +257,7 @@
 
 					var index = maps.indexOf( colorMap ) >= maps.length - 1 ? 0 : maps.indexOf( colorMap ) + 1;
 
-					colorMap = maps [ index ];
+					colorMap = maps[ index ];
 
 					loadModel( colorMap, numberOfColors, legendLayout );
 
@@ -267,9 +267,9 @@
 
 					var index = colorNumbers.indexOf( numberOfColors ) >= colorNumbers.length - 1 ? 0 : colorNumbers.indexOf( numberOfColors ) + 1;
 
-					numberOfColors = colorNumbers [ index ];
+					numberOfColors = colorNumbers[ index ];
 
-					loadModel( colorMap ,  numberOfColors, legendLayout );
+					loadModel( colorMap, numberOfColors, legendLayout );
 
 				} else if ( e.keyCode === 68 ) {
 
@@ -279,7 +279,7 @@
 
 						legendLayout = 'vertical';
 
-						loadModel( colorMap ,  numberOfColors, legendLayout );
+						loadModel( colorMap, numberOfColors, legendLayout );
 
 					} else {
 
@@ -287,7 +287,7 @@
 
 						legendLayout = lut.setLegendOff();
 
-						loadModel( colorMap ,  numberOfColors, legendLayout );
+						loadModel( colorMap, numberOfColors, legendLayout );
 
 					}
 
@@ -299,7 +299,7 @@
 
 					lut.setLegendOff();
 
-					if ( legendLayout === 'horizontal') {
+					if ( legendLayout === 'horizontal' ) {
 
 						legendLayout = 'vertical';
 
@@ -309,7 +309,7 @@
 
 					}
 
-					loadModel( colorMap ,  numberOfColors, legendLayout );
+					loadModel( colorMap, numberOfColors, legendLayout );
 
 				}
 

examples/webgl_geometry_convex.html

@@ -139,11 +139,11 @@
 
 			}
 
-			function randomPoint() {
+			// function randomPoint() {
 
-				return new THREE.Vector3( THREE.Math.randFloat( - 1, 1 ), THREE.Math.randFloat( - 1, 1 ), THREE.Math.randFloat( - 1, 1 ) );
+			// 	return new THREE.Vector3( THREE.Math.randFloat( - 1, 1 ), THREE.Math.randFloat( - 1, 1 ), THREE.Math.randFloat( - 1, 1 ) );
 
-			}
+			// }
 
 			function onWindowResize() {
 

examples/webgl_geometry_dynamic.html

@@ -56,10 +56,9 @@
 
 			var camera, controls, scene, renderer, stats;
 
-			var mesh, texture, geometry, material, clock;
+			var mesh, geometry, material, clock;
 
-			var worldWidth = 128, worldDepth = 128,
-			worldHalfWidth = worldWidth / 2, worldHalfDepth = worldDepth / 2;
+			var worldWidth = 128, worldDepth = 128;
 
 			init();
 			animate();

examples/webgl_geometry_extrude_shapes.html

@@ -24,8 +24,6 @@
 
 		<script>
 
-			var container;
-
 			var camera, scene, renderer, controls;
 
 			init();
@@ -67,11 +65,11 @@
 				//
 
 				var closedSpline = new THREE.CatmullRomCurve3( [
-					new THREE.Vector3( -60, -100,  60 ),
-					new THREE.Vector3( -60,   20,  60 ),
-					new THREE.Vector3( -60,  120,  60 ),
-					new THREE.Vector3(  60,   20, -60 ),
-					new THREE.Vector3(  60, -100, -60 )
+					new THREE.Vector3( - 60, - 100, 60 ),
+					new THREE.Vector3( - 60, 20, 60 ),
+					new THREE.Vector3( - 60, 120, 60 ),
+					new THREE.Vector3( 60, 20, - 60 ),
+					new THREE.Vector3( 60, - 100, - 60 )
 				] );
 
 				closedSpline.curveType = 'catmullrom';
@@ -92,7 +90,7 @@
 
 					var a = 2 * i / count * Math.PI;
 
-					pts.push( new THREE.Vector2 ( Math.cos( a ) * l, Math.sin( a ) * l ) );
+					pts.push( new THREE.Vector2( Math.cos( a ) * l, Math.sin( a ) * l ) );
 
 				}
 
@@ -118,7 +116,7 @@
 
 				}
 
-				var randomSpline =  new THREE.CatmullRomCurve3( randomPoints );
+				var randomSpline = new THREE.CatmullRomCurve3( randomPoints );
 
 				//
 
@@ -137,7 +135,7 @@
 
 					var a = i / numPts * Math.PI;
 
-					pts.push( new THREE.Vector2 ( Math.cos( a ) * l, Math.sin( a ) * l ) );
+					pts.push( new THREE.Vector2( Math.cos( a ) * l, Math.sin( a ) * l ) );
 
 				}
 
@@ -160,7 +158,7 @@
 					depth: 20,
 					steps: 1,
 					bevelEnabled: true,
-					bevelThickness : 2,
+					bevelThickness: 2,
 					bevelSize: 4,
 					bevelSegments: 1
 				};

examples/webgl_geometry_extrude_shapes2.html

@@ -237,8 +237,10 @@
 
 							case 'T':
 								if ( activeCmd === 'T' ) {
+
 									x1 = 2 * x - x1;
 									y1 = 2 * y - y1;
+
 								}
 								nx = eatNum();
 								ny = eatNum();
@@ -292,7 +294,7 @@
 								if ( laf === sf ) norm = - norm;
 
 								x2 = norm * rx * y1 / ry;
-								y2 = norm * -ry * x1 / rx;
+								y2 = norm * - ry * x1 / rx;
 
 								// step 3
 
@@ -338,7 +340,7 @@
 
 					return path;
 
-				}
+				};
 
 			}
 
@@ -348,7 +350,7 @@
 			/// Part from g0v/twgeojson
 			/// Graphic Engine and Geo Data Init Functions
 
-			var addGeoObject = function( group, svgObject ) {
+			var addGeoObject = function ( group, svgObject ) {
 
 				var paths = svgObject.paths;
 				var depths = svgObject.depths;
@@ -490,10 +492,10 @@
 					"M363.4600,128.3904 L366.6300,130.3829 L369.3732,129.3913 L369.5603,125.6695 L374.3989,125.1677 " +
 					"L370.8412,123.6440 L371.0684,118.8252 L369.0431,117.3157 L369.6882,115.7936 L367.8578,112.8749 " +
 					"L368.1217,110.4867 L366.5152,109.2554 L361.9554,112.3435 L358.1163,117.8678 L361.7218,120.2192 " +
-					"L360.7261,126.3232 L362.8064,125.5221 Z"];
+					"L360.7261,126.3232 L362.8064,125.5221 Z" ];
 
 				obj.depths = [ 19, 20, 21 ];
-				obj.colors =  [ 0xC07000, 0xC08000, 0xC0A000 ];
+				obj.colors = [ 0xC07000, 0xC08000, 0xC0A000 ];
 				obj.center = { x: 365, y: 125 };
 
 				return obj;

examples/webgl_geometry_extrude_splines.html

@@ -48,28 +48,28 @@
 		var normal = new THREE.Vector3();
 
 		var pipeSpline = new THREE.CatmullRomCurve3( [
-				new THREE.Vector3( 0, 10, -10 ), new THREE.Vector3( 10, 0, -10 ),
-				new THREE.Vector3( 20, 0, 0 ), new THREE.Vector3( 30, 0, 10 ),
-				new THREE.Vector3( 30, 0, 20 ), new THREE.Vector3( 20, 0, 30 ),
-				new THREE.Vector3( 10, 0, 30 ), new THREE.Vector3( 0, 0, 30 ),
-				new THREE.Vector3( -10, 10, 30 ), new THREE.Vector3( -10, 20, 30 ),
-				new THREE.Vector3( 0, 30, 30 ), new THREE.Vector3( 10, 30, 30 ),
-				new THREE.Vector3( 20, 30, 15 ), new THREE.Vector3( 10, 30, 10 ),
-				new THREE.Vector3( 0, 30, 10 ), new THREE.Vector3( -10, 20, 10 ),
-				new THREE.Vector3( -10, 10, 10 ), new THREE.Vector3( 0, 0, 10 ),
-				new THREE.Vector3( 10, -10, 10 ), new THREE.Vector3( 20, -15, 10 ),
-				new THREE.Vector3( 30, -15, 10 ), new THREE.Vector3( 40, -15, 10 ),
-				new THREE.Vector3( 50, -15, 10 ), new THREE.Vector3( 60, 0, 10 ),
-				new THREE.Vector3( 70, 0, 0 ), new THREE.Vector3( 80, 0, 0 ),
-				new THREE.Vector3( 90, 0, 0 ), new THREE.Vector3( 100, 0, 0 )
+			new THREE.Vector3( 0, 10, - 10 ), new THREE.Vector3( 10, 0, - 10 ),
+			new THREE.Vector3( 20, 0, 0 ), new THREE.Vector3( 30, 0, 10 ),
+			new THREE.Vector3( 30, 0, 20 ), new THREE.Vector3( 20, 0, 30 ),
+			new THREE.Vector3( 10, 0, 30 ), new THREE.Vector3( 0, 0, 30 ),
+			new THREE.Vector3( - 10, 10, 30 ), new THREE.Vector3( - 10, 20, 30 ),
+			new THREE.Vector3( 0, 30, 30 ), new THREE.Vector3( 10, 30, 30 ),
+			new THREE.Vector3( 20, 30, 15 ), new THREE.Vector3( 10, 30, 10 ),
+			new THREE.Vector3( 0, 30, 10 ), new THREE.Vector3( - 10, 20, 10 ),
+			new THREE.Vector3( - 10, 10, 10 ), new THREE.Vector3( 0, 0, 10 ),
+			new THREE.Vector3( 10, - 10, 10 ), new THREE.Vector3( 20, - 15, 10 ),
+			new THREE.Vector3( 30, - 15, 10 ), new THREE.Vector3( 40, - 15, 10 ),
+			new THREE.Vector3( 50, - 15, 10 ), new THREE.Vector3( 60, 0, 10 ),
+			new THREE.Vector3( 70, 0, 0 ), new THREE.Vector3( 80, 0, 0 ),
+			new THREE.Vector3( 90, 0, 0 ), new THREE.Vector3( 100, 0, 0 )
 		] );
 
 		var sampleClosedSpline = new THREE.CatmullRomCurve3( [
-			new THREE.Vector3( 0, -40, -40 ),
-			new THREE.Vector3( 0, 40, -40 ),
-			new THREE.Vector3( 0, 140, -40 ),
+			new THREE.Vector3( 0, - 40, - 40 ),
+			new THREE.Vector3( 0, 40, - 40 ),
+			new THREE.Vector3( 0, 140, - 40 ),
 			new THREE.Vector3( 0, 40, 40 ),
-			new THREE.Vector3( 0, -40, 40 )
+			new THREE.Vector3( 0, - 40, 40 )
 		] );
 
 		sampleClosedSpline.curveType = 'catmullrom';
@@ -218,24 +218,52 @@
 			var gui = new dat.GUI( { width: 300 } );
 
 			var folderGeometry = gui.addFolder( 'Geometry' );
-			folderGeometry.add( params, 'spline', Object.keys( splines ) ).onChange( function( value ) { addTube(); } );
-			folderGeometry.add( params, 'scale', 2, 10 ).step( 2 ).onChange( function( value ) { setScale(); } );
-			folderGeometry.add( params, 'extrusionSegments', 50, 500 ).step( 50 ).onChange( function( value ) { addTube(); } );
-			folderGeometry.add( params, 'radiusSegments', 2, 12 ).step( 1 ).onChange( function( value ) { addTube(); } );
-			folderGeometry.add( params, 'closed').onChange( function( value ) { addTube(); } );
+			folderGeometry.add( params, 'spline', Object.keys( splines ) ).onChange( function () {
+
+				addTube();
+
+			} );
+			folderGeometry.add( params, 'scale', 2, 10 ).step( 2 ).onChange( function () {
+
+				setScale();
+
+			} );
+			folderGeometry.add( params, 'extrusionSegments', 50, 500 ).step( 50 ).onChange( function () {
+
+				addTube();
+
+			} );
+			folderGeometry.add( params, 'radiusSegments', 2, 12 ).step( 1 ).onChange( function () {
+
+				addTube();
+
+			} );
+			folderGeometry.add( params, 'closed' ).onChange( function () {
+
+				addTube();
+
+			} );
 			folderGeometry.open();
 
 			var folderCamera = gui.addFolder( 'Camera' );
-			folderCamera.add( params, 'animationView').onChange( function( value ) { animateCamera(); } );
-			folderCamera.add( params, 'lookAhead').onChange( function( value ) { animateCamera(); } );
-			folderCamera.add( params, 'cameraHelper').onChange( function( value ) { animateCamera(); } );
-			folderCamera.open();
+			folderCamera.add( params, 'animationView' ).onChange( function () {
 
-			// controls
+				animateCamera();
 
-			var controls = new THREE.OrbitControls( camera, renderer.domElement );
+			} );
+			folderCamera.add( params, 'lookAhead' ).onChange( function () {
+
+				animateCamera();
+
+			} );
+			folderCamera.add( params, 'cameraHelper' ).onChange( function () {
 
-			// event listener
+				animateCamera();
+
+			} );
+			folderCamera.open();
+
+			var controls = new THREE.OrbitControls( camera, renderer.domElement );
 
 			window.addEventListener( 'resize', onWindowResize, false );
 

examples/webgl_geometry_hierarchy.html

@@ -21,9 +21,7 @@
 
 		<script>
 
-			var camera, scene, renderer, stats;
-
-			var geometry, group;
+			var camera, scene, renderer, stats, group;
 
 			var mouseX = 0, mouseY = 0;
 

examples/webgl_geometry_hierarchy2.html

@@ -21,9 +21,7 @@
 
 		<script>
 
-			var camera, scene, renderer, stats;
-
-			var geometry, root;
+			var camera, scene, renderer, stats, root;
 
 			var mouseX = 0, mouseY = 0;
 

examples/webgl_geometry_minecraft.html

@@ -63,11 +63,10 @@
 
 			var camera, controls, scene, renderer;
 
-			var mesh;
-
-			var worldWidth = 128, worldDepth = 128,
-			worldHalfWidth = worldWidth / 2, worldHalfDepth = worldDepth / 2,
-			data = generateHeight( worldWidth, worldDepth );
+			var worldWidth = 128, worldDepth = 128;
+			var worldHalfWidth = worldWidth / 2;
+			var worldHalfDepth = worldDepth / 2;
+			var data = generateHeight( worldWidth, worldDepth );
 
 			var clock = new THREE.Clock();
 
@@ -121,7 +120,7 @@
 				nzGeometry.attributes.uv.array[ 1 ] = 0.5;
 				nzGeometry.attributes.uv.array[ 3 ] = 0.5;
 				nzGeometry.rotateY( Math.PI );
-				nzGeometry.translate( 0, 0, -50 );
+				nzGeometry.translate( 0, 0, - 50 );
 
 				//
 
@@ -221,7 +220,7 @@
 			function generateHeight( width, height ) {
 
 				var data = [], perlin = new ImprovedNoise(),
-				size = width * height, quality = 2, z = Math.random() * 100;
+					size = width * height, quality = 2, z = Math.random() * 100;
 
 				for ( var j = 0; j < 4; j ++ ) {
 

examples/webgl_geometry_minecraft_ao.html

@@ -59,17 +59,14 @@
 
 			}
 
-			var fogExp2 = true;
-
 			var container, stats;
 
 			var camera, controls, scene, renderer;
 
-			var mesh, mat;
-
-			var worldWidth = 200, worldDepth = 200,
-			worldHalfWidth = worldWidth / 2, worldHalfDepth = worldDepth / 2,
-			data = generateHeight( worldWidth, worldDepth );
+			var worldWidth = 200, worldDepth = 200;
+			var worldHalfWidth = worldWidth / 2;
+			var worldHalfDepth = worldDepth / 2;
+			var data = generateHeight( worldWidth, worldDepth );
 
 			var clock = new THREE.Clock();
 
@@ -321,21 +318,10 @@
 
 			}
 
-			function loadTexture( path, callback ) {
-
-				var image = new Image();
-
-				image.onload = function () { callback(); };
-				image.src = path;
-
-				return image;
-
-			}
-
 			function generateHeight( width, height ) {
 
 				var data = [], perlin = new ImprovedNoise(),
-				size = width * height, quality = 2, z = Math.random() * 100;
+					size = width * height, quality = 2, z = Math.random() * 100;
 
 				for ( var j = 0; j < 4; j ++ ) {
 
@@ -348,7 +334,7 @@
 
 					}
 
-					quality *= 4
+					quality *= 4;
 
 				}
 

examples/webgl_geometry_normals.html

@@ -133,7 +133,7 @@
 				};
 
 				gui = new dat.GUI( { width: 350 } );
-				gui.add( options, 'Geometry', geometries ).onChange( function( value ) {
+				gui.add( options, 'Geometry', geometries ).onChange( function () {
 
 					addMesh();
 

examples/webgl_geometry_nurbs.html

@@ -45,7 +45,6 @@
 			var mouseXOnMouseDown = 0;
 
 			var windowHalfX = window.innerWidth / 2;
-			var windowHalfY = window.innerHeight / 2;
 
 			init();
 			animate();
@@ -131,29 +130,29 @@
 
 				var nsControlPoints = [
 					[
-						new THREE.Vector4 ( -200, -200, 100, 1 ),
-						new THREE.Vector4 ( -200, -100, -200, 1 ),
-						new THREE.Vector4 ( -200, 100, 250, 1 ),
-						new THREE.Vector4 ( -200, 200, -100, 1 )
+						new THREE.Vector4( - 200, - 200, 100, 1 ),
+						new THREE.Vector4( - 200, - 100, - 200, 1 ),
+						new THREE.Vector4( - 200, 100, 250, 1 ),
+						new THREE.Vector4( - 200, 200, - 100, 1 )
 					],
 					[
-						new THREE.Vector4 ( 0, -200, 0, 1 ),
-						new THREE.Vector4 ( 0, -100, -100, 5 ),
-						new THREE.Vector4 ( 0, 100, 150, 5 ),
-						new THREE.Vector4 ( 0, 200, 0, 1 )
+						new THREE.Vector4( 0, - 200, 0, 1 ),
+						new THREE.Vector4( 0, - 100, - 100, 5 ),
+						new THREE.Vector4( 0, 100, 150, 5 ),
+						new THREE.Vector4( 0, 200, 0, 1 )
 					],
 					[
-						new THREE.Vector4 ( 200, -200, -100, 1 ),
-						new THREE.Vector4 ( 200, -100, 200, 1 ),
-						new THREE.Vector4 ( 200, 100, -250, 1 ),
-						new THREE.Vector4 ( 200, 200, 100, 1 )
+						new THREE.Vector4( 200, - 200, - 100, 1 ),
+						new THREE.Vector4( 200, - 100, 200, 1 ),
+						new THREE.Vector4( 200, 100, - 250, 1 ),
+						new THREE.Vector4( 200, 200, 100, 1 )
 					]
 				];
 				var degree1 = 2;
 				var degree2 = 3;
-				var knots1 = [0, 0, 0, 1, 1, 1];
-				var knots2 = [0, 0, 0, 0, 1, 1, 1, 1];
-				var nurbsSurface = new THREE.NURBSSurface(degree1, degree2, knots1, knots2, nsControlPoints);
+				var knots1 = [ 0, 0, 0, 1, 1, 1 ];
+				var knots2 = [ 0, 0, 0, 0, 1, 1, 1, 1 ];
+				var nurbsSurface = new THREE.NURBSSurface( degree1, degree2, knots1, knots2, nsControlPoints );
 
 				var map = new THREE.TextureLoader().load( 'textures/UV_Grid_Sm.jpg' );
 				map.wrapS = map.wrapT = THREE.RepeatWrapping;
@@ -195,7 +194,6 @@
 			function onWindowResize() {
 
 				windowHalfX = window.innerWidth / 2;
-				windowHalfY = window.innerHeight / 2;
 
 				camera.aspect = window.innerWidth / window.innerHeight;
 				camera.updateProjectionMatrix();
@@ -227,7 +225,7 @@
 
 			}
 
-			function onDocumentMouseUp( event ) {
+			function onDocumentMouseUp() {
 
 				document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
 				document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
@@ -235,7 +233,7 @@
 
 			}
 
-			function onDocumentMouseOut( event ) {
+			function onDocumentMouseOut() {
 
 				document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
 				document.removeEventListener( 'mouseup', onDocumentMouseUp, false );

examples/webgl_geometry_shapes.html

@@ -171,11 +171,11 @@
 				californiaPts.push( new THREE.Vector2( 180, 640 ) );
 				californiaPts.push( new THREE.Vector2( 165, 680 ) );
 				californiaPts.push( new THREE.Vector2( 150, 670 ) );
-				californiaPts.push( new THREE.Vector2(  90, 737 ) );
-				californiaPts.push( new THREE.Vector2(  80, 795 ) );
-				californiaPts.push( new THREE.Vector2(  50, 835 ) );
-				californiaPts.push( new THREE.Vector2(  64, 870 ) );
-				californiaPts.push( new THREE.Vector2(  60, 945 ) );
+				californiaPts.push( new THREE.Vector2( 90, 737 ) );
+				californiaPts.push( new THREE.Vector2( 80, 795 ) );
+				californiaPts.push( new THREE.Vector2( 50, 835 ) );
+				californiaPts.push( new THREE.Vector2( 64, 870 ) );
+				californiaPts.push( new THREE.Vector2( 60, 945 ) );
 				californiaPts.push( new THREE.Vector2( 300, 945 ) );
 				californiaPts.push( new THREE.Vector2( 300, 743 ) );
 				californiaPts.push( new THREE.Vector2( 600, 473 ) );
@@ -183,7 +183,7 @@
 				californiaPts.push( new THREE.Vector2( 600, 370 ) );
 				californiaPts.push( new THREE.Vector2( 610, 320 ) );
 
-				for( var i = 0; i < californiaPts.length; i ++ ) californiaPts[ i ].multiplyScalar( 0.25 );
+				for ( var i = 0; i < californiaPts.length; i ++ ) californiaPts[ i ].multiplyScalar( 0.25 );
 
 				var californiaShape = new THREE.Shape( californiaPts );
 
@@ -346,17 +346,17 @@
 
 				// addShape( shape, color, x, y, z, rx, ry,rz, s );
 
-				addShape( californiaShape,  extrudeSettings, 0xf08000, -300, -100, 0, 0, 0, 0, 1 );
-				addShape( triangleShape,    extrudeSettings, 0x8080f0, -180,    0, 0, 0, 0, 0, 1 );
-				addShape( roundedRectShape, extrudeSettings, 0x008000, -150,  150, 0, 0, 0, 0, 1 );
-				addShape( trackShape,       extrudeSettings, 0x008080,  200, -100, 0, 0, 0, 0, 1 );
-				addShape( squareShape,      extrudeSettings, 0x0040f0,  150,  100, 0, 0, 0, 0, 1 );
-				addShape( heartShape,       extrudeSettings, 0xf00000,   60,  100, 0, 0, 0, Math.PI, 1 );
-				addShape( circleShape,      extrudeSettings, 0x00f000,  120,  250, 0, 0, 0, 0, 1 );
-				addShape( fishShape,        extrudeSettings, 0x404040, - 60,  200, 0, 0, 0, 0, 1 );
-				addShape( smileyShape,      extrudeSettings, 0xf000f0, -200,  250, 0, 0, 0, Math.PI, 1 );
-				addShape( arcShape,         extrudeSettings, 0x804000,  150,    0, 0, 0, 0, 0, 1 );
-				addShape( splineShape,      extrudeSettings, 0x808080, - 50, -100, 0, 0, 0, 0, 1 );
+				addShape( californiaShape, extrudeSettings, 0xf08000, - 300, - 100, 0, 0, 0, 0, 1 );
+				addShape( triangleShape, extrudeSettings, 0x8080f0, - 180, 0, 0, 0, 0, 0, 1 );
+				addShape( roundedRectShape, extrudeSettings, 0x008000, - 150, 150, 0, 0, 0, 0, 1 );
+				addShape( trackShape, extrudeSettings, 0x008080, 200, - 100, 0, 0, 0, 0, 1 );
+				addShape( squareShape, extrudeSettings, 0x0040f0, 150, 100, 0, 0, 0, 0, 1 );
+				addShape( heartShape, extrudeSettings, 0xf00000, 60, 100, 0, 0, 0, Math.PI, 1 );
+				addShape( circleShape, extrudeSettings, 0x00f000, 120, 250, 0, 0, 0, 0, 1 );
+				addShape( fishShape, extrudeSettings, 0x404040, - 60, 200, 0, 0, 0, 0, 1 );
+				addShape( smileyShape, extrudeSettings, 0xf000f0, - 200, 250, 0, 0, 0, Math.PI, 1 );
+				addShape( arcShape, extrudeSettings, 0x804000, 150, 0, 0, 0, 0, 0, 1 );
+				addShape( splineShape, extrudeSettings, 0x808080, - 50, - 100, 0, 0, 0, 0, 1 );
 
 				addLineShape( arcShape.holes[ 0 ], 0x804000, 150, 0, 0, 0, 0, 0, 1 );
 
@@ -418,7 +418,7 @@
 
 			}
 
-			function onDocumentMouseUp( event ) {
+			function onDocumentMouseUp() {
 
 				document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
 				document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
@@ -426,7 +426,7 @@
 
 			}
 
-			function onDocumentMouseOut( event ) {
+			function onDocumentMouseOut() {
 
 				document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
 				document.removeEventListener( 'mouseup', onDocumentMouseUp, false );

examples/webgl_geometry_spline_editor.html

@@ -53,12 +53,11 @@
 			};
 
 			var container, stats;
-			var camera, scene, renderer, spotlight;
-			var splineHelperObjects = [], splineOutline;
+			var camera, scene, renderer;
+			var splineHelperObjects = [];
 			var splinePointsLength = 4;
 			var positions = [];
 			var point = new THREE.Vector3();
-			var options;
 
 			var geometry = new THREE.BoxBufferGeometry( 20, 20, 20 );
 			var transformControl;
@@ -96,18 +95,17 @@
 				light.position.set( 0, 1500, 200 );
 				light.castShadow = true;
 				light.shadow = new THREE.LightShadow( new THREE.PerspectiveCamera( 70, 1, 200, 2000 ) );
-				light.shadow.bias = -0.000222;
+				light.shadow.bias = - 0.000222;
 				light.shadow.mapSize.width = 1024;
 				light.shadow.mapSize.height = 1024;
 				scene.add( light );
-				spotlight = light;
 
 				var planeGeometry = new THREE.PlaneBufferGeometry( 2000, 2000 );
 				planeGeometry.rotateX( - Math.PI / 2 );
 				var planeMaterial = new THREE.ShadowMaterial( { opacity: 0.2 } );
 
 				var plane = new THREE.Mesh( planeGeometry, planeMaterial );
-				plane.position.y = -200;
+				plane.position.y = - 200;
 				plane.receiveShadow = true;
 				scene.add( plane );
 
@@ -133,10 +131,12 @@
 				var gui = new dat.GUI();
 
 				gui.add( params, 'uniform' );
-				gui.add( params, 'tension', 0, 1 ).step( 0.01 ).onChange( function( value ) {
+				gui.add( params, 'tension', 0, 1 ).step( 0.01 ).onChange( function ( value ) {
+
 					splines.uniform.tension = value;
 					updateSplineOutline();
-				});
+
+	} );
 				gui.add( params, 'centripetal' );
 				gui.add( params, 'chordal' );
 				gui.add( params, 'addPoint' );
@@ -149,13 +149,13 @@
 				controls.damping = 0.2;
 				controls.addEventListener( 'change', render );
 
-				controls.addEventListener( 'start', function() {
+				controls.addEventListener( 'start', function () {
 
 					cancelHideTransorm();
 
 				} );
 
-				controls.addEventListener( 'end', function() {
+				controls.addEventListener( 'end', function () {
 
 					delayHideTransform();
 
@@ -164,30 +164,32 @@
 				transformControl = new THREE.TransformControls( camera, renderer.domElement );
 				transformControl.addEventListener( 'change', render );
 				transformControl.addEventListener( 'dragging-changed', function ( event ) {
-					controls.enabled = !event.value
-				} );
+
+					controls.enabled = ! event.value;
+
+	} );
 				scene.add( transformControl );
 
 				// Hiding transform situation is a little in a mess :()
-				transformControl.addEventListener( 'change', function( e ) {
+				transformControl.addEventListener( 'change', function () {
 
 					cancelHideTransorm();
 
 				} );
 
-				transformControl.addEventListener( 'mouseDown', function( e ) {
+				transformControl.addEventListener( 'mouseDown', function () {
 
 					cancelHideTransorm();
 
 				} );
 
-				transformControl.addEventListener( 'mouseUp', function( e ) {
+				transformControl.addEventListener( 'mouseUp', function () {
 
 					delayHideTransform();
 
 				} );
 
-				transformControl.addEventListener( 'objectChange', function( e ) {
+				transformControl.addEventListener( 'objectChange', function () {
 
 					updateSplineOutline();
 
@@ -202,7 +204,7 @@
 
 				} );
 
-				dragcontrols.addEventListener( 'hoveroff', function ( event ) {
+				dragcontrols.addEventListener( 'hoveroff', function () {
 
 					delayHideTransform();
 
@@ -219,11 +221,11 @@
 
 				function hideTransform() {
 
-					hiding = setTimeout( function() {
+					hiding = setTimeout( function () {
 
 						transformControl.detach( transformControl.object );
 
-					}, 2500 )
+					}, 2500 );
 
 				}
 
@@ -259,7 +261,7 @@
 				curve.mesh = new THREE.Line( geometry.clone(), new THREE.LineBasicMaterial( {
 					color: 0xff0000,
 					opacity: 0.35
-					} ) );
+				} ) );
 				curve.mesh.castShadow = true;
 				splines.uniform = curve;
 
@@ -268,7 +270,7 @@
 				curve.mesh = new THREE.Line( geometry.clone(), new THREE.LineBasicMaterial( {
 					color: 0x00ff00,
 					opacity: 0.35
-					} ) );
+				} ) );
 				curve.mesh.castShadow = true;
 				splines.centripetal = curve;
 
@@ -277,7 +279,7 @@
 				curve.mesh = new THREE.Line( geometry.clone(), new THREE.LineBasicMaterial( {
 					color: 0x0000ff,
 					opacity: 0.35
-					} ) );
+				} ) );
 				curve.mesh.castShadow = true;
 				splines.chordal = curve;
 
@@ -289,9 +291,9 @@
 				}
 
 				load( [ new THREE.Vector3( 289.76843686945404, 452.51481137238443, 56.10018915737797 ),
-						new THREE.Vector3( -53.56300074753207, 171.49711742836848, -14.495472686253045 ),
-						new THREE.Vector3( -91.40118730204415, 176.4306956436485, -6.958271935582161 ),
-						new THREE.Vector3( -383.785318791128, 491.1365363371675, 47.869296953772746 ) ] );
+					new THREE.Vector3( - 53.56300074753207, 171.49711742836848, - 14.495472686253045 ),
+					new THREE.Vector3( - 91.40118730204415, 176.4306956436485, - 6.958271935582161 ),
+					new THREE.Vector3( - 383.785318791128, 491.1365363371675, 47.869296953772746 ) ] );
 
 			}
 
@@ -356,7 +358,7 @@
 
 					for ( var i = 0; i < ARC_SEGMENTS; i ++ ) {
 
-						var t = i /  ( ARC_SEGMENTS - 1 );
+						var t = i / ( ARC_SEGMENTS - 1 );
 						spline.getPoint( t, point );
 						position.setXYZ( i, point.x, point.y, point.z );
 
@@ -375,7 +377,7 @@
 				for ( var i = 0; i < splinePointsLength; i ++ ) {
 
 					var p = splineHelperObjects[ i ].position;
-					strplace.push( 'new THREE.Vector3({0}, {1}, {2})'.format( p.x, p.y, p.z ) )
+					strplace.push( 'new THREE.Vector3({0}, {1}, {2})'.format( p.x, p.y, p.z ) );
 
 				}
 

examples/webgl_geometry_teapot.html

@@ -50,7 +50,7 @@
 			////////////////////////////////////////////////////////////////////////////////
 			// Utah/Newell Teapot demo
 			////////////////////////////////////////////////////////////////////////////////
-			/*global THREE, WEBGL, container, dat, window */
+			/*global THREE, WEBGL, dat, window */
 
 			if ( WEBGL.isWebGLAvailable() === false ) {
 
@@ -63,10 +63,9 @@
 			var effectController;
 			var teapotSize = 400;
 			var ambientLight, light;
-			var skybox;
 
-			var tess = -1;	// force initialization
-			var bBottom ;
+			var tess = - 1;	// force initialization
+			var bBottom;
 			var bLid;
 			var bBody;
 			var bFitLid;
@@ -93,7 +92,7 @@
 
 				// CAMERA
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 80000 );
-				camera.position.set( -600, 550, 1300 );
+				camera.position.set( - 600, 550, 1300 );
 
 				// LIGHTS
 				ambientLight = new THREE.AmbientLight( 0x333333 );	// 0.2
@@ -135,7 +134,7 @@
 				var materialColor = new THREE.Color();
 				materialColor.setRGB( 1.0, 1.0, 1.0 );
 
-				wireMaterial = new THREE.MeshBasicMaterial( { color: 0xFFFFFF, wireframe: true } ) ;
+				wireMaterial = new THREE.MeshBasicMaterial( { color: 0xFFFFFF, wireframe: true } );
 
 				flatMaterial = new THREE.MeshPhongMaterial( { color: materialColor, specular: 0x000000, flatShading: true, side: THREE.DoubleSide } );
 
@@ -185,13 +184,13 @@
 					ks: 0.2,
 					metallic: true,
 
-					hue:		0.121,
+					hue:	0.121,
 					saturation: 0.73,
-					lightness:  0.66,
+					lightness: 0.66,
 
-					lhue:		 0.04,
+					lhue:	0.04,
 					lsaturation: 0.01,	// non-zero so that fractions will be shown
-					llightness:  1.0,
+					llightness: 1.0,
 
 					// bizarrely, if you initialize these with negative numbers, the sliders
 					// will not show any decimal places.
@@ -241,9 +240,9 @@
 
 				h = gui.addFolder( "Light direction" );
 
-				h.add( effectController, "lx", -1.0, 1.0, 0.025 ).name( "x" ).onChange( render );
-				h.add( effectController, "ly", -1.0, 1.0, 0.025 ).name( "y" ).onChange( render );
-				h.add( effectController, "lz", -1.0, 1.0, 0.025 ).name( "z" ).onChange( render );
+				h.add( effectController, "lx", - 1.0, 1.0, 0.025 ).name( "x" ).onChange( render );
+				h.add( effectController, "ly", - 1.0, 1.0, 0.025 ).name( "y" ).onChange( render );
+				h.add( effectController, "lz", - 1.0, 1.0, 0.025 ).name( "z" ).onChange( render );
 
 				h = gui.addFolder( "Tessellation control" );
 				h.add( effectController, "newTess", [ 2, 3, 4, 5, 6, 8, 10, 15, 20, 30, 40, 50 ] ).name( "Tessellation Level" ).onChange( render );
@@ -270,8 +269,7 @@
 					effectController.body !== bBody ||
 					effectController.fitLid !== bFitLid ||
 					effectController.nonblinn !== bNonBlinn ||
-					effectController.newShading !== shading )
-				{
+					effectController.newShading !== shading ) {
 
 					tess = effectController.newTess;
 					bBottom = effectController.bottom;
@@ -291,15 +289,12 @@
 				texturedMaterial.shininess = effectController.shininess;
 
 				diffuseColor.setHSL( effectController.hue, effectController.saturation, effectController.lightness );
-				if ( effectController.metallic )
-				{
+				if ( effectController.metallic ) {
 
 					// make colors match to give a more metallic look
 					specularColor.copy( diffuseColor );
 
-				}
-				else
-				{
+				} else {
 
 					// more of a plastic look
 					specularColor.setRGB( 1, 1, 1 );
@@ -358,10 +353,10 @@
 				teapot = new THREE.Mesh(
 					teapotGeometry,
 					shading === "wireframe" ? wireMaterial : (
-					shading === "flat" ? flatMaterial : (
-					shading === "smooth" ? gouraudMaterial : (
-					shading === "glossy" ? phongMaterial : (
-					shading === "textured" ? texturedMaterial : reflectiveMaterial ) ) ) ) );	// if no match, pick Phong
+						shading === "flat" ? flatMaterial : (
+							shading === "smooth" ? gouraudMaterial : (
+								shading === "glossy" ? phongMaterial : (
+									shading === "textured" ? texturedMaterial : reflectiveMaterial ) ) ) ) );	// if no match, pick Phong
 
 				scene.add( teapot );
 

examples/webgl_geometry_terrain.html

@@ -58,7 +58,7 @@
 			var mesh, texture;
 
 			var worldWidth = 256, worldDepth = 256,
-			worldHalfWidth = worldWidth / 2, worldHalfDepth = worldDepth / 2;
+				worldHalfWidth = worldWidth / 2, worldHalfDepth = worldDepth / 2;
 
 			var clock = new THREE.Clock();
 
@@ -131,13 +131,13 @@
 			function generateHeight( width, height ) {
 
 				var size = width * height, data = new Uint8Array( size ),
-				perlin = new ImprovedNoise(), quality = 1, z = Math.random() * 100;
+					perlin = new ImprovedNoise(), quality = 1, z = Math.random() * 100;
 
 				for ( var j = 0; j < 4; j ++ ) {
 
 					for ( var i = 0; i < size; i ++ ) {
 
-						var x = i % width, y = ~~ ( i / width );
+						var x = i % width, y = ~ ~ ( i / width );
 						data[ i ] += Math.abs( perlin.noise( x / quality, y / quality, z ) * quality * 1.75 );
 
 					}
@@ -182,6 +182,7 @@
 					imageData[ i ] = ( 96 + shade * 128 ) * ( 0.5 + data[ j ] * 0.007 );
 					imageData[ i + 1 ] = ( 32 + shade * 96 ) * ( 0.5 + data[ j ] * 0.007 );
 					imageData[ i + 2 ] = ( shade * 96 ) * ( 0.5 + data[ j ] * 0.007 );
+
 				}
 
 				context.putImageData( image, 0, 0 );
@@ -201,7 +202,7 @@
 
 				for ( var i = 0, l = imageData.length; i < l; i += 4 ) {
 
-					var v = ~~ ( Math.random() * 5 );
+					var v = ~ ~ ( Math.random() * 5 );
 
 					imageData[ i ] += v;
 					imageData[ i + 1 ] += v;

examples/webgl_geometry_terrain_fog.html

@@ -23,7 +23,6 @@
 			}
 
 			a {
-
 				color: #a06851;
 			}
 
@@ -56,8 +55,9 @@
 
 			var mesh, texture;
 
-			var worldWidth = 256, worldDepth = 256,
-			worldHalfWidth = worldWidth / 2, worldHalfDepth = worldDepth / 2;
+			var worldWidth = 256, worldDepth = 256;
+			var worldHalfWidth = worldWidth / 2;
+			var worldHalfDepth = worldDepth / 2;
 
 			var clock = new THREE.Clock();
 
@@ -132,13 +132,13 @@
 			function generateHeight( width, height ) {
 
 				var size = width * height, data = new Uint8Array( size ),
-				perlin = new ImprovedNoise(), quality = 1, z = Math.random() * 100;
+					perlin = new ImprovedNoise(), quality = 1, z = Math.random() * 100;
 
 				for ( var j = 0; j < 4; j ++ ) {
 
 					for ( var i = 0; i < size; i ++ ) {
 
-						var x = i % width, y = ~~ ( i / width );
+						var x = i % width, y = ~ ~ ( i / width );
 						data[ i ] += Math.abs( perlin.noise( x / quality, y / quality, z ) * quality * 1.75 );
 
 					}
@@ -203,7 +203,7 @@
 
 				for ( var i = 0, l = imageData.length; i < l; i += 4 ) {
 
-					var v = ~~ ( Math.random() * 5 );
+					var v = ~ ~ ( Math.random() * 5 );
 
 					imageData[ i ] += v;
 					imageData[ i + 1 ] += v;

examples/webgl_geometry_terrain_raycast.html

@@ -23,7 +23,6 @@
 			}
 
 			a {
-
 				color: #a06851;
 			}
 
@@ -59,8 +58,6 @@
 			var worldWidth = 256, worldDepth = 256,
 				worldHalfWidth = worldWidth / 2, worldHalfDepth = worldDepth / 2;
 
-			var clock = new THREE.Clock();
-
 			var helper;
 
 			var raycaster = new THREE.Raycaster();

examples/webgl_geometry_text.html

@@ -52,7 +52,7 @@
 
 			THREE.Cache.enabled = true;
 
-			var container, stats, permalink, hex, color;
+			var container, stats, permalink, hex;
 
 			var camera, cameraTarget, scene, renderer;
 
@@ -70,7 +70,6 @@
 
 				bevelThickness = 2,
 				bevelSize = 1.5,
-				bevelSegments = 3,
 				bevelEnabled = true,
 
 				font = undefined,
@@ -100,8 +99,8 @@
 			var reverseFontMap = [];
 			var reverseWeightMap = [];
 
-			for ( var i in fontMap ) reverseFontMap[ fontMap[i] ] = i;
-			for ( var i in weightMap ) reverseWeightMap[ weightMap[i] ] = i;
+			for ( var i in fontMap ) reverseFontMap[ fontMap[ i ] ] = i;
+			for ( var i in weightMap ) reverseWeightMap[ weightMap[ i ] ] = i;
 
 			var targetRotation = 0;
 			var targetRotationOnMouseDown = 0;
@@ -110,7 +109,6 @@
 			var mouseXOnMouseDown = 0;
 
 			var windowHalfX = window.innerWidth / 2;
-			var windowHalfY = window.innerHeight / 2;
 
 			var fontIndex = 1;
 
@@ -161,11 +159,11 @@
 
 				if ( hash.length !== 0 ) {
 
-					var colorhash  = hash.substring( 0, 6 );
-					var fonthash   = hash.substring( 6, 7 );
+					var colorhash = hash.substring( 0, 6 );
+					var fonthash = hash.substring( 6, 7 );
 					var weighthash = hash.substring( 7, 8 );
-					var bevelhash  = hash.substring( 8, 9 );
-					var texthash   = hash.substring( 10 );
+					var bevelhash = hash.substring( 8, 9 );
+					var texthash = hash.substring( 10 );
 
 					hex = colorhash;
 					pointLight.color.setHex( parseInt( colorhash, 16 ) );
@@ -226,7 +224,7 @@
 				document.addEventListener( 'keypress', onDocumentKeyPress, false );
 				document.addEventListener( 'keydown', onDocumentKeyDown, false );
 
-				document.getElementById( "color" ).addEventListener( 'click', function() {
+				document.getElementById( "color" ).addEventListener( 'click', function () {
 
 					pointLight.color.setHSL( Math.random(), 1, 0.5 );
 					hex = decimalToHex( pointLight.color.getHex() );
@@ -235,7 +233,7 @@
 
 				}, false );
 
-				document.getElementById( "font" ).addEventListener( 'click', function() {
+				document.getElementById( "font" ).addEventListener( 'click', function () {
 
 					fontIndex ++;
 
@@ -246,7 +244,7 @@
 				}, false );
 
 
-				document.getElementById( "weight" ).addEventListener( 'click', function() {
+				document.getElementById( "weight" ).addEventListener( 'click', function () {
 
 					if ( fontWeight === "bold" ) {
 
@@ -262,9 +260,9 @@
 
 				}, false );
 
-				document.getElementById( "bevel" ).addEventListener( 'click', function() {
+				document.getElementById( "bevel" ).addEventListener( 'click', function () {
 
-					bevelEnabled = !bevelEnabled;
+					bevelEnabled = ! bevelEnabled;
 
 					refreshText();
 
@@ -279,7 +277,6 @@
 			function onWindowResize() {
 
 				windowHalfX = window.innerWidth / 2;
-				windowHalfY = window.innerHeight / 2;
 
 				camera.aspect = window.innerWidth / window.innerHeight;
 				camera.updateProjectionMatrix();
@@ -379,7 +376,7 @@
 					bevelSize: bevelSize,
 					bevelEnabled: bevelEnabled
 
-				});
+				} );
 
 				textGeo.computeBoundingBox();
 				textGeo.computeVertexNormals();
@@ -426,7 +423,7 @@
 
 				}
 
-				var centerOffset = -0.5 * ( textGeo.boundingBox.max.x - textGeo.boundingBox.min.x );
+				var centerOffset = - 0.5 * ( textGeo.boundingBox.max.x - textGeo.boundingBox.min.x );
 
 				textGeo = new THREE.BufferGeometry().fromGeometry( textGeo );
 
@@ -446,7 +443,7 @@
 					textMesh2 = new THREE.Mesh( textGeo, materials );
 
 					textMesh2.position.x = centerOffset;
-					textMesh2.position.y = -hover;
+					textMesh2.position.y = - hover;
 					textMesh2.position.z = height;
 
 					textMesh2.rotation.x = Math.PI;
@@ -465,7 +462,7 @@
 				group.remove( textMesh1 );
 				if ( mirror ) group.remove( textMesh2 );
 
-				if ( !text ) return;
+				if ( ! text ) return;
 
 				createText();
 
@@ -492,7 +489,7 @@
 
 			}
 
-			function onDocumentMouseUp( event ) {
+			function onDocumentMouseUp() {
 
 				document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
 				document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
@@ -500,7 +497,7 @@
 
 			}
 
-			function onDocumentMouseOut( event ) {
+			function onDocumentMouseOut() {
 
 				document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
 				document.removeEventListener( 'mouseup', onDocumentMouseUp, false );

examples/webgl_gpgpu_birds.html

@@ -329,7 +329,7 @@
 			}
 
 			var hash = document.location.hash.substr( 1 );
-			if (hash) hash = parseInt(hash, 0);
+			if ( hash ) hash = parseInt( hash, 0 );
 
 			/* TEXTURE WIDTH FOR SIMULATION */
 			var WIDTH = hash || 32;
@@ -360,26 +360,30 @@
 				var v = 0;
 
 				function verts_push() {
-					for (var i=0; i < arguments.length; i++) {
-						vertices.array[v++] = arguments[i];
-					}
-				}
+
+					for ( var i = 0; i < arguments.length; i ++ ) {
+
+						vertices.array[ v ++ ] = arguments[ i ];
+
+		}
+
+	}
 
 				var wingsSpan = 20;
 
-				for (var f = 0; f<BIRDS; f++ ) {
+				for ( var f = 0; f < BIRDS; f ++ ) {
 
 					// Body
 					verts_push(
-						0, -0, -20,
-						0, 4, -20,
+						0, - 0, - 20,
+						0, 4, - 20,
 						0, 0, 30
 					);
 
 					// Left Wing
 					verts_push(
-						0, 0, -15,
-						-wingsSpan, 0, 0,
+						0, 0, - 15,
+						- wingsSpan, 0, 0,
 						0, 0, 15
 					);
 
@@ -387,30 +391,30 @@
 					verts_push(
 						0, 0, 15,
 						wingsSpan, 0, 0,
-						0, 0, -15
+						0, 0, - 15
 					);
 
 				}
 
-				for( var v = 0; v < triangles * 3; v++ ) {
+				for ( var v = 0; v < triangles * 3; v ++ ) {
 
-					var i = ~~(v / 3);
-					var x = (i % WIDTH) / WIDTH;
-					var y = ~~(i / WIDTH) / WIDTH;
+					var i = ~ ~ ( v / 3 );
+					var x = ( i % WIDTH ) / WIDTH;
+					var y = ~ ~ ( i / WIDTH ) / WIDTH;
 
 					var c = new THREE.Color(
 						0x444444 +
-						~~(v / 9) / BIRDS * 0x666666
+						~ ~ ( v / 9 ) / BIRDS * 0x666666
 					);
 
 					birdColors.array[ v * 3 + 0 ] = c.r;
 					birdColors.array[ v * 3 + 1 ] = c.g;
 					birdColors.array[ v * 3 + 2 ] = c.b;
 
-					references.array[ v * 2     ] = x;
+					references.array[ v * 2 ] = x;
 					references.array[ v * 2 + 1 ] = y;
 
-					birdVertex.array[ v         ] = v % 9;
+					birdVertex.array[ v ] = v % 9;
 
 				}
 
@@ -422,7 +426,7 @@
 
 
 			var container, stats;
-			var camera, scene, renderer, geometry, i, h, color;
+			var camera, scene, renderer, i;
 			var mouseX = 0, mouseY = 0;
 
 			var windowHalfX = window.innerWidth / 2;
@@ -430,21 +434,25 @@
 
 			var BOUNDS = 800, BOUNDS_HALF = BOUNDS / 2;
 
-			document.getElementById('birds').innerText = BIRDS;
+			document.getElementById( 'birds' ).innerText = BIRDS;
+
+			function change( n ) {
 
-			function change(n) {
 				location.hash = n;
 				location.reload();
 				return false;
-			}
+
+}
 
 
 			var options = '';
-			for (i=1; i<7; i++) {
-				var j = Math.pow(2, i);
-				options += '<a href="#" onclick="return change(' + j + ')">' + (j * j) + '</a> ';
-			}
-			document.getElementById('options').innerHTML = options;
+			for ( i = 1; i < 7; i ++ ) {
+
+				var j = Math.pow( 2, i );
+				options += '<a href="#" onclick="return change(' + j + ')">' + ( j * j ) + '</a> ';
+
+}
+			document.getElementById( 'options' ).innerHTML = options;
 
 			var last = performance.now();
 
@@ -500,7 +508,7 @@
 					freedom: 0.75
 				};
 
-				var valuesChanger = function() {
+				var valuesChanger = function () {
 
 					velocityUniforms.seperationDistance.value = effectController.seperation;
 					velocityUniforms.alignmentDistance.value = effectController.alignment;
@@ -558,8 +566,10 @@
 
 				var error = gpuCompute.init();
 				if ( error !== null ) {
+
 				    console.error( error );
-				}
+
+	}
 
 			}
 
@@ -578,19 +588,19 @@
 
 				// ShaderMaterial
 				var material = new THREE.ShaderMaterial( {
-					uniforms:       birdUniforms,
-					vertexShader:   document.getElementById( 'birdVS' ).textContent,
+					uniforms: birdUniforms,
+					vertexShader: document.getElementById( 'birdVS' ).textContent,
 					fragmentShader: document.getElementById( 'birdFS' ).textContent,
 					side: THREE.DoubleSide
 
-				});
+				} );
 
 				var birdMesh = new THREE.Mesh( geometry, material );
 				birdMesh.rotation.y = Math.PI / 2;
 				birdMesh.matrixAutoUpdate = false;
 				birdMesh.updateMatrix();
 
-				scene.add(birdMesh);
+				scene.add( birdMesh );
 
 			}
 
@@ -692,9 +702,9 @@
 			function render() {
 
 				var now = performance.now();
-				var delta = (now - last) / 1000;
+				var delta = ( now - last ) / 1000;
 
-				if (delta > 1) delta = 1; // safety cap on large deltas
+				if ( delta > 1 ) delta = 1; // safety cap on large deltas
 				last = now;
 
 				positionUniforms.time.value = now;

examples/webgl_gpgpu_protoplanet.html

@@ -284,7 +284,7 @@
 			var WIDTH = hash || ( ( isIE || isEdge ) ? 4 : 64 );
 
 			var container, stats;
-			var camera, scene, renderer, geometry, controls;
+			var camera, scene, renderer, geometry;
 
 			var PARTICLES = WIDTH * WIDTH;
 
@@ -298,10 +298,9 @@
 
 			}
 
-
 			var options = '';
 
-			for ( var i = 1; i < 8; i++ ) {
+			for ( var i = 1; i < 8; i ++ ) {
 
 				var j = Math.pow( 2, i );
 				options += '<a href="#" onclick="return change(' + j + ')">' + ( j * j ) + '</a> ';
@@ -319,7 +318,6 @@
 			var gpuCompute;
 			var velocityVariable;
 			var positionVariable;
-			var positionUniforms;
 			var velocityUniforms;
 			var particleUniforms;
 			var effectController;
@@ -343,7 +341,7 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 
-				controls = new THREE.OrbitControls( camera, renderer.domElement );
+				var controls = new THREE.OrbitControls( camera, renderer.domElement );
 
 				effectController = {
 					// Can be changed dynamically
@@ -390,7 +388,6 @@
 				gpuCompute.setVariableDependencies( velocityVariable, [ positionVariable, velocityVariable ] );
 				gpuCompute.setVariableDependencies( positionVariable, [ positionVariable, velocityVariable ] );
 
-				positionUniforms = positionVariable.material.uniforms;
 				velocityUniforms = velocityVariable.material.uniforms;
 
 				velocityUniforms.gravityConstant = { value: 0.0 };
@@ -427,23 +424,23 @@
 				var positions = new Float32Array( PARTICLES * 3 );
 				var p = 0;
 
-				for ( var i = 0; i < PARTICLES; i++ ) {
+				for ( var i = 0; i < PARTICLES; i ++ ) {
 
-					positions[ p++ ] = ( Math.random() * 2 - 1 ) * effectController.radius;
-					positions[ p++ ] = 0; //( Math.random() * 2 - 1 ) * effectController.radius;
-					positions[ p++ ] = ( Math.random() * 2 - 1 ) * effectController.radius;
+					positions[ p ++ ] = ( Math.random() * 2 - 1 ) * effectController.radius;
+					positions[ p ++ ] = 0; //( Math.random() * 2 - 1 ) * effectController.radius;
+					positions[ p ++ ] = ( Math.random() * 2 - 1 ) * effectController.radius;
 
 				}
 
 				var uvs = new Float32Array( PARTICLES * 2 );
 				p = 0;
 
-				for ( var j = 0; j < WIDTH; j++ ) {
+				for ( var j = 0; j < WIDTH; j ++ ) {
 
-					for ( var i = 0; i < WIDTH; i++ ) {
+					for ( var i = 0; i < WIDTH; i ++ ) {
 
-						uvs[ p++ ] = i / ( WIDTH - 1 );
-						uvs[ p++ ] = j / ( WIDTH - 1 );
+						uvs[ p ++ ] = i / ( WIDTH - 1 );
+						uvs[ p ++ ] = j / ( WIDTH - 1 );
 
 					}
 
@@ -461,8 +458,8 @@
 
 				// ShaderMaterial
 				var material = new THREE.ShaderMaterial( {
-					uniforms:       particleUniforms,
-					vertexShader:   document.getElementById( 'particleVertexShader' ).textContent,
+					uniforms: particleUniforms,
+					vertexShader: document.getElementById( 'particleVertexShader' ).textContent,
 					fragmentShader: document.getElementById( 'particleFragmentShader' ).textContent
 				} );
 
@@ -573,7 +570,11 @@
 				folder2.add( effectController, "randVelocity", 0.0, 50.0, 0.1 );
 
 				var buttonRestart = {
-					restartSimulation: function() { restartSimulation(); }
+					restartSimulation: function () {
+
+						restartSimulation();
+
+					}
 				};
 
 				folder2.add( buttonRestart, 'restartSimulation' );

examples/webgl_gpgpu_water.html

@@ -46,7 +46,6 @@
 
 		<script src="js/GPUComputationRenderer.js"></script>
 
-
 		<!-- This is the 'compute shader' for the water heightmap: -->
 		<script id="heightmapFragmentShader" type="x-shader/x-fragment">
 
@@ -212,14 +211,12 @@
 
 			// Texture width for simulation
 			var WIDTH = hash || 128;
-			var NUM_TEXELS = WIDTH * WIDTH;
 
 			// Water size in system units
 			var BOUNDS = 512;
-			var BOUNDS_HALF = BOUNDS * 0.5;
 
 			var container, stats;
-			var camera, scene, renderer, controls;
+			var camera, scene, renderer;
 			var mouseMoved = false;
 			var mouseCoords = new THREE.Vector2();
 			var raycaster = new THREE.Raycaster();
@@ -233,24 +230,24 @@
 
 			var simplex = new SimplexNoise();
 
-			var windowHalfX = window.innerWidth / 2;
-			var windowHalfY = window.innerHeight / 2;
-
 			document.getElementById( 'waterSize' ).innerText = WIDTH + ' x ' + WIDTH;
 
-			function change(n) {
+			function change( n ) {
+
 				location.hash = n;
 				location.reload();
 				return false;
-			}
 
+			}
 
 			var options = '';
-			for ( var i = 4; i < 10; i++ ) {
+			for ( var i = 4; i < 10; i ++ ) {
+
 				var j = Math.pow( 2, i );
 				options += '<a href="#" onclick="return change(' + j + ')">' + j + 'x' + j + '</a> ';
+
 			}
-			document.getElementById('options').innerHTML = options;
+			document.getElementById( 'options' ).innerHTML = options;
 
 			init();
 			animate();
@@ -270,7 +267,7 @@
 				scene.add( sun );
 
 				var sun2 = new THREE.DirectionalLight( 0x40A040, 0.6 );
-				sun2.position.set( -100, 350, -200 );
+				sun2.position.set( - 100, 350, - 200 );
 				scene.add( sun2 );
 
 				renderer = new THREE.WebGLRenderer();
@@ -278,8 +275,7 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 
-				controls = new THREE.OrbitControls( camera, renderer.domElement );
-
+				var controls = new THREE.OrbitControls( camera, renderer.domElement );
 
 				stats = new Stats();
 				container.appendChild( stats.dom );
@@ -288,7 +284,7 @@
 				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 
-				document.addEventListener( 'keydown', function( event ) {
+				document.addEventListener( 'keydown', function ( event ) {
 
 					// W Pressed: Toggle wireframe
 					if ( event.keyCode === 87 ) {
@@ -298,11 +294,10 @@
 
 					}
 
-				} , false );
+				}, false );
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
-
 				var gui = new dat.GUI();
 
 				var effectController = {
@@ -310,7 +305,7 @@
 					viscosity: 0.03
 				};
 
-				var valuesChanger = function() {
+				var valuesChanger = function () {
 
 					heightmapVariable.material.uniforms.mouseSize.value = effectController.mouseSize;
 					heightmapVariable.material.uniforms.viscosityConstant.value = effectController.viscosity;
@@ -320,25 +315,25 @@
 				gui.add( effectController, "mouseSize", 1.0, 100.0, 1.0 ).onChange( valuesChanger );
 				gui.add( effectController, "viscosity", 0.0, 0.1, 0.001 ).onChange( valuesChanger );
 				var buttonSmooth = {
-				    smoothWater: function() {
-					smoothWater();
-				    }
+				  smoothWater: function () {
+
+						smoothWater();
+
+					}
 				};
 				gui.add( buttonSmooth, 'smoothWater' );
 
-
 				initWater();
 
 				valuesChanger();
 
 			}
 
-
 			function initWater() {
 
 				var materialColor = 0x0040C0;
 
-				var geometry = new THREE.PlaneBufferGeometry( BOUNDS, BOUNDS, WIDTH - 1, WIDTH -1 );
+				var geometry = new THREE.PlaneBufferGeometry( BOUNDS, BOUNDS, WIDTH - 1, WIDTH - 1 );
 
 				// material: make a ShaderMaterial clone of MeshPhongMaterial, with customized vertex shader
 				var material = new THREE.ShaderMaterial( {
@@ -407,7 +402,9 @@
 
 				var error = gpuCompute.init();
 				if ( error !== null ) {
+
 				    console.error( error );
+
 				}
 
 				// Create compute shader to smooth the water surface and velocity
@@ -419,34 +416,41 @@
 
 				var waterMaxHeight = 10;
 
-				function noise( x, y, z ) {
+				function noise( x, y ) {
+
 					var multR = waterMaxHeight;
 					var mult = 0.025;
 					var r = 0;
-					for ( var i = 0; i < 15; i++ ) {
+					for ( var i = 0; i < 15; i ++ ) {
+
 						r += multR * simplex.noise( x * mult, y * mult );
 						multR *= 0.53 + 0.025 * i;
 						mult *= 1.25;
+
 					}
 					return r;
+
 				}
 
 				var pixels = texture.image.data;
 
 				var p = 0;
-				for ( var j = 0; j < WIDTH; j++ ) {
-					for ( var i = 0; i < WIDTH; i++ ) {
+				for ( var j = 0; j < WIDTH; j ++ ) {
+
+					for ( var i = 0; i < WIDTH; i ++ ) {
 
 						var x = i * 128 / WIDTH;
 						var y = j * 128 / WIDTH;
 
-					        pixels[ p + 0 ] = noise( x, y, 123.4 );
+					  pixels[ p + 0 ] = noise( x, y );
 						pixels[ p + 1 ] = 0;
 						pixels[ p + 2 ] = 0;
 						pixels[ p + 3 ] = 1;
 
 						p += 4;
+
 					}
+
 				}
 
 			}
@@ -456,7 +460,7 @@
 				var currentRenderTarget = gpuCompute.getCurrentRenderTarget( heightmapVariable );
 				var alternateRenderTarget = gpuCompute.getAlternateRenderTarget( heightmapVariable );
 
-				for ( var i = 0; i < 10; i++ ) {
+				for ( var i = 0; i < 10; i ++ ) {
 
 					smoothShader.uniforms.texture.value = currentRenderTarget.texture;
 					gpuCompute.doRenderTarget( smoothShader, alternateRenderTarget );
@@ -465,15 +469,11 @@
 					gpuCompute.doRenderTarget( smoothShader, currentRenderTarget );
 
 				}
-				
-			}
 
+			}
 
 			function onWindowResize() {
 
-				windowHalfX = window.innerWidth / 2;
-				windowHalfY = window.innerHeight / 2;
-
 				camera.aspect = window.innerWidth / window.innerHeight;
 				camera.updateProjectionMatrix();
 
@@ -502,7 +502,6 @@
 
 					setMouseCoords( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
 
-
 				}
 
 			}
@@ -515,7 +514,6 @@
 
 					setMouseCoords( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
 
-
 				}
 
 			}
@@ -540,18 +538,22 @@
 					var intersects = raycaster.intersectObject( meshRay );
 
 					if ( intersects.length > 0 ) {
+
 					    var point = intersects[ 0 ].point;
 					    uniforms.mousePos.value.set( point.x, point.z );
 
-					}
-					else {
+					} else {
+
 					    uniforms.mousePos.value.set( 10000, 10000 );
+
 					}
 
 					mouseMoved = false;
-				}
-				else {
+
+				} else {
+
 					uniforms.mousePos.value.set( 10000, 10000 );
+
 				}
 
 				// Do the gpu computation

examples/webgl_gpu_particle_system.html

@@ -108,7 +108,7 @@
 			gui.add( options, "turbulence", 0, 1 );
 
 			gui.add( spawnerOptions, "spawnRate", 10, 30000 );
-			gui.add( spawnerOptions, "timeScale", -1, 1 );
+			gui.add( spawnerOptions, "timeScale", - 1, 1 );
 
 			//
 
@@ -161,7 +161,7 @@
 				options.position.y = Math.sin( tick * spawnerOptions.verticalSpeed ) * 10;
 				options.position.z = Math.sin( tick * spawnerOptions.horizontalSpeed + spawnerOptions.verticalSpeed ) * 5;
 
-				for ( var x = 0; x < spawnerOptions.spawnRate * delta; x++ ) {
+				for ( var x = 0; x < spawnerOptions.spawnRate * delta; x ++ ) {
 
 					// Yep, that's really it.	Spawning particles is super cheap, and once you spawn them, the rest of
 					// their lifecycle is handled entirely on the GPU, driven by a time uniform updated below

examples/webgl_hdr.html

@@ -137,10 +137,10 @@
 				materialHDR = new THREE.ShaderMaterial( {
 
 					uniforms: {
-						tDiffuse:  { value: texture },
-						exposure:  { value: 0.125 },
+						tDiffuse: { value: texture },
+						exposure: { value: 0.125 },
 						brightMax: { value: 0.5 }
-						},
+					},
 					vertexShader: getText( 'vs-hdr' ),
 					fragmentShader: getText( 'fs-hdr' )
 
@@ -149,7 +149,7 @@
 				var plane = new THREE.PlaneBufferGeometry( 512, 768 );
 
 				quad = new THREE.Mesh( plane, materialHDR );
-				quad.position.z = -100;
+				quad.position.z = - 100;
 				scene.add( quad );
 
 				renderer = new THREE.WebGLRenderer();
@@ -208,7 +208,7 @@
 
 				if ( materialHDR.uniforms.exposure.value > 5 || materialHDR.uniforms.exposure.value <= 0 ) {
 
-					sign *= -1;
+					sign *= - 1;
 
 				}
 

examples/webgl_helpers.html

@@ -67,7 +67,7 @@
 					scene.add( group );
 
 					// To make sure that the matrixWorld is up to date for the boxhelpers
-					group.updateMatrixWorld(true);
+					group.updateMatrixWorld( true );
 
 					group.add( mesh );
 
@@ -90,7 +90,7 @@
 					line.material.depthTest = false;
 					line.material.opacity = 0.25;
 					line.material.transparent = true;
-					line.position.x = -4;
+					line.position.x = - 4;
 					group.add( line );
 					scene.add( new THREE.BoxHelper( line ) );
 

examples/webgl_interactive_buffergeometry.html

@@ -80,7 +80,7 @@
 				scene.add( light1 );
 
 				var light2 = new THREE.DirectionalLight( 0xffffff, 1.5 );
-				light2.position.set( 0, -1, 0 );
+				light2.position.set( 0, - 1, 0 );
 				scene.add( light2 );
 
 				//
@@ -95,8 +95,8 @@
 
 				var color = new THREE.Color();
 
-				var n = 800, n2 = n/2;	// triangles spread in the cube
-				var d = 120, d2 = d/2;	// individual triangle size
+				var n = 800, n2 = n / 2;	// triangles spread in the cube
+				var d = 120, d2 = d / 2;	// individual triangle size
 
 				var pA = new THREE.Vector3();
 				var pB = new THREE.Vector3();
@@ -125,7 +125,7 @@
 					var cy = y + Math.random() * d - d2;
 					var cz = z + Math.random() * d - d2;
 
-					positions[ i ]     = ax;
+					positions[ i ] = ax;
 					positions[ i + 1 ] = ay;
 					positions[ i + 2 ] = az;
 
@@ -153,7 +153,7 @@
 					var ny = cb.y;
 					var nz = cb.z;
 
-					normals[ i ]     = nx;
+					normals[ i ] = nx;
 					normals[ i + 1 ] = ny;
 					normals[ i + 2 ] = nz;
 
@@ -173,7 +173,7 @@
 
 					color.setRGB( vx, vy, vz );
 
-					colors[ i ]     = color.r;
+					colors[ i ] = color.r;
 					colors[ i + 1 ] = color.g;
 					colors[ i + 2 ] = color.b;
 
@@ -194,8 +194,8 @@
 				geometry.computeBoundingSphere();
 
 				var material = new THREE.MeshPhongMaterial( {
-						color: 0xaaaaaa, specular: 0xffffff, shininess: 250,
-						side: THREE.DoubleSide, vertexColors: THREE.VertexColors
+					color: 0xaaaaaa, specular: 0xffffff, shininess: 250,
+					side: THREE.DoubleSide, vertexColors: THREE.VertexColors
 				} );
 
 				mesh = new THREE.Mesh( geometry, material );

examples/webgl_interactive_cubes.html

@@ -79,7 +79,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				container.appendChild(renderer.domElement);
+				container.appendChild( renderer.domElement );
 
 				stats = new Stats();
 				container.appendChild( stats.dom );

examples/webgl_interactive_cubes_gpu.html

@@ -164,7 +164,7 @@
 				highlightBox = new THREE.Mesh(
 					new THREE.BoxBufferGeometry(),
 					new THREE.MeshLambertMaterial( { color: 0xffff00 }
-				) );
+					) );
 				scene.add( highlightBox );
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
@@ -216,11 +216,11 @@
 				var id = ( pixelBuffer[ 0 ] << 16 ) | ( pixelBuffer[ 1 ] << 8 ) | ( pixelBuffer[ 2 ] );
 				var data = pickingData[ id ];
 
-				if ( data) {
+				if ( data ) {
 
 					//move our highlightBox so that it surrounds the picked object
 
-					if ( data.position && data.rotation && data.scale ){
+					if ( data.position && data.rotation && data.scale ) {
 
 						highlightBox.position.copy( data.position );
 						highlightBox.rotation.copy( data.rotation );

examples/webgl_interactive_cubes_ortho.html

@@ -81,7 +81,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				container.appendChild(renderer.domElement);
+				container.appendChild( renderer.domElement );
 
 				stats = new Stats();
 				container.appendChild( stats.dom );
@@ -98,9 +98,9 @@
 
 				var aspect = window.innerWidth / window.innerHeight;
 
-				camera.left   = - frustumSize * aspect / 2;
-				camera.right  =   frustumSize * aspect / 2;
-				camera.top    =   frustumSize / 2;
+				camera.left = - frustumSize * aspect / 2;
+				camera.right = frustumSize * aspect / 2;
+				camera.top = frustumSize / 2;
 				camera.bottom = - frustumSize / 2;
 
 				camera.updateProjectionMatrix();

examples/webgl_interactive_draggablecubes.html

@@ -102,8 +102,16 @@
 				container.appendChild( renderer.domElement );
 
 				var dragControls = new THREE.DragControls( objects, camera, renderer.domElement );
-				dragControls.addEventListener( 'dragstart', function ( event ) { controls.enabled = false; } );
-				dragControls.addEventListener( 'dragend', function ( event ) { controls.enabled = true; } );
+				dragControls.addEventListener( 'dragstart', function () {
+
+					controls.enabled = false;
+
+				} );
+				dragControls.addEventListener( 'dragend', function () {
+
+					controls.enabled = true;
+
+				} );
 
 				var info = document.createElement( 'div' );
 				info.style.position = 'absolute';

examples/webgl_interactive_instances_gpu.html

@@ -377,7 +377,7 @@
 
 			instanceCount = parseInt( instanceCountElm.value );
 
-			instanceCountElm.addEventListener( "change", function() {
+			instanceCountElm.addEventListener( "change", function () {
 
 				instanceCount = parseInt( instanceCountElm.value );
 				initMesh();
@@ -390,7 +390,7 @@
 
 			method = methodElm.value;
 
-			methodElm.addEventListener( "change", function() {
+			methodElm.addEventListener( "change", function () {
 
 				method = methodElm.value;
 				initMesh();
@@ -403,7 +403,7 @@
 
 			doAnimate = animateElm.checked;
 
-			animateElm.addEventListener( "click", function() {
+			animateElm.addEventListener( "click", function () {
 
 				doAnimate = animateElm.checked;
 				animate();
@@ -416,7 +416,7 @@
 
 			useOverrideMaterial = overrideElm.checked;
 
-			overrideElm.addEventListener( "click", function() {
+			overrideElm.addEventListener( "click", function () {
 
 				useOverrideMaterial = overrideElm.checked;
 				initMesh();
@@ -427,7 +427,7 @@
 
 			var constructElm = document.getElementById( 'construct' );
 
-			constructElm.addEventListener( "click", function() {
+			constructElm.addEventListener( "click", function () {
 
 				initMesh();
 
@@ -439,13 +439,13 @@
 
 			THREE.Cache.clear();
 
-			materialList.forEach( function( m ) {
+			materialList.forEach( function ( m ) {
 
 				m.dispose();
 
 			} );
 
-			geometryList.forEach( function( g ) {
+			geometryList.forEach( function ( g ) {
 
 				g.dispose();
 
@@ -468,14 +468,14 @@
 
 		}
 
-		var randomizeMatrix = function() {
+		var randomizeMatrix = function () {
 
 			var position = new THREE.Vector3();
 			var rotation = new THREE.Euler();
 			var quaternion = new THREE.Quaternion();
 			var scale = new THREE.Vector3();
 
-			return function( matrix ) {
+			return function ( matrix ) {
 
 				position.x = Math.random() * 40 - 20;
 				position.y = Math.random() * 40 - 20;
@@ -509,7 +509,7 @@
 
 				var start = window.performance.now();
 
-				switch ( method ){
+				switch ( method ) {
 
 					case "merged":
 						makeMerged( geo );
@@ -643,35 +643,41 @@
 
 			var matrix = new THREE.Matrix4();
 
-			function onBeforeRender( renderer, scene, camera, geometry, material, group ){
+			function onBeforeRender( renderer, scene, camera, geometry, material ) {
 
 				var updateList = [];
 				var u = material.uniforms;
 				var d = this.userData;
 
-				if( u.pickingColor ){
+				if ( u.pickingColor ) {
+
 					u.pickingColor.value.setHex( d.pickingColor );
 					updateList.push( "pickingColor" );
+
 				}
 
-				if( u.color ){
+				if ( u.color ) {
+
 					u.color.value.setHex( d.color );
 					updateList.push( "color" );
+
 				}
 
-				if( updateList.length ){
+				if ( updateList.length ) {
 
 					var materialProperties = renderer.properties.get( material );
 
-					if( materialProperties.program ){
+					if ( materialProperties.program ) {
 
 						var gl = renderer.getContext();
 						var p = materialProperties.program;
 						gl.useProgram( p.program );
 						var pu = p.getUniforms();
 
-						updateList.forEach( function( name ){
+						updateList.forEach( function ( name ) {
+
 							pu.setValue( gl, name, u[ name ].value );
+
 						} );
 
 					}
@@ -703,7 +709,7 @@
 					object.userData[ "pickingColor" ] = i + 1;
 					object.onBeforeRender = onBeforeRender;
 
-				}else {
+				} else {
 
 					pickingObject.material = pickingMaterial;
 					pickingObject.userData[ "pickingColor" ] = i + 1;
@@ -780,7 +786,7 @@
 			var colors = new THREE.BufferAttribute(
 				new Float32Array( instanceCount * colCount * 3 ), 3
 			);
-			var randCol = function() {
+			var randCol = function () {
 
 				return Math.random();
 
@@ -887,7 +893,7 @@
 			igeo.addAttribute( 'mcol2', mcol2 );
 			igeo.addAttribute( 'mcol3', mcol3 );
 
-			var randCol = function() {
+			var randCol = function () {
 
 				return Math.random();
 
@@ -1008,7 +1014,7 @@
 
 		}
 
-		function onWindowResize( event ) {
+		function onWindowResize() {
 
 			camera.aspect = window.innerWidth / window.innerHeight;
 			camera.updateProjectionMatrix();
@@ -1045,7 +1051,7 @@
 				renderer.render( scene, camera, pickingRenderTarget );
 				scene.overrideMaterial = null;
 
-			}else {
+			} else {
 
 				renderer.render( pickingScene, camera, pickingRenderTarget );
 

examples/webgl_interactive_lines.html

@@ -27,8 +27,6 @@
 			var mouse = new THREE.Vector2();
 			var radius = 100, theta = 0;
 
-			var currentIntersected;
-
 			init();
 			animate();
 
@@ -128,7 +126,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				container.appendChild(renderer.domElement);
+				container.appendChild( renderer.domElement );
 
 				stats = new Stats();
 				container.appendChild( stats.dom );
@@ -185,19 +183,15 @@
 
 				raycaster.setFromCamera( mouse, camera );
 
-				var intersects = raycaster.intersectObjects( parentTransform.children, true);
+				var intersects = raycaster.intersectObjects( parentTransform.children, true );
 
 				if ( intersects.length > 0 ) {
 
-					currentIntersected = intersects[ 0 ].object;
-
 					sphereInter.visible = true;
 					sphereInter.position.copy( intersects[ 0 ].point );
 
 				} else {
 
-					currentIntersected = undefined;
-
 					sphereInter.visible = false;
 
 				}

examples/webgl_interactive_points.html

@@ -87,7 +87,7 @@
 
 			var renderer, scene, camera, stats;
 
-			var particles, uniforms;
+			var particles;
 
 			var PARTICLE_SIZE = 20;
 
@@ -139,7 +139,7 @@
 				var material = new THREE.ShaderMaterial( {
 
 					uniforms: {
-						color:   { value: new THREE.Color( 0xffffff ) },
+						color: { value: new THREE.Color( 0xffffff ) },
 						texture: { value: new THREE.TextureLoader().load( "textures/sprites/disc.png" ) }
 					},
 					vertexShader: document.getElementById( 'vertexshader' ).textContent,

examples/webgl_interactive_raycasting_points.html

@@ -62,19 +62,19 @@
 			init();
 			animate();
 
-			function generatePointCloudGeometry( color, width, length ){
+			function generatePointCloudGeometry( color, width, length ) {
 
 				var geometry = new THREE.BufferGeometry();
-				var numPoints = width*length;
+				var numPoints = width * length;
 
-				var positions = new Float32Array( numPoints*3 );
-				var colors = new Float32Array( numPoints*3 );
+				var positions = new Float32Array( numPoints * 3 );
+				var colors = new Float32Array( numPoints * 3 );
 
 				var k = 0;
 
-				for( var i = 0; i < width; i++ ) {
+				for ( var i = 0; i < width; i ++ ) {
 
-					for( var j = 0; j < length; j++ ) {
+					for ( var j = 0; j < length; j ++ ) {
 
 						var u = i / width;
 						var v = j / length;
@@ -91,7 +91,7 @@
 						colors[ 3 * k + 1 ] = color.g * intensity;
 						colors[ 3 * k + 2 ] = color.b * intensity;
 
-						k++;
+						k ++;
 
 					}
 
@@ -124,12 +124,12 @@
 
 				var k = 0;
 
-				for( var i = 0; i < width; i++ ) {
+				for ( var i = 0; i < width; i ++ ) {
 
-					for( var j = 0; j < length; j++ ) {
+					for ( var j = 0; j < length; j ++ ) {
 
 						indices[ k ] = k;
-						k++;
+						k ++;
 
 					}
 
@@ -144,7 +144,7 @@
 
 			}
 
-			function generateIndexedWithOffsetPointcloud( color, width, length ){
+			function generateIndexedWithOffsetPointcloud( color, width, length ) {
 
 				var geometry = generatePointCloudGeometry( color, width, length );
 				var numPoints = width * length;
@@ -152,12 +152,12 @@
 
 				var k = 0;
 
-				for( var i = 0; i < width; i++ ){
+				for ( var i = 0; i < width; i ++ ) {
 
-					for( var j = 0; j < length; j++ ) {
+					for ( var j = 0; j < length; j ++ ) {
 
 						indices[ k ] = k;
-						k++;
+						k ++;
 
 					}
 
@@ -181,22 +181,22 @@
 
 				var k = 0;
 
-				for( var i = 0; i < width; i++ ) {
+				for ( var i = 0; i < width; i ++ ) {
 
-					for( var j = 0; j < length; j++ ) {
+					for ( var j = 0; j < length; j ++ ) {
 
 						var u = i / width;
 						var v = j / length;
 						var x = u - 0.5;
-						var y = ( Math.cos( u * Math.PI * 8 ) + Math.sin( v * Math.PI * 8) ) / 20;
+						var y = ( Math.cos( u * Math.PI * 8 ) + Math.sin( v * Math.PI * 8 ) ) / 20;
 						var z = v - 0.5;
-						var v = new THREE.Vector3( x,y,z );
+						var v = new THREE.Vector3( x, y, z );
 						geometry.vertices.push( v );
 
 						var intensity = ( y + 0.1 ) * 7;
 						colors[ k ] = ( color.clone().multiplyScalar( intensity ) );
 
-						k++;
+						k ++;
 
 					}
 
@@ -227,24 +227,24 @@
 
 				//
 
-				var pcBuffer = generatePointcloud( new THREE.Color( 1,0,0 ), width, length );
-				pcBuffer.scale.set( 10,10,10 );
-				pcBuffer.position.set( -5,0,5 );
+				var pcBuffer = generatePointcloud( new THREE.Color( 1, 0, 0 ), width, length );
+				pcBuffer.scale.set( 10, 10, 10 );
+				pcBuffer.position.set( - 5, 0, 5 );
 				scene.add( pcBuffer );
 
-				var pcIndexed = generateIndexedPointcloud( new THREE.Color( 0,1,0 ), width, length );
-				pcIndexed.scale.set( 10,10,10 );
-				pcIndexed.position.set( 5,0,5 );
+				var pcIndexed = generateIndexedPointcloud( new THREE.Color( 0, 1, 0 ), width, length );
+				pcIndexed.scale.set( 10, 10, 10 );
+				pcIndexed.position.set( 5, 0, 5 );
 				scene.add( pcIndexed );
 
-				var pcIndexedOffset = generateIndexedWithOffsetPointcloud( new THREE.Color( 0,1,1 ), width, length );
-				pcIndexedOffset.scale.set( 10,10,10 );
-				pcIndexedOffset.position.set( 5,0,-5 );
+				var pcIndexedOffset = generateIndexedWithOffsetPointcloud( new THREE.Color( 0, 1, 1 ), width, length );
+				pcIndexedOffset.scale.set( 10, 10, 10 );
+				pcIndexedOffset.position.set( 5, 0, - 5 );
 				scene.add( pcIndexedOffset );
 
-				var pcRegular = generateRegularPointcloud( new THREE.Color( 1,0,1 ), width, length );
-				pcRegular.scale.set( 10,10,10 );
-				pcRegular.position.set( -5,0,-5 );
+				var pcRegular = generateRegularPointcloud( new THREE.Color( 1, 0, 1 ), width, length );
+				pcRegular.scale.set( 10, 10, 10 );
+				pcRegular.position.set( - 5, 0, - 5 );
 				scene.add( pcRegular );
 
 				pointclouds = [ pcBuffer, pcIndexed, pcIndexedOffset, pcRegular ];
@@ -254,7 +254,7 @@
 				var sphereGeometry = new THREE.SphereBufferGeometry( 0.1, 32, 32 );
 				var sphereMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
 
-				for ( var i = 0; i < 40; i++ ) {
+				for ( var i = 0; i < 40; i ++ ) {
 
 					var sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
 					scene.add( sphere );
@@ -325,7 +325,7 @@
 				var intersections = raycaster.intersectObjects( pointclouds );
 				intersection = ( intersections.length ) > 0 ? intersections[ 0 ] : null;
 
-				if ( toggle > 0.02 && intersection !== null) {
+				if ( toggle > 0.02 && intersection !== null ) {
 
 					spheres[ spheresIndex ].position.copy( intersection.point );
 					spheres[ spheresIndex ].scale.set( 1, 1, 1 );
@@ -335,7 +335,7 @@
 
 				}
 
-				for ( var i = 0; i < spheres.length; i++ ) {
+				for ( var i = 0; i < spheres.length; i ++ ) {
 
 					var sphere = spheres[ i ];
 					sphere.scale.multiplyScalar( 0.98 );

examples/webgl_interactive_voxelpainter.html

@@ -181,7 +181,7 @@
 
 						}
 
-					// create cube
+						// create cube
 
 					} else {
 
@@ -202,7 +202,7 @@
 
 			function onDocumentKeyDown( event ) {
 
-				switch( event.keyCode ) {
+				switch ( event.keyCode ) {
 
 					case 16: isShiftDown = true; break;
 

examples/webgl_kinect.html

@@ -25,9 +25,7 @@
 			}
 
 			a {
-
 				color: #0040ff;
-
 			}
 		</style>
 	</head>
@@ -98,8 +96,8 @@
 
 			var container;
 
-			var scene, camera, light, renderer;
-			var geometry, cube, mesh, material;
+			var scene, camera, renderer;
+			var geometry, mesh, material;
 			var mouse, center;
 			var stats;
 
@@ -137,7 +135,7 @@
 				center.z = - 1000;
 
 				video = document.createElement( 'video' );
-				video.addEventListener( 'loadedmetadata', function ( event ) {
+				video.addEventListener( 'loadedmetadata', function () {
 
 					texture = new THREE.VideoTexture( video );
 					texture.minFilter = THREE.NearestFilter;
@@ -163,14 +161,14 @@
 
 						uniforms: {
 
-							"map":          { value: texture },
-							"width":        { value: width },
-							"height":       { value: height },
+							"map": { value: texture },
+							"width": { value: width },
+							"height": { value: height },
 							"nearClipping": { value: nearClipping },
-							"farClipping":  { value: farClipping },
+							"farClipping": { value: farClipping },
 
-							"pointSize":    { value: 2 },
-							"zOffset":      { value: 1000 }
+							"pointSize": { value: 2 },
+							"zOffset": { value: 1000 }
 
 						},
 						vertexShader: document.getElementById( 'vs' ).textContent,

examples/webgl_layers.html

@@ -17,7 +17,7 @@
 				top: 10px;
 				width: 100%;
 				text-align: center;
-				z-index: 0; // to not conflict with dat.gui
+				z-index: 0; /* to not conflict with dat.gui */
 				display:block;
 			}
 		</style>
@@ -92,12 +92,10 @@
 
 				}
 
-				raycaster = new THREE.Raycaster();
-
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				container.appendChild(renderer.domElement);
+				container.appendChild( renderer.domElement );
 
 				stats = new Stats();
 				container.appendChild( stats.dom );
@@ -107,9 +105,21 @@
 				//
 				// Init gui
 				var gui = new dat.GUI();
-				gui.add( layers, 'red' ).onChange( function () { camera.layers.toggle( 0 ); } );
-				gui.add( layers, 'green' ).onChange( function () { camera.layers.toggle( 1 ); } );
-				gui.add( layers, 'blue' ).onChange( function () { camera.layers.toggle( 2 ); } );
+				gui.add( layers, 'red' ).onChange( function () {
+
+					camera.layers.toggle( 0 );
+
+				} );
+				gui.add( layers, 'green' ).onChange( function () {
+
+					camera.layers.toggle( 1 );
+
+				} );
+				gui.add( layers, 'blue' ).onChange( function () {
+
+					camera.layers.toggle( 2 );
+
+				} );
 
 				window.addEventListener( 'resize', onWindowResize, false );
 

examples/webgl_lensflares.html

@@ -113,7 +113,7 @@
 				// lights
 
 				var dirLight = new THREE.DirectionalLight( 0xffffff, 0.05 );
-				dirLight.position.set( 0, -1, 0 ).normalize();
+				dirLight.position.set( 0, - 1, 0 ).normalize();
 				dirLight.color.setHSL( 0.1, 0.7, 0.5 );
 				scene.add( dirLight );
 
@@ -124,7 +124,7 @@
 				var textureFlare3 = textureLoader.load( 'textures/lensflare/lensflare3.png' );
 
 				addLight( 0.55, 0.9, 0.5, 5000, 0, - 1000 );
-				addLight( 0.08, 0.8, 0.5,    0, 0, - 1000 );
+				addLight( 0.08, 0.8, 0.5, 0, 0, - 1000 );
 				addLight( 0.995, 0.5, 0.9, 5000, 5000, - 1000 );
 
 				function addLight( h, s, l, x, y, z ) {
@@ -169,7 +169,7 @@
 
 			//
 
-			function onWindowResize( event ) {
+			function onWindowResize() {
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 

examples/webgl_lights_hemisphere.html

@@ -127,7 +127,7 @@
 
 				dirLight = new THREE.DirectionalLight( 0xffffff, 1 );
 				dirLight.color.setHSL( 0.1, 1, 0.95 );
-				dirLight.position.set( -1, 1.75, 1 );
+				dirLight.position.set( - 1, 1.75, 1 );
 				dirLight.position.multiplyScalar( 30 );
 				scene.add( dirLight );
 
@@ -138,13 +138,13 @@
 
 				var d = 50;
 
-				dirLight.shadow.camera.left = -d;
+				dirLight.shadow.camera.left = - d;
 				dirLight.shadow.camera.right = d;
 				dirLight.shadow.camera.top = d;
-				dirLight.shadow.camera.bottom = -d;
+				dirLight.shadow.camera.bottom = - d;
 
 				dirLight.shadow.camera.far = 3500;
-				dirLight.shadow.bias = -0.0001;
+				dirLight.shadow.bias = - 0.0001;
 
 				dirLightHeper = new THREE.DirectionalLightHelper( dirLight, 10 );
 				scene.add( dirLightHeper );
@@ -156,8 +156,8 @@
 				groundMat.color.setHSL( 0.095, 1, 0.75 );
 
 				var ground = new THREE.Mesh( groundGeo, groundMat );
-				ground.rotation.x = -Math.PI/2;
-				ground.position.y = -33;
+				ground.rotation.x = - Math.PI / 2;
+				ground.position.y = - 33;
 				scene.add( ground );
 
 				ground.receiveShadow = true;
@@ -167,10 +167,10 @@
 				var vertexShader = document.getElementById( 'vertexShader' ).textContent;
 				var fragmentShader = document.getElementById( 'fragmentShader' ).textContent;
 				var uniforms = {
-					topColor:    { value: new THREE.Color( 0x0077ff ) },
+					topColor: { value: new THREE.Color( 0x0077ff ) },
 					bottomColor: { value: new THREE.Color( 0xffffff ) },
-					offset:      { value: 33 },
-					exponent:    { value: 0.6 }
+					offset: { value: 33 },
+					exponent: { value: 0.6 }
 				};
 				uniforms.topColor.value.copy( hemiLight.color );
 
@@ -186,14 +186,14 @@
 
 				var loader = new THREE.GLTFLoader();
 
-				loader.load( 'models/gltf/Flamingo.glb', function( gltf ) {
+				loader.load( 'models/gltf/Flamingo.glb', function ( gltf ) {
 
 					var mesh = gltf.scene.children[ 0 ];
 
 					var s = 0.35;
 					mesh.scale.set( s, s, s );
 					mesh.position.y = 15;
-					mesh.rotation.y = -1;
+					mesh.rotation.y = - 1;
 
 					mesh.castShadow = true;
 					mesh.receiveShadow = true;
@@ -239,21 +239,21 @@
 
 			}
 
-			function onKeyDown ( event ) {
+			function onKeyDown( event ) {
 
 				switch ( event.keyCode ) {
 
 					case 72: // h
 
-					hemiLight.visible = !hemiLight.visible;
-					hemiLightHelper.visible = !hemiLightHelper.visible;
-					break;
+						hemiLight.visible = ! hemiLight.visible;
+						hemiLightHelper.visible = ! hemiLightHelper.visible;
+						break;
 
 					case 68: // d
 
-					dirLight.visible = !dirLight.visible;
-					dirLightHeper.visible = !dirLightHeper.visible;
-					break;
+						dirLight.visible = ! dirLight.visible;
+						dirLightHeper.visible = ! dirLightHeper.visible;
+						break;
 
 				}
 

examples/webgl_lights_physical.html

@@ -55,8 +55,7 @@
 			}
 
 			var camera, scene, renderer,
-			bulbLight, bulbMat, hemiLight,
-			object, loader, stats;
+				bulbLight, bulbMat, hemiLight, stats;
 			var ballMat, cubeMat, floorMat;
 
 
@@ -91,12 +90,9 @@
 				shadows: true,
 				exposure: 0.68,
 				bulbPower: Object.keys( bulbLuminousPowers )[ 4 ],
-				hemiIrradiance: Object.keys( hemiLuminousIrradiances )[0]
+				hemiIrradiance: Object.keys( hemiLuminousIrradiances )[ 0 ]
 			};
 
-
-			var clock = new THREE.Clock();
-
 			init();
 			animate();
 
@@ -109,7 +105,7 @@
 
 
 				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 100 );
-				camera.position.x = -4;
+				camera.position.x = - 4;
 				camera.position.z = 4;
 				camera.position.y = 2;
 
@@ -122,7 +118,7 @@
 					emissive: 0xffffee,
 					emissiveIntensity: 1,
 					color: 0x000000
-				});
+				} );
 				bulbLight.add( new THREE.Mesh( bulbGeometry, bulbMat ) );
 				bulbLight.position.set( 0, 2, 0 );
 				bulbLight.castShadow = true;
@@ -136,76 +132,90 @@
 					color: 0xffffff,
 					metalness: 0.2,
 					bumpScale: 0.0005
-				});
+				} );
 				var textureLoader = new THREE.TextureLoader();
-				textureLoader.load( "textures/hardwood2_diffuse.jpg", function( map ) {
+				textureLoader.load( "textures/hardwood2_diffuse.jpg", function ( map ) {
+
 					map.wrapS = THREE.RepeatWrapping;
 					map.wrapT = THREE.RepeatWrapping;
 					map.anisotropy = 4;
 					map.repeat.set( 10, 24 );
 					floorMat.map = map;
 					floorMat.needsUpdate = true;
-				} );
-				textureLoader.load( "textures/hardwood2_bump.jpg", function( map ) {
+
+	} );
+				textureLoader.load( "textures/hardwood2_bump.jpg", function ( map ) {
+
 					map.wrapS = THREE.RepeatWrapping;
 					map.wrapT = THREE.RepeatWrapping;
 					map.anisotropy = 4;
 					map.repeat.set( 10, 24 );
 					floorMat.bumpMap = map;
 					floorMat.needsUpdate = true;
-				} );
-				textureLoader.load( "textures/hardwood2_roughness.jpg", function( map ) {
+
+	} );
+				textureLoader.load( "textures/hardwood2_roughness.jpg", function ( map ) {
+
 					map.wrapS = THREE.RepeatWrapping;
 					map.wrapT = THREE.RepeatWrapping;
 					map.anisotropy = 4;
 					map.repeat.set( 10, 24 );
 					floorMat.roughnessMap = map;
 					floorMat.needsUpdate = true;
-				} );
+
+	} );
 
 				cubeMat = new THREE.MeshStandardMaterial( {
 					roughness: 0.7,
 					color: 0xffffff,
 					bumpScale: 0.002,
 					metalness: 0.2
-				});
-				textureLoader.load( "textures/brick_diffuse.jpg", function( map ) {
+				} );
+				textureLoader.load( "textures/brick_diffuse.jpg", function ( map ) {
+
 					map.wrapS = THREE.RepeatWrapping;
 					map.wrapT = THREE.RepeatWrapping;
 					map.anisotropy = 4;
 					map.repeat.set( 1, 1 );
 					cubeMat.map = map;
 					cubeMat.needsUpdate = true;
-				} );
-				textureLoader.load( "textures/brick_bump.jpg", function( map ) {
+
+	} );
+				textureLoader.load( "textures/brick_bump.jpg", function ( map ) {
+
 					map.wrapS = THREE.RepeatWrapping;
 					map.wrapT = THREE.RepeatWrapping;
 					map.anisotropy = 4;
 					map.repeat.set( 1, 1 );
 					cubeMat.bumpMap = map;
 					cubeMat.needsUpdate = true;
-				} );
+
+	} );
 
 				ballMat = new THREE.MeshStandardMaterial( {
 					color: 0xffffff,
 					roughness: 0.5,
 					metalness: 1.0
-				});
-				textureLoader.load( "textures/planets/earth_atmos_2048.jpg", function( map ) {
+				} );
+				textureLoader.load( "textures/planets/earth_atmos_2048.jpg", function ( map ) {
+
 					map.anisotropy = 4;
 					ballMat.map = map;
 					ballMat.needsUpdate = true;
-				} );
-				textureLoader.load( "textures/planets/earth_specular_2048.jpg", function( map ) {
+
+	} );
+				textureLoader.load( "textures/planets/earth_specular_2048.jpg", function ( map ) {
+
 					map.anisotropy = 4;
 					ballMat.metalnessMap = map;
 					ballMat.needsUpdate = true;
-				} );
+
+	} );
 
 				var floorGeometry = new THREE.PlaneBufferGeometry( 20, 20 );
 				var floorMesh = new THREE.Mesh( floorGeometry, floorMat );
 				floorMesh.receiveShadow = true;
-				floorMesh.rotation.x = -Math.PI / 2.0;
+				floorMesh.rotation.x = - Math.PI / 2.0;
 				scene.add( floorMesh );
 
 				var ballGeometry = new THREE.SphereBufferGeometry( 0.5, 32, 32 );
@@ -217,12 +227,12 @@
 
 				var boxGeometry = new THREE.BoxBufferGeometry( 0.5, 0.5, 0.5 );
 				var boxMesh = new THREE.Mesh( boxGeometry, cubeMat );
-				boxMesh.position.set( -0.5, 0.25, -1 );
+				boxMesh.position.set( - 0.5, 0.25, - 1 );
 				boxMesh.castShadow = true;
 				scene.add( boxMesh );
 
 				var boxMesh2 = new THREE.Mesh( boxGeometry, cubeMat );
-				boxMesh2.position.set( 0, 0.25, -5 );
+				boxMesh2.position.set( 0, 0.25, - 5 );
 				boxMesh2.castShadow = true;
 				scene.add( boxMesh2 );
 
@@ -255,7 +265,8 @@
 				gui.add( params, 'exposure', 0, 1 );
 				gui.add( params, 'shadows' );
 				gui.open();
-			}
+
+}
 
 			function onWindowResize() {
 
@@ -283,12 +294,14 @@
 				renderer.toneMappingExposure = Math.pow( params.exposure, 5.0 ); // to allow for very bright scenes.
 				renderer.shadowMap.enabled = params.shadows;
 				bulbLight.castShadow = params.shadows;
-				if( params.shadows !== previousShadowMap ) {
+				if ( params.shadows !== previousShadowMap ) {
+
 					ballMat.needsUpdate = true;
 					cubeMat.needsUpdate = true;
 					floorMat.needsUpdate = true;
 					previousShadowMap = params.shadows;
-				}
+
+	}
 				bulbLight.power = bulbLuminousPowers[ params.bulbPower ];
 				bulbMat.emissiveIntensity = bulbLight.intensity / Math.pow( 0.02, 2.0 ); // convert from intensity to irradiance at bulb surface
 

examples/webgl_lights_pointlights.html

@@ -48,8 +48,8 @@
 			}
 
 			var camera, scene, renderer,
-			light1, light2, light3, light4,
-			object, stats;
+				light1, light2, light3, light4,
+				object, stats;
 
 			var clock = new THREE.Clock();
 
@@ -134,7 +134,7 @@
 				var time = Date.now() * 0.0005;
 				var delta = clock.getDelta();
 
-				if( object ) object.rotation.y -= 0.5 * delta;
+				if ( object ) object.rotation.y -= 0.5 * delta;
 
 				light1.position.x = Math.sin( time * 0.7 ) * 30;
 				light1.position.y = Math.cos( time * 0.5 ) * 40;

examples/webgl_lights_rectarealight.html

@@ -33,7 +33,6 @@
 	</head>
 	<body>
 
-		<div id="container"></div>
 		<div id="info">
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - Demo of RectAreaLight - by <a href="http://github.com/abelnation" target="_blank" rel="noopener">abelnation</a><br />
 			Click and drag to move OrbitControls.<br />
@@ -49,8 +48,6 @@
 
 		<script>
 
-			var container = document.getElementById( 'container' );
-
 			if ( WEBGL.isWebGLAvailable() === false ) {
 
 				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
@@ -92,7 +89,7 @@
 
 				}
 
-				if ( ! gl.getExtension('OES_texture_float_linear' ) ) {
+				if ( ! gl.getExtension( 'OES_texture_float_linear' ) ) {
 
 					alert( 'OES_texture_float_linear not supported' );
 					throw 'missing webgl extension';

examples/webgl_lights_spotlight.html

@@ -162,7 +162,7 @@
 					angle: spotLight.angle,
 					penumbra: spotLight.penumbra,
 					decay: spotLight.decay
-				}
+				};
 
 				gui.addColor( params, 'light color' ).onChange( function ( val ) {
 

examples/webgl_lights_spotlights.html

@@ -154,14 +154,14 @@
 					angle: ( Math.random() * 0.7 ) + 0.1,
 					penumbra: Math.random() + 1
 				}, Math.random() * 3000 + 2000 )
-				.easing( TWEEN.Easing.Quadratic.Out ).start();
+					.easing( TWEEN.Easing.Quadratic.Out ).start();
 
 				new TWEEN.Tween( light.position ).to( {
 					x: ( Math.random() * 30 ) - 15,
 					y: ( Math.random() * 10 ) + 15,
 					z: ( Math.random() * 30 ) - 15
 				}, Math.random() * 3000 + 2000 )
-				.easing( TWEEN.Easing.Quadratic.Out ).start();
+					.easing( TWEEN.Easing.Quadratic.Out ).start();
 
 			}
 

examples/webgl_lines_colors.html

@@ -11,10 +11,6 @@
 				overflow: hidden;
 			}
 
-			a {
-				color:#0078ff;
-			}
-
 			#info {
 				position: absolute;
 				top: 10px; width: 100%;
@@ -82,7 +78,7 @@
 
 				//
 
-				var hilbertPoints = hilbert3D( new THREE.Vector3( 0,0,0 ), 200.0, 1, 0, 1, 2, 3, 4, 5, 6, 7 );
+				var hilbertPoints = hilbert3D( new THREE.Vector3( 0, 0, 0 ), 200.0, 1, 0, 1, 2, 3, 4, 5, 6, 7 );
 
 				var geometry1 = new THREE.BufferGeometry();
 				var geometry2 = new THREE.BufferGeometry();
@@ -100,7 +96,7 @@
 
 				var spline = new THREE.CatmullRomCurve3( hilbertPoints );
 
-				for ( var i = 0; i < hilbertPoints.length * subdivisions; i++ ) {
+				for ( var i = 0; i < hilbertPoints.length * subdivisions; i ++ ) {
 
 					var t = i / ( hilbertPoints.length * subdivisions );
 					spline.getPoint( t, point );
@@ -137,7 +133,7 @@
 				colors2 = [];
 				colors3 = [];
 
-				for ( var i = 0; i < hilbertPoints.length; i++ ) {
+				for ( var i = 0; i < hilbertPoints.length; i ++ ) {
 
 					var point = hilbertPoints[ i ];
 
@@ -168,21 +164,21 @@
 
 				var line, p, scale = 0.3, d = 225;
 
-				var parameters =  [
+				var parameters = [
 					[ material, scale * 1.5, [ - d, - d / 2, 0 ], geometry1 ],
-					[ material, scale * 1.5, [   0, - d / 2, 0 ], geometry2 ],
-					[ material, scale * 1.5, [   d, - d / 2, 0 ], geometry3 ],
+					[ material, scale * 1.5, [ 0, - d / 2, 0 ], geometry2 ],
+					[ material, scale * 1.5, [ d, - d / 2, 0 ], geometry3 ],
 
 					[ material, scale * 1.5, [ - d, d / 2, 0 ], geometry4 ],
-					[ material, scale * 1.5, [   0, d / 2, 0 ], geometry5 ],
-					[ material, scale * 1.5, [   d, d / 2, 0 ], geometry6 ],
+					[ material, scale * 1.5, [ 0, d / 2, 0 ], geometry5 ],
+					[ material, scale * 1.5, [ d, d / 2, 0 ], geometry6 ],
 				];
 
-				for ( var i = 0; i < parameters.length; i++ ) {
+				for ( var i = 0; i < parameters.length; i ++ ) {
 
 					p = parameters[ i ];
-					line = new THREE.Line( p[ 3 ],  p[ 0 ] );
-					line.scale.x = line.scale.y = line.scale.z =  p[ 1 ];
+					line = new THREE.Line( p[ 3 ], p[ 0 ] );
+					line.scale.x = line.scale.y = line.scale.z = p[ 1 ];
 					line.position.x = p[ 2 ][ 0 ];
 					line.position.y = p[ 2 ][ 1 ];
 					line.position.z = p[ 2 ][ 2 ];
@@ -220,6 +216,7 @@
 
 				mouseX = event.clientX - windowHalfX;
 				mouseY = event.clientY - windowHalfY;
+
 			}
 
 			function onDocumentTouchStart( event ) {
@@ -230,7 +227,9 @@
 
 					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
+
 				}
+
 			}
 
 			function onDocumentTouchMove( event ) {
@@ -241,6 +240,7 @@
 
 					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
+
 				}
 
 			}
@@ -269,7 +269,7 @@
 
 					if ( object.isLine ) {
 
-						object.rotation.y = time * ( i % 2 ? 1 : -1 );
+						object.rotation.y = time * ( i % 2 ? 1 : - 1 );
 
 					}
 

examples/webgl_lines_dashed.html

@@ -110,41 +110,41 @@
 				var position = [];
 
 				position.push(
-					-h, -h, -h,
-					-h, h, -h,
+					- h, - h, - h,
+					- h, h, - h,
 
-					-h, h, -h,
-					h, h, -h,
+					- h, h, - h,
+					h, h, - h,
 
-					h, h, -h,
-					h, -h, -h,
+					h, h, - h,
+					h, - h, - h,
 
-					h, -h, -h,
-					-h, -h, -h,
+					h, - h, - h,
+					- h, - h, - h,
 
-					-h, -h, h,
-					-h, h, h,
+					- h, - h, h,
+					- h, h, h,
 
-					-h, h, h,
+					- h, h, h,
 					h, h, h,
 
 					h, h, h,
-					h, -h, h,
+					h, - h, h,
 
-					h, -h, h,
-					-h, -h, h,
+					h, - h, h,
+					- h, - h, h,
 
-					-h, -h, -h,
-					-h, -h, h,
+					- h, - h, - h,
+					- h, - h, h,
 
-					-h, h, -h,
-					-h, h, h,
+					- h, h, - h,
+					- h, h, h,
 
-					h, h, -h,
+					h, h, - h,
 					h, h, h,
 
-					h, -h, -h,
-					h, -h, h
+					h, - h, - h,
+					h, - h, h
 				 );
 
 				geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( position, 3 ) );
@@ -175,7 +175,7 @@
 
 				var time = Date.now() * 0.001;
 
-				scene.traverse( function( object ) {
+				scene.traverse( function ( object ) {
 
 					if ( object.isLine ) {
 

examples/webgl_lines_sphere.html

@@ -11,10 +11,6 @@
 				overflow: hidden;
 			}
 
-			a {
-				color:#0078ff;
-			}
-
 			#info {
 				position: absolute;
 				top: 10px; width: 100%;
@@ -59,14 +55,13 @@
 			var SCREEN_WIDTH = window.innerWidth,
 				SCREEN_HEIGHT = window.innerHeight,
 
-			r = 450,
+	r = 450,
 
-			mouseX = 0, mouseY = 0,
+	mouseY = 0,
 
-			windowHalfX = window.innerWidth / 2,
-			windowHalfY = window.innerHeight / 2,
+	windowHalfY = window.innerHeight / 2,
 
-			camera, scene, renderer;
+	camera, scene, renderer;
 
 			init();
 			animate();
@@ -79,12 +74,12 @@
 				scene = new THREE.Scene();
 
 				var i, line, material, p,
-					parameters = [ [ 0.25, 0xff7700, 1 ], [ 0.5, 0xff9900, 1 ], [ 0.75, 0xffaa00, 0.75 ], [ 1, 0xffaa00, 0.5 ], [ 1.25, 0x000833, 0.8 ],
-							       [ 3.0, 0xaaaaaa, 0.75 ], [ 3.5, 0xffffff, 0.5 ], [ 4.5, 0xffffff, 0.25 ], [ 5.5, 0xffffff, 0.125 ] ];
+					parameters = [[ 0.25, 0xff7700, 1 ], [ 0.5, 0xff9900, 1 ], [ 0.75, 0xffaa00, 0.75 ], [ 1, 0xffaa00, 0.5 ], [ 1.25, 0x000833, 0.8 ],
+							       [ 3.0, 0xaaaaaa, 0.75 ], [ 3.5, 0xffffff, 0.5 ], [ 4.5, 0xffffff, 0.25 ], [ 5.5, 0xffffff, 0.125 ]];
 
 				var geometry = createGeometry();
 
-				for( i = 0; i < parameters.length; ++ i ) {
+				for ( i = 0; i < parameters.length; ++ i ) {
 
 					p = parameters[ i ];
 
@@ -164,7 +159,6 @@
 
 			function onWindowResize() {
 
-				windowHalfX = window.innerWidth / 2;
 				windowHalfY = window.innerHeight / 2;
 
 				camera.aspect = window.innerWidth / window.innerHeight;
@@ -176,7 +170,6 @@
 
 			function onDocumentMouseMove( event ) {
 
-				mouseX = event.clientX - windowHalfX;
 				mouseY = event.clientY - windowHalfY;
 
 			}
@@ -187,7 +180,6 @@
 
 					event.preventDefault();
 
-					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 
 				}
@@ -200,7 +192,6 @@
 
 					event.preventDefault();
 
-					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 
 				}

examples/webgl_loader_3ds.html

@@ -72,13 +72,14 @@
 						if ( child instanceof THREE.Mesh ) {
 
 							child.material.normalMap = normal;
+
 						}
 
 					} );
 
 					scene.add( object );
 
-				});
+				} );
 
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );

examples/webgl_loader_3mf.html

@@ -30,7 +30,6 @@
 			span {
 				display: inline-block;
 				width: 60px;
-				float: left;
 				text-align: center;
 			}
 

examples/webgl_loader_amf.html

@@ -30,7 +30,6 @@
 			span {
 				display: inline-block;
 				width: 60px;
-				float: left;
 				text-align: center;
 			}
 
@@ -76,14 +75,14 @@
 				// Z is up for objects intended to be 3D printed.
 
 				camera.up.set( 0, 0, 1 );
-				camera.position.set( 0, -9, 6 );
+				camera.position.set( 0, - 9, 6 );
 
 				camera.add( new THREE.PointLight( 0xffffff, 0.8 ) );
 
 				scene.add( camera );
 
 				var grid = new THREE.GridHelper( 50, 50, 0xffffff, 0x555555 );
-				grid.rotateOnAxis( new THREE.Vector3( 1, 0, 0 ), 90 * ( Math.PI/180 ) );
+				grid.rotateOnAxis( new THREE.Vector3( 1, 0, 0 ), 90 * ( Math.PI / 180 ) );
 				scene.add( grid );
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );

examples/webgl_loader_assimp.html

@@ -33,7 +33,6 @@
 			span {
 				display: inline-block;
 				width: 60px;
-				float: left;
 				text-align: center;
 			}
 		</style>

examples/webgl_loader_assimp2json.html

@@ -155,6 +155,7 @@
 
 				render();
 				stats.update();
+
 			}
 
 			//

examples/webgl_loader_awd.html

@@ -50,8 +50,8 @@
 
 			var container, stats;
 
-			var camera, scene, renderer, objects, controls;
-			var particleLight, pointLight;
+			var camera, scene, renderer;
+			var pointLight;
 			var trunk;
 
 			var loader = new THREE.AWDLoader();
@@ -66,8 +66,8 @@
 
 			} );
 
+			function createMaterial() {
 
-			function createMaterial( name ){
 				// console.log( name );
 				// var mat = new THREE.MeshPhongMaterial({
 				// 	color: 0xaaaaaa,
@@ -76,8 +76,8 @@
 				// });
 				// return mat;
 				return null;
-			}
 
+			}
 
 			function init() {
 
@@ -85,24 +85,22 @@
 				document.body.appendChild( container );
 
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
-				camera.position.set( 70, 50, -100 );
+				camera.position.set( 70, 50, - 100 );
 
-				controls = new THREE.OrbitControls( camera );
+				var controls = new THREE.OrbitControls( camera );
 
 				scene = new THREE.Scene();
 
-
 				// Add the AWD SCENE
 
 				scene.add( trunk );
 
-
 				// Lights
 
 				scene.add( new THREE.AmbientLight( 0x606060 ) );
 
-				var directionalLight = new THREE.DirectionalLight(/*Math.random() * 0xffffff*/0xeeeeee );
-				directionalLight.position.set( .2, -1, .2 );
+				var directionalLight = new THREE.DirectionalLight( /*Math.random() * 0xffffff*/0xeeeeee );
+				directionalLight.position.set( .2, - 1, .2 );
 				directionalLight.position.normalize();
 				scene.add( directionalLight );
 
@@ -132,8 +130,6 @@
 
 			}
 
-
-
 			function render() {
 
 				requestAnimationFrame( render );

examples/webgl_loader_babylon.html

@@ -65,15 +65,12 @@
 					if ( xhr.lengthComputable ) {
 
 						var percentComplete = xhr.loaded / xhr.total * 100;
-						console.log( Math.round(percentComplete, 2) + '% downloaded' );
+						console.log( Math.round( percentComplete, 2 ) + '% downloaded' );
 
 					}
 
 				};
 
-				var onError = function ( xhr ) {
-				};
-
 				// model
 
 				var loader = new THREE.BabylonLoader( manager );
@@ -95,7 +92,7 @@
 
 					animate();
 
-				}, onProgress, onError );
+				}, onProgress, null );
 
 				//
 

examples/webgl_loader_bvh.html

@@ -46,7 +46,7 @@
 			animate();
 
 			var loader = new THREE.BVHLoader();
-			loader.load( "models/bvh/pirouette.bvh", function( result ) {
+			loader.load( "models/bvh/pirouette.bvh", function ( result ) {
 
 				skeletonHelper = new THREE.SkeletonHelper( result.skeleton.bones[ 0 ] );
 				skeletonHelper.skeleton = result.skeleton; // allow animation mixer to bind to SkeletonHelper directly

examples/webgl_loader_collada.html

@@ -70,7 +70,7 @@
 
 				// loading manager
 
-				var loadingManager = new THREE.LoadingManager( function() {
+				var loadingManager = new THREE.LoadingManager( function () {
 
 					scene.add( elf );
 

examples/webgl_loader_collada_kinematics.html

@@ -52,7 +52,7 @@
 
 			var container, stats;
 
-			var camera, scene, renderer, objects;
+			var camera, scene, renderer;
 			var particleLight;
 			var dae;
 
@@ -163,7 +163,7 @@
 
 				kinematicsTween = new TWEEN.Tween( tweenParameters ).to( target, duration ).easing( TWEEN.Easing.Quadratic.Out );
 
-				kinematicsTween.onUpdate( function() {
+				kinematicsTween.onUpdate( function () {
 
 					for ( var prop in kinematics.joints ) {
 

examples/webgl_loader_collada_skinning.html

@@ -75,7 +75,7 @@
 					var animations = collada.animations;
 					var avatar = collada.scene;
 
-					avatar.traverse( function( node ) {
+					avatar.traverse( function ( node ) {
 
 						if ( node.isSkinnedMesh ) {
 

examples/webgl_loader_ctm.html

@@ -55,8 +55,6 @@
 
 			var camera, scene, renderer;
 
-			var mesh, zmesh, geometry;
-
 			var mouseX = 0, mouseY = 0;
 
 			var windowHalfX = window.innerWidth / 2;
@@ -66,7 +64,7 @@
 			var cubeTextureLoader = new THREE.CubeTextureLoader();
 			var reflectionCube;
 
-			document.addEventListener('mousemove', onDocumentMouseMove, false);
+			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
 			init();
 			animate();
@@ -100,7 +98,7 @@
 				scene.add( ambient );
 
 				var light = new THREE.SpotLight( 0xffeedd, 1.2, 650, Math.PI / 6 );
-				light.position.set( 0, -100, 500 );
+				light.position.set( 0, - 100, 500 );
 
 				light.castShadow = true;
 				light.shadow.mapWidth = 1024;
@@ -145,7 +143,7 @@
 					if ( c === 3 ) {
 
 						var e = Date.now();
-						console.log( "Total parse time: " + (e-s) + " ms" );
+						console.log( "Total parse time: " + ( e - s ) + " ms" );
 
 					}
 
@@ -153,29 +151,29 @@
 
 				var loader = new THREE.CTMLoader();
 
-				loader.load( "models/ctm/ben.ctm",   function( geometry ) {
+				loader.load( "models/ctm/ben.ctm", function ( geometry ) {
 
 					var material = new THREE.MeshLambertMaterial( { color: 0xffaa00, map: textureLoader.load( "textures/UV_Grid_Sm.jpg" ), envMap: reflectionCube, combine: THREE.MixOperation, reflectivity: 0.3 } );
-					callbackModel( geometry, 450, material, 0, -200, 0, 0, 0 );
+					callbackModel( geometry, 450, material, 0, - 200, 0, 0, 0 );
 					checkTime();
 
 				}, { useWorker: true } );
 
-				loader.load( "models/ctm/WaltHead.ctm",  function( geometry ) {
+				loader.load( "models/ctm/WaltHead.ctm", function ( geometry ) {
 
 					var material1 = new THREE.MeshLambertMaterial( { color: 0xffffff } );
 					var material2 = new THREE.MeshPhongMaterial( { color: 0xff4400, specular: 0x333333, shininess: 100 } );
 					var material3 = new THREE.MeshPhongMaterial( { color: 0x00ff44, specular: 0x333333, shininess: 100 } );
 
-					callbackModel( geometry, 5, material1, -200, 0, -50, 0, 0 );
-					callbackModel( geometry, 2, material2,  100, 0, 125, 0, 0 );
-					callbackModel( geometry, 2, material3, -100, 0, 125, 0, 0 );
+					callbackModel( geometry, 5, material1, - 200, 0, - 50, 0, 0 );
+					callbackModel( geometry, 2, material2, 100, 0, 125, 0, 0 );
+					callbackModel( geometry, 2, material3, - 100, 0, 125, 0, 0 );
 
 					checkTime();
 
 				}, { useWorker: true } );
 
-				loader.load( "models/ctm/LeePerry.ctm",  function( geometry ) {
+				loader.load( "models/ctm/LeePerry.ctm", function ( geometry ) {
 
 					var material = new THREE.MeshPhongMaterial( {
 
@@ -213,7 +211,7 @@
 
 			//
 
-			function onWindowResize( event ) {
+			function onWindowResize() {
 
 				SCREEN_WIDTH = window.innerWidth;
 				SCREEN_HEIGHT = window.innerHeight;

examples/webgl_loader_ctm_materials.html

@@ -60,22 +60,14 @@
 
 			var SCREEN_WIDTH = window.innerWidth;
 			var SCREEN_HEIGHT = window.innerHeight;
-			var FLOOR = -250;
 
 			var container, stats;
 
 			var camera, scene, controls;
 			var renderer;
 
-			var mesh;
-
 			var textureCube;
 
-			var mouseX = 0, mouseY = 0;
-
-			var windowHalfX = window.innerWidth / 2;
-			var windowHalfY = window.innerHeight / 2;
-
 			init();
 			animate();
 
@@ -116,7 +108,7 @@
 				scene.add( light );
 
 				var light = new THREE.PointLight( 0xffffff, 0.75 );
-				light.position.set( -12, 4.6, 2.4 );
+				light.position.set( - 12, 4.6, 2.4 );
 				light.position.multiplyScalar( 30 );
 				scene.add( light );
 
@@ -144,7 +136,6 @@
 				// EVENTS
 
 				window.addEventListener( 'resize', onWindowResize, false );
-				window.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
 				// LOADER
 
@@ -152,11 +143,11 @@
 
 				// new way via CTMLoader and separate parts
 
-				var position = new THREE.Vector3( -105, -78, -30 );
+				var position = new THREE.Vector3( - 105, - 78, - 30 );
 				var scale = new THREE.Vector3( 30, 30, 30 );
 
 				var loader = new THREE.CTMLoader();
-				loader.loadParts( "models/ctm/camaro/camaro.js", function( geometries, materials ) {
+				loader.loadParts( "models/ctm/camaro/camaro.js", function ( geometries, materials ) {
 
 					hackMaterials( materials );
 
@@ -185,7 +176,7 @@
 
 					var m = materials[ i ];
 
-					if ( m.name.indexOf( "Body" ) !== -1 ) {
+					if ( m.name.indexOf( "Body" ) !== - 1 ) {
 
 						var mm = new THREE.MeshStandardMaterial();
 
@@ -197,7 +188,7 @@
 
 						materials[ i ] = mm;
 
-					} else if ( m.name.indexOf( "tire_car" ) !== -1 ) {
+					} else if ( m.name.indexOf( "tire_car" ) !== - 1 ) {
 
 						var mm = new THREE.MeshStandardMaterial();
 
@@ -208,7 +199,7 @@
 
 						materials[ i ] = mm;
 
-					} else if ( m.name.indexOf( "mirror" ) !== -1 ) {
+					} else if ( m.name.indexOf( "mirror" ) !== - 1 ) {
 
 						var mm = new THREE.MeshStandardMaterial();
 
@@ -220,12 +211,11 @@
 
 						materials[ i ] = mm;
 
-					} else if ( m.name.indexOf( "glass" ) !== -1 ) {
+					} else if ( m.name.indexOf( "glass" ) !== - 1 ) {
 
 						var mm = new THREE.MeshStandardMaterial();
 
 						mm.color.copy( m.color );
-//						mm.lightMap = m.map;
 						mm.envMap = textureCube;
 						mm.metalness = 1;
 						mm.roughtness = 0.1;
@@ -234,7 +224,7 @@
 
 						materials[ i ] = mm;
 
-					} else if ( m.name.indexOf( "Material.001" ) !== -1 ) {
+					} else if ( m.name.indexOf( "Material.001" ) !== - 1 ) {
 
 						var mm = new THREE.MeshPhongMaterial( { map: m.map } );
 
@@ -255,7 +245,7 @@
 
 			//
 
-			function onWindowResize( event ) {
+			function onWindowResize() {
 
 				SCREEN_WIDTH = window.innerWidth;
 				SCREEN_HEIGHT = window.innerHeight;
@@ -267,14 +257,6 @@
 
 			}
 
-
-			function onDocumentMouseMove(event) {
-
-				mouseX = ( event.clientX - windowHalfX );
-				mouseY = ( event.clientY - windowHalfY );
-
-			}
-
 			//
 
 			function animate() {

examples/webgl_loader_draco.html

@@ -43,9 +43,11 @@
 
 		var camera, scene, renderer;
 
+		var container = document.querySelector( '#container' );
+
 		// Configure and create Draco decoder.
-		THREE.DRACOLoader.setDecoderPath('js/libs/draco/');
-		THREE.DRACOLoader.setDecoderConfig({type: 'js'});
+		THREE.DRACOLoader.setDecoderPath( 'js/libs/draco/' );
+		THREE.DRACOLoader.setDecoderConfig( { type: 'js' } );
 		var dracoLoader = new THREE.DRACOLoader();
 		init();
 		animate();
@@ -67,7 +69,7 @@
 			plane.rotation.x = - Math.PI / 2;
 			plane.position.y = 0.03;
 			plane.receiveShadow = true;
-			scene.add(plane);
+			scene.add( plane );
 
 			// Lights
 			var light = new THREE.HemisphereLight( 0x443333, 0x111122 );

examples/webgl_loader_fbx.html

@@ -86,8 +86,8 @@
 				light.position.set( 0, 200, 100 );
 				light.castShadow = true;
 				light.shadow.camera.top = 180;
-				light.shadow.camera.bottom = -100;
-				light.shadow.camera.left = -120;
+				light.shadow.camera.bottom = - 100;
+				light.shadow.camera.left = - 120;
 				light.shadow.camera.right = 120;
 				scene.add( light );
 

examples/webgl_loader_fbx_nurbs.html

@@ -90,7 +90,7 @@
 
 				// model
 				var loader = new THREE.FBXLoader();
-				loader.load( 'models/fbx/nurbs.fbx', function( object ) {
+				loader.load( 'models/fbx/nurbs.fbx', function ( object ) {
 
 					scene.add( object );
 

examples/webgl_loader_gcode.html

@@ -36,7 +36,7 @@
 
 		<script>
 
-			var container, controls;
+			var container;
 			var camera, scene, renderer;
 
 			init();
@@ -47,20 +47,20 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 10000);
+				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 10000 );
 				camera.position.set( 0, 0, 50 );
 
-				controls = new THREE.OrbitControls( camera );
+				var controls = new THREE.OrbitControls( camera );
 
 				scene = new THREE.Scene();
 
 				var loader = new THREE.GCodeLoader();
 				loader.load( 'models/gcode/benchy.gcode', function ( object ) {
 
-					object.position.set( -100, -20, 100 );
+					object.position.set( - 100, - 20, 100 );
 					scene.add( object );
 
-				});
+				} );
 
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );

examples/webgl_loader_gltf.html

@@ -63,10 +63,10 @@
 				document.body.appendChild( container );
 
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
-				camera.position.set( -1.8, 0.9, 2.7 );
+				camera.position.set( - 1.8, 0.9, 2.7 );
 
 				controls = new THREE.OrbitControls( camera );
-				controls.target.set( 0, -0.2, -0.2 );
+				controls.target.set( 0, - 0.2, - 0.2 );
 				controls.update();
 
 				// envmap

examples/webgl_loader_gltf_extensions.html

@@ -282,7 +282,7 @@
 
 				var loadStartTime = performance.now();
 
-				loader.load( url, function( data ) {
+				loader.load( url, function ( data ) {
 
 					gltf = data;
 
@@ -331,7 +331,7 @@
 
 						if ( ! envMap ) envMap = getEnvMap();
 
-						object.traverse( function( node ) {
+						object.traverse( function ( node ) {
 
 							if ( node.material && ( node.material.isMeshStandardMaterial ||
 								 ( node.material.isShaderMaterial && node.material.envMap !== undefined ) ) ) {

examples/webgl_loader_imagebitmap.html

@@ -67,10 +67,14 @@
 
 						addCube( material );
 
-					}, function( p ) {
+					}, function ( p ) {
+
 						console.log( p );
-					}, function( e ) {
+
+					}, function ( e ) {
+
 						console.log( e );
+
 					} );
 
 			}
@@ -80,14 +84,16 @@
 				new THREE.ImageLoader()
 					.setCrossOrigin( '*' )
 					.load( 'textures/planets/earth_atmos_2048.jpg?' + performance.now(), function ( image ) {
-							var texture = new THREE.CanvasTexture( image );
-							var material = new THREE.MeshBasicMaterial( { color: 0xff8888, map: texture } );
-							addCube( material );
-				});
+
+						var texture = new THREE.CanvasTexture( image );
+						var material = new THREE.MeshBasicMaterial( { color: 0xff8888, map: texture } );
+						addCube( material );
+
+					} );
 
 			}
 
-			var geometry = new THREE.BoxBufferGeometry( 1,1,1 );
+			var geometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
 
 			function addCube( material ) {
 

examples/webgl_loader_json.html

@@ -51,7 +51,7 @@
 			}
 
 			var container, stats, clock, mixer;
-			var camera, scene, renderer, objects;
+			var camera, scene, renderer;
 
 			init();
 			animate();
@@ -85,7 +85,7 @@
 
 						// random placement in a grid
 
-						var x = ( ( i % 27 )  - 13.5 ) * 2 + THREE.Math.randFloatSpread( 1 );
+						var x = ( ( i % 27 ) - 13.5 ) * 2 + THREE.Math.randFloatSpread( 1 );
 						var z = ( Math.floor( i / 27 ) - 13.5 ) * 2 + THREE.Math.randFloatSpread( 1 );
 
 						mesh.position.set( x, 0, z );
@@ -93,7 +93,7 @@
 						var s = THREE.Math.randFloat( 0.00075, 0.001 );
 						mesh.scale.set( s, s, s );
 
-						mesh.rotation.y = THREE.Math.randFloat( -0.25, 0.25 );
+						mesh.rotation.y = THREE.Math.randFloat( - 0.25, 0.25 );
 
 						mesh.matrixAutoUpdate = false;
 						mesh.updateMatrix();
@@ -101,9 +101,9 @@
 						scene.add( mesh );
 
 						mixer.clipAction( geometry.animations[ 0 ], mesh )
-								.setDuration( 1 )			// one second
-								.startAt( - Math.random() )	// random phase (already running)
-								.play();					// let's go
+							.setDuration( 1 )			// one second
+							.startAt( - Math.random() )	// random phase (already running)
+							.play();					// let's go
 
 					}
 
@@ -138,7 +138,7 @@
 
 			//
 
-			function onWindowResize( event ) {
+			function onWindowResize() {
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 

examples/webgl_loader_json_claraio.html

@@ -73,8 +73,10 @@
 
 				// BEGIN Clara.io JSON loader code
 				var objectLoader = new THREE.ObjectLoader();
-				objectLoader.load("models/json/teapot-claraio.json", function ( obj ) {
+				objectLoader.load( "models/json/teapot-claraio.json", function ( obj ) {
+
 				 	scene.add( obj );
+
 				} );
 				// END Clara.io JSON loader code