fix linter errors in webgl M to W

examples/webgl_marchingcubes.html

@@ -94,18 +94,16 @@
 
 		var camera, scene, renderer;
 
-		var mesh, texture, geometry, materials, material, current_material;
+		var materials, current_material;
 
 		var light, pointLight, ambientLight;
 
-		var effect, resolution, numBlobs;
+		var effect, resolution;
 
 		var composer, effectFXAA, hblur, vblur;
 
 		var effectController;
 
-		var controls;
-
 		var time = 0;
 		var clock = new THREE.Clock();
 
@@ -119,7 +117,7 @@
 			// CAMERA
 
 			camera = new THREE.PerspectiveCamera( 45, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
-			camera.position.set( -500, 500, 1500 );
+			camera.position.set( - 500, 500, 1500 );
 
 			// SCENE
 
@@ -147,7 +145,6 @@
 			// MARCHING CUBES
 
 			resolution = 28;
-			numBlobs = 10;
 
 			effect = new THREE.MarchingCubes( resolution, materials[ current_material ].m, true, true );
 			effect.position.set( 0, 0, 0 );
@@ -177,7 +174,7 @@
 
 			// CONTROLS
 
-			controls = new THREE.OrbitControls( camera, renderer.domElement );
+			var controls = new THREE.OrbitControls( camera, renderer.domElement );
 
 			// STATS
 
@@ -231,7 +228,7 @@
 
 		//
 
-		function onWindowResize( event ) {
+		function onWindowResize() {
 
 			SCREEN_WIDTH = window.innerWidth;
 			SCREEN_HEIGHT = window.innerHeight - 2 * MARGIN;
@@ -273,11 +270,11 @@
 			// toons
 
 			var toonMaterial1 = createShaderMaterial( "toon1", light, ambientLight ),
-			toonMaterial2 = createShaderMaterial( "toon2", light, ambientLight ),
-			hatchingMaterial = createShaderMaterial( "hatching", light, ambientLight ),
-			hatchingMaterial2 = createShaderMaterial( "hatching", light, ambientLight ),
-			dottedMaterial = createShaderMaterial( "dotted", light, ambientLight ),
-			dottedMaterial2 = createShaderMaterial( "dotted", light, ambientLight );
+				toonMaterial2 = createShaderMaterial( "toon2", light, ambientLight ),
+				hatchingMaterial = createShaderMaterial( "hatching", light, ambientLight ),
+				hatchingMaterial2 = createShaderMaterial( "hatching", light, ambientLight ),
+				dottedMaterial = createShaderMaterial( "dotted", light, ambientLight ),
+				dottedMaterial2 = createShaderMaterial( "dotted", light, ambientLight );
 
 			hatchingMaterial2.uniforms.uBaseColor.value.setRGB( 0, 0, 0 );
 			hatchingMaterial2.uniforms.uLineColor1.value.setHSL( 0, 0.8, 0.5 );
@@ -293,85 +290,85 @@
 
 			var materials = {
 
-			"chrome" :
+				"chrome":
 			{
 				m: new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: reflectionCube } ),
 				h: 0, s: 0, l: 1
 			},
 
-			"liquid" :
+				"liquid":
 			{
 				m: new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: refractionCube, refractionRatio: 0.85 } ),
 				h: 0, s: 0, l: 1
 			},
 
-			"shiny"  :
+				"shiny":
 			{
 				m: new THREE.MeshStandardMaterial( { color: 0x550000, envMap: reflectionCube, roughness: 0.1, metalness: 1.0 } ),
 				h: 0, s: 0.8, l: 0.2
 			},
 
-			"matte" :
+				"matte":
 			{
 				m: new THREE.MeshPhongMaterial( { color: 0x000000, specular: 0x111111, shininess: 1 } ),
 				h: 0, s: 0, l: 1
 			},
 
-			"flat" :
+				"flat":
 			{
 				m: new THREE.MeshLambertMaterial( { color: 0x000000, flatShading: true } ),
 				h: 0, s: 0, l: 1
 			},
 
-			"textured" :
+				"textured":
 			{
 				m: new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x111111, shininess: 1, map: texture } ),
 				h: 0, s: 0, l: 1
 			},
 
-			"colors" :
+				"colors":
 			{
 				m: new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0xffffff, shininess: 2, vertexColors: THREE.VertexColors } ),
 				h: 0, s: 0, l: 1
 			},
 
-			"plastic" :
+				"plastic":
 			{
 				m: new THREE.MeshPhongMaterial( { color: 0x000000, specular: 0x888888, shininess: 250 } ),
 				h: 0.6, s: 0.8, l: 0.1
 			},
 
-			"toon1"  :
+				"toon1":
 			{
 				m: toonMaterial1,
 				h: 0.2, s: 1, l: 0.75
 			},
 
-			"toon2" :
+				"toon2":
 			{
 				m: toonMaterial2,
 				h: 0.4, s: 1, l: 0.75
 			},
 
-			"hatching" :
+				"hatching":
 			{
 				m: hatchingMaterial,
 				h: 0.2, s: 1, l: 0.9
 			},
 
-			"hatching2" :
+				"hatching2":
 			{
 				m: hatchingMaterial2,
 				h: 0.0, s: 0.8, l: 0.5
 			},
 
-			"dotted" :
+				"dotted":
 			{
 				m: dottedMaterial,
 				h: 0.2, s: 1, l: 0.9
 			},
 
-			"dotted2" :
+				"dotted2":
 			{
 				m: dottedMaterial2,
 				h: 0.1, s: 1, l: 0.5
@@ -407,9 +404,9 @@
 
 		function setupGui() {
 
-			var createHandler = function( id ) {
+			var createHandler = function ( id ) {
 
-				return function() {
+				return function () {
 
 					var mat_old = materials[ current_material ];
 					mat_old.h = m_h.getValue();
@@ -425,8 +422,8 @@
 					m_s.setValue( mat.s );
 					m_l.setValue( mat.l );
 
-					effect.enableUvs = (current_material === "textured") ? true : false;
-					effect.enableColors = (current_material === "colors") ? true : false;
+					effect.enableUvs = ( current_material === "textured" ) ? true : false;
+					effect.enableColors = ( current_material === "colors" ) ? true : false;
 
 				};
 
@@ -434,33 +431,32 @@
 
 			effectController = {
 
-			material: "shiny",
+				material: "shiny",
 
-			speed: 1.0,
-			numBlobs: 10,
-			resolution: 28,
-			isolation: 80,
+				speed: 1.0,
+				numBlobs: 10,
+				resolution: 28,
+				isolation: 80,
 
-			floor: true,
-			wallx: false,
-			wallz: false,
+				floor: true,
+				wallx: false,
+				wallz: false,
 
-			hue: 0.0,
-			saturation: 0.8,
-			lightness: 0.1,
+				hue: 0.0,
+				saturation: 0.8,
+				lightness: 0.1,
 
-			lhue: 0.04,
-			lsaturation: 1.0,
-			llightness: 0.5,
+				lhue: 0.04,
+				lsaturation: 1.0,
+				llightness: 0.5,
 
-			lx: 0.5,
-			ly: 0.5,
-			lz: 1.0,
+				lx: 0.5,
+				ly: 0.5,
+				lz: 1.0,
 
-			postprocessing: false,
+				postprocessing: false,
 
-			dummy: function() {
-			}
+				dummy: function () {}
 
 			};
 
@@ -491,17 +487,17 @@
 
 			h = gui.addFolder( "Point light color" );
 
-			h.add( effectController, "lhue", 0.0, 1.0, 0.025 ).name("hue");
-			h.add( effectController, "lsaturation", 0.0, 1.0, 0.025 ).name("saturation");
-			h.add( effectController, "llightness", 0.0, 1.0, 0.025 ).name("lightness");
+			h.add( effectController, "lhue", 0.0, 1.0, 0.025 ).name( "hue" );
+			h.add( effectController, "lsaturation", 0.0, 1.0, 0.025 ).name( "saturation" );
+			h.add( effectController, "llightness", 0.0, 1.0, 0.025 ).name( "lightness" );
 
 			// light (directional)
 
 			h = gui.addFolder( "Directional light orientation" );
 
-			h.add( effectController, "lx", -1.0, 1.0, 0.025 ).name("x");
-			h.add( effectController, "ly", -1.0, 1.0, 0.025 ).name("y");
-			h.add( effectController, "lz", -1.0, 1.0, 0.025 ).name("z");
+			h.add( effectController, "lx", - 1.0, 1.0, 0.025 ).name( "x" );
+			h.add( effectController, "ly", - 1.0, 1.0, 0.025 ).name( "y" );
+			h.add( effectController, "lz", - 1.0, 1.0, 0.025 ).name( "z" );
 
 			// simulation
 
@@ -542,7 +538,7 @@
 				bally = Math.abs( Math.cos( i + 1.12 * time * Math.cos( 1.22 + 0.1424 * i ) ) ) * 0.77; // dip into the floor
 				ballz = Math.cos( i + 1.32 * time * 0.1 * Math.sin( ( 0.92 + 0.53 * i ) ) ) * 0.27 + 0.5;
 
-				object.addBall(ballx, bally, ballz, strength, subtract);
+				object.addBall( ballx, bally, ballz, strength, subtract );
 
 			}
 
@@ -554,7 +550,6 @@
 
 		//
 
-
 		function animate() {
 
 			requestAnimationFrame( animate );

examples/webgl_materials_blending.html

@@ -26,7 +26,7 @@
 			}
 
 			var camera, scene, renderer;
-			var mesh, mapBg;
+			var mapBg;
 
 			var textureLoader = new THREE.TextureLoader();
 
@@ -73,7 +73,7 @@
 				var materialBg = new THREE.MeshBasicMaterial( { map: mapBg } );
 
 				var meshBg = new THREE.Mesh( new THREE.PlaneBufferGeometry( 4000, 2000 ), materialBg );
-				meshBg.position.set( 0, 0, -1 );
+				meshBg.position.set( 0, 0, - 1 );
 				scene.add( meshBg );
 
 				// OBJECTS
@@ -92,8 +92,8 @@
 				addImageRow( map0, 300 );
 				addImageRow( map1, 150 );
 				addImageRow( map2, 0 );
-				addImageRow( map3, -150 );
-				addImageRow( map4, -300 );
+				addImageRow( map3, - 150 );
+				addImageRow( map4, - 300 );
 
 				function addImageRow( map, y ) {
 
@@ -136,7 +136,7 @@
 
 			//
 
-			function onWindowResize( event ) {
+			function onWindowResize() {
 
 				var SCREEN_WIDTH = window.innerWidth;
 				var SCREEN_HEIGHT = window.innerHeight;
@@ -176,8 +176,8 @@
 				requestAnimationFrame( animate );
 
 				var time = Date.now() * 0.00025;
-				var ox = ( time * -0.01 * mapBg.repeat.x ) % 1;
-				var oy = ( time * -0.01 * mapBg.repeat.y ) % 1;
+				var ox = ( time * - 0.01 * mapBg.repeat.x ) % 1;
+				var oy = ( time * - 0.01 * mapBg.repeat.y ) % 1;
 
 				mapBg.offset.set( ox, oy );
 

examples/webgl_materials_blending_custom.html

@@ -183,7 +183,7 @@
 				materialBg = new THREE.MeshBasicMaterial( { map: mapBg1 } );
 
 				var meshBg = new THREE.Mesh( new THREE.PlaneBufferGeometry( 4000, 2000 ), materialBg );
-				meshBg.position.set( 0, 0, -1 );
+				meshBg.position.set( 0, 0, - 1 );
 				scene.add( meshBg );
 
 				// FOREGROUND IMAGES
@@ -238,7 +238,7 @@
 						var y = ( i - dst.length / 2 ) * 110 + 50;
 
 						var mesh = new THREE.Mesh( geo1, material );
-						mesh.position.set( x, -y, z );
+						mesh.position.set( x, - y, z );
 						mesh.matrixAutoUpdate = false;
 						mesh.updateMatrix();
 						scene.add( mesh );
@@ -258,7 +258,7 @@
 					var y = ( 0 - dst.length / 2 ) * 110 + 50;
 
 					var mesh = new THREE.Mesh( geo2, generateLabelMaterial( blendSrc.replace( 'Factor', '' ), 'rgba( 0, 150, 0, 1 )' ) );
-					mesh.position.set( x, - (y - 70), z );
+					mesh.position.set( x, - ( y - 70 ), z );
 					mesh.matrixAutoUpdate = false;
 					mesh.updateMatrix();
 					scene.add( mesh );
@@ -274,7 +274,7 @@
 					var y = ( i - dst.length / 2 ) * 110 + 165;
 
 					var mesh = new THREE.Mesh( geo2, generateLabelMaterial( blendDst.replace( 'Factor', '' ), 'rgba( 150, 0, 0, 1 )' ) );
-					mesh.position.set( x, - (y - 120), z );
+					mesh.position.set( x, - ( y - 120 ), z );
 					mesh.matrixAutoUpdate = false;
 					mesh.updateMatrix();
 					scene.add( mesh );
@@ -363,14 +363,18 @@
 
 					el.style.backgroundColor = 'darkorange';
 
-				});
+				} );
 
 			}
 
 			function addBgHandler( id, map ) {
 
 				var el = document.getElementById( id );
-				el.addEventListener( 'click', function () { materialBg.map = map; }	);
+				el.addEventListener( 'click', function () {
+
+					materialBg.map = map;
+
+				}	);
 
 			}
 
@@ -398,7 +402,7 @@
 
 			//
 
-			function onWindowResize( event ) {
+			function onWindowResize() {
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
@@ -435,8 +439,8 @@
 				requestAnimationFrame( animate );
 
 				var time = Date.now() * 0.00025;
-				var ox = ( time * -0.01 * materialBg.map.repeat.x ) % 1;
-				var oy = ( time * -0.01 * materialBg.map.repeat.y ) % 1;
+				var ox = ( time * - 0.01 * materialBg.map.repeat.x ) % 1;
+				var oy = ( time * - 0.01 * materialBg.map.repeat.y ) % 1;
 
 				materialBg.map.offset.set( ox, oy );
 

examples/webgl_materials_bumpmap.html

@@ -111,7 +111,7 @@
 
 				spotLight.shadow.camera.fov = 40;
 
-				spotLight.shadow.bias = -0.005;
+				spotLight.shadow.bias = - 0.005;
 
 				//
 
@@ -126,7 +126,11 @@
 				} );
 
 				loader = new THREE.GLTFLoader();
-				loader.load( "models/gltf/LeePerrySmith/LeePerrySmith.glb", function( gltf ) { createScene( gltf.scene.children[ 0 ].geometry, 100, material ) } );
+				loader.load( "models/gltf/LeePerrySmith/LeePerrySmith.glb", function ( gltf ) {
+
+					createScene( gltf.scene.children[ 0 ].geometry, 100, material );
+
+				} );
 
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
@@ -172,7 +176,7 @@
 
 			//
 
-			function onWindowResize( event ) {
+			function onWindowResize() {
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 

examples/webgl_materials_bumpmap_skin.html

@@ -70,7 +70,7 @@
 
 			var camera, scene, renderer;
 
-			var mesh, mesh2;
+			var mesh;
 
 			var directionalLight;
 
@@ -79,15 +79,12 @@
 
 			var targetX = 0, targetY = 0;
 
-
 			var windowHalfX = window.innerWidth / 2;
 			var windowHalfY = window.innerHeight / 2;
 
-			var mapColor, mapHeight, mapSpecular;
-
 			var firstPass = true;
 
-			var composer, composerBeckmann;
+			var composerBeckmann;
 
 			init();
 			animate();
@@ -120,12 +117,12 @@
 				directionalLight.shadow.camera.near = 200;
 				directionalLight.shadow.camera.far = 1500;
 
-				directionalLight.shadow.camera.left = -500;
+				directionalLight.shadow.camera.left = - 500;
 				directionalLight.shadow.camera.right = 500;
 				directionalLight.shadow.camera.top = 500;
-				directionalLight.shadow.camera.bottom = -500;
+				directionalLight.shadow.camera.bottom = - 500;
 
-				directionalLight.shadow.bias = -0.005;
+				directionalLight.shadow.bias = - 0.005;
 
 				scene.add( directionalLight );
 
@@ -134,7 +131,7 @@
 				loader = new THREE.GLTFLoader();
 				loader.load( "models/gltf/LeePerrySmith/LeePerrySmith.glb", function ( gltf ) {
 
-					createScene( gltf.scene.children[ 0 ].geometry, 100 )
+					createScene( gltf.scene.children[ 0 ].geometry, 100 );
 
 				} );
 
@@ -252,7 +249,7 @@
 
 			//
 
-			function onWindowResize( event ) {
+			function onWindowResize() {
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 

examples/webgl_materials_channels.html

@@ -59,7 +59,7 @@
 
 			var stats;
 
-			var camera, scene, renderer, controls;
+			var camera, scene, renderer;
 
 			var params = {
 				material: 'normal',
@@ -78,8 +78,6 @@
 
 			var mesh, materialStandard, materialDepthBasic, materialDepthRGBA, materialNormal;
 
-			var pointLight, ambientLight;
-
 			var height = 500; // of camera frustum
 
 			var SCALE = 2.436143; // from original model
@@ -96,6 +94,7 @@
 				gui.add( params, 'material', [ 'standard', 'normal', 'depthBasic', 'depthRGBA' ] );
 				gui.add( params, 'camera', [ 'perspective', 'ortho' ] );
 				gui.add( params, 'side', [ 'front', 'back', 'double' ] );
+
 			}
 
 			function init() {

examples/webgl_materials_compile.html

@@ -22,7 +22,7 @@
 				text-align: center;
 				display:block;
 			}
-			
+
 			#waitScreen {
 				color: #000;
 			    position: absolute;
@@ -33,7 +33,7 @@
 			    width: 100px;
 			    height: 100px;
 			}
-			
+
 			.hide {
 				display:none;
 			}
@@ -69,21 +69,24 @@
 		var frame = new THREE.NodeFrame();
 		var teapot;
 		var controls;
-		var move = false;
 		var rtTexture, rtMaterial;
 		var meshes = [];
-		
-		document.getElementById( "preload" ).addEventListener( 'click', function() {
+
+		document.getElementById( "preload" ).addEventListener( 'click', function () {
 
 			var hash = document.location.hash.substr( 1 );
 
 			if ( hash.length === 0 ) {
-				window.location.hash = "#NoPreLoad"
+
+				window.location.hash = "#NoPreLoad";
+
 			} else {
-				window.location.hash = ""
+
+				window.location.hash = "";
+
 			}
-			
-			location.reload(true);
+
+			location.reload( true );
 
 		}, false );
 
@@ -122,15 +125,16 @@
 
 			var itemsonrow = 10;
 
-			for (var i = 0 ; i<  itemsonrow * itemsonrow; i ++ ){
-				
+			for ( var i = 0; i < itemsonrow * itemsonrow; i ++ ) {
+
 				var mesh = new THREE.Mesh( teapot );
-				
-				mesh.position.x = 50 *(i%itemsonrow) -50*itemsonrow/2;
-				mesh.position.z = 50*Math.floor(i/itemsonrow)-150; 
-				updateMaterial(mesh);
+
+				mesh.position.x = 50 * ( i % itemsonrow ) - 50 * itemsonrow / 2;
+				mesh.position.z = 50 * Math.floor( i / itemsonrow ) - 150;
+				updateMaterial( mesh );
 				scene.add( mesh );
-				meshes.push(mesh); 
+				meshes.push( mesh );
+
 			}
 
 			window.addEventListener( 'resize', onWindowResize, false );
@@ -139,24 +143,22 @@
 
 			if ( hash.length === 0 ) {
 
-				renderer.compile(scene,camera);
-				
+				renderer.compile( scene, camera );
+
 			}
-			
-			document.getElementById("waitScreen").className = "hide";
-			
-			setTimeout(function() {
-				
+
+			document.getElementById( "waitScreen" ).className = "hide";
+
+			setTimeout( function () {
+
 				onWindowResize();
 				animate();
-				
-			}, 1);
 
-		}
+			}, 1 );
 
-		function updateMaterial(mesh) {
+		}
 
-			move = false;
+		function updateMaterial( mesh ) {
 
 			if ( mesh.material ) mesh.material.dispose();
 
@@ -205,9 +207,9 @@
 
 			mtl.color = new THREE.ColorNode( 0 );
 			mtl.emissive = cos;
-			
-			
-			var transformer = new THREE.ExpressionNode( "position + 0.0 * " + Math.random(), "vec3", [ ]);
+
+
+			var transformer = new THREE.ExpressionNode( "position + 0.0 * " + Math.random(), "vec3", [ ] );
 			mtl.transform = transformer;
 
 			// build shader ( ignore auto build )
@@ -237,9 +239,9 @@
 
 			frame.update( delta );
 
-			for (var i = 0; i < meshes.length; i++ ){
+			for ( var i = 0; i < meshes.length; i ++ ) {
 
-				var mesh = meshes[i];
+				var mesh = meshes[ i ];
 
 				frame.updateNode( mesh.material );
 

examples/webgl_materials_cubemap.html

@@ -55,8 +55,6 @@
 
 			var camera, scene, renderer;
 
-			var mesh, geometry;
-
 			var pointLight;
 
 			init();
@@ -81,10 +79,10 @@
 				var path = "textures/cube/SwedishRoyalCastle/";
 				var format = '.jpg';
 				var urls = [
-						path + 'px' + format, path + 'nx' + format,
-						path + 'py' + format, path + 'ny' + format,
-						path + 'pz' + format, path + 'nz' + format
-					];
+					path + 'px' + format, path + 'nx' + format,
+					path + 'py' + format, path + 'ny' + format,
+					path + 'pz' + format, path + 'nz' + format
+				];
 
 				var reflectionCube = new THREE.CubeTextureLoader().load( urls );
 				reflectionCube.format = THREE.RGBFormat;
@@ -114,10 +112,10 @@
 				objLoader.setPath( 'models/obj/walt/' );
 				objLoader.load( 'WaltHead.obj', function ( object ) {
 
-					var head = object.children[0];
+					var head = object.children[ 0 ];
 
 					head.scale.multiplyScalar( 15 );
-					head.position.y = -500;
+					head.position.y = - 500;
 					head.material = cubeMaterial1;
 
 					var head2 = head.clone();
@@ -159,6 +157,7 @@
 
 				requestAnimationFrame( animate );
 				render();
+
 			}
 
 			function render() {

examples/webgl_materials_cubemap_balls_reflection.html

@@ -24,9 +24,7 @@
 				z-index:1000;
 			}
 
-			a {
-				color: #ffffff;
-			}
+			a { color: #ffffff; }
 
 			#webglmessage a { color:#da0 }
 		</style>
@@ -51,11 +49,8 @@
 
 			var camera, scene, renderer;
 
-			var mesh, lightMesh, geometry;
 			var spheres = [];
 
-			var directionalLight, pointLight;
-
 			var mouseX = 0;
 			var mouseY = 0;
 

examples/webgl_materials_cubemap_balls_refraction.html

@@ -24,9 +24,7 @@
 				z-index:1000;
 			}
 
-			a {
-				color: #ffffff;
-			}
+			a { color: #ffffff; }
 
 			#webglmessage a { color:#da0 }
 		</style>
@@ -51,11 +49,8 @@
 
 			var camera, scene, renderer;
 
-			var mesh, lightMesh, geometry;
 			var spheres = [];
 
-			var directionalLight, pointLight;
-
 			var mouseX = 0, mouseY = 0;
 
 			var windowHalfX = window.innerWidth / 2;
@@ -125,7 +120,7 @@
 
 			}
 
-			function onDocumentMouseMove(event) {
+			function onDocumentMouseMove( event ) {
 
 				mouseX = ( event.clientX - windowHalfX ) * 10;
 				mouseY = ( event.clientY - windowHalfY ) * 10;

examples/webgl_materials_cubemap_dynamic.html

@@ -40,6 +40,8 @@
 
 			var count = 0, cubeCamera1, cubeCamera2;
 
+			var onPointerDownPointerX, onPointerDownPointerY, onPointerDownLon, onPointerDownLat;
+
 			var lon = 0, lat = 0;
 			var phi = 0, theta = 0;
 
@@ -102,7 +104,7 @@
 
 			}
 
-			function onWindowResized( event ) {
+			function onWindowResized() {
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
@@ -133,7 +135,7 @@
 
 			}
 
-			function onDocumentMouseUp( event ) {
+			function onDocumentMouseUp() {
 
 				document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
 				document.removeEventListener( 'mouseup', onDocumentMouseUp, false );

examples/webgl_materials_cubemap_refraction.html

@@ -19,8 +19,18 @@
 
 			canvas { pointer-events:none; z-index:10; }
 
-			#d { text-align:center; margin:1em auto -9.5em; z-index:200; position:relative; display:block;
-				background:rgba(0,0,0,0.5); padding:0.5em; width:400px; border-radius:15px; -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.5) }
+			#d {
+				text-align:center;
+				margin:1em auto -9.5em;
+				z-index:200;
+				position:relative;
+				display:block;
+				background:rgba(0,0,0,0.5);
+				padding:0.5em; width:400px;
+				border-radius:15px;
+				-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
+				box-shadow: 0px 0px 10px rgba(0,0,0,0.5)
+			}
 
 			#webglmessage { margin-top:15em !important }
 		</style>
@@ -49,17 +59,11 @@
 
 			}
 
-			var FLOOR = -250;
-
 			var container, stats;
 
 			var camera, scene, renderer;
 
-			var mesh, zmesh, geometry;
-
-			var loader;
-
-			var directionalLight, pointLight;
+			var pointLight;
 
 			var mouseX = 0, mouseY = 0;
 
@@ -71,11 +75,11 @@
 
 			function init() {
 
-				container = document.createElement('div');
-				document.body.appendChild(container);
+				container = document.createElement( 'div' );
+				document.body.appendChild( container );
 
 				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 100000 );
-				camera.position.z =  - 4000;
+				camera.position.z = - 4000;
 
 				//
 
@@ -125,10 +129,14 @@
 				stats = new Stats();
 				container.appendChild( stats.dom );
 
-				loader = new THREE.PLYLoader();
-				loader.load( 'models/ply/binary/Lucy100k.ply', function( geometry ) { createScene( geometry, cubeMaterial1, cubeMaterial2, cubeMaterial3 ) } );
+				var loader = new THREE.PLYLoader();
+				loader.load( 'models/ply/binary/Lucy100k.ply', function ( geometry ) {
+
+					createScene( geometry, cubeMaterial1, cubeMaterial2, cubeMaterial3 );
+
+				} );
 
-				document.addEventListener('mousemove', onDocumentMouseMove, false);
+				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
 				//
 
@@ -170,7 +178,7 @@
 
 			}
 
-			function onDocumentMouseMove(event) {
+			function onDocumentMouseMove( event ) {
 
 				mouseX = ( event.clientX - windowHalfX ) * 4;
 				mouseY = ( event.clientY - windowHalfY ) * 4;
@@ -190,7 +198,7 @@
 
 			function render() {
 
-				var timer = -0.0002 * Date.now();
+				var timer = - 0.0002 * Date.now();
 
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;

examples/webgl_materials_curvature.html

@@ -23,10 +23,7 @@
 				padding: 5px;
 			}
 
-			a {
-
-				color: #ffffff;
-			}
+			a { color: #ffffff; }
 
 			#webglmessage a { color:#da0 }
 		</style>
@@ -79,12 +76,8 @@
 
 			}
 
-			var container;
-
 			var camera, scene, renderer;
 
-			var controls;
-
 			var ninjaMeshRaw, curvatureAttribute, bufferGeo;
 
 			init();
@@ -96,12 +89,12 @@
 				var sum = 0;
 				var length = 0;
 
-				Object.keys( dict ).forEach( function( key ) {
+				Object.keys( dict ).forEach( function ( key ) {
 
 					sum += dict[ key ];
 					length ++;
 
-				});
+				} );
 
 				return sum / length;
 
@@ -110,16 +103,16 @@
 			//clamp a number between min and max
 			function clamp( number, min, max ) {
 
-			  return Math.max( min, Math.min( number, max ) );
+				return Math.max( min, Math.min( number, max ) );
 
 			}
 
 			//filter the curvature array to only show concave values
 			function filterConcave( curvature ) {
 
-				for ( var i = 0; i < curvature.length; i++ ) {
+				for ( var i = 0; i < curvature.length; i ++ ) {
 
-					curvature[ i ] = Math.abs( clamp( curvature[ i ], -1, 0 ) );
+					curvature[ i ] = Math.abs( clamp( curvature[ i ], - 1, 0 ) );
 
 				}
 
@@ -128,7 +121,7 @@
 			//filter the curvature array to only show convex values
 			function filterConvex( curvature ) {
 
-				for ( var i = 0; i < curvature.length; i++ ) {
+				for ( var i = 0; i < curvature.length; i ++ ) {
 
 					curvature[ i ] = clamp( curvature[ i ], 0, 1 );
 
@@ -139,7 +132,7 @@
 			//filter the curvature array to show both the concave and convex values
 			function filterBoth( curvature ) {
 
-				for ( var i = 0; i < curvature.length; i++ ) {
+				for ( var i = 0; i < curvature.length; i ++ ) {
 
 					curvature[ i ] = Math.abs( curvature[ i ] );
 
@@ -154,11 +147,11 @@
 
 				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
 
-				camera.position.x = -23;
+				camera.position.x = - 23;
 				camera.position.y = 2;
 				camera.position.z = 24;
 
-				controls = new THREE.OrbitControls( camera );
+				var controls = new THREE.OrbitControls( camera );
 
 				renderer = new THREE.WebGLRenderer();
 				renderer.setSize( window.innerWidth, window.innerHeight );
@@ -169,25 +162,28 @@
 				var loader = new THREE.OBJLoader();
 				//load the obj
 				loader.load( 'models/obj/ninja/ninjaHead_Low.obj', function ( object ) {
+
 					object.traverse( function ( child ) {
+
 						if ( child.isMesh ) {
 
 							bufferGeo = child.geometry;
 							bufferGeo.center();
-							var dict= {};
+							var dict = {};
+
+							for ( var i = 0; i < bufferGeo.attributes.position.count; i += 3 ) {
 
-							for ( var i = 0; i < bufferGeo.attributes.position.count; i+=3 ) {
 								//create a dictionary of every position, and its neighboring positions
 								var array = bufferGeo.attributes.position.array;
 								var normArray = bufferGeo.attributes.normal.array;
 
-								var posA = new THREE.Vector3(array[ 3 * i ], array[ 3 * i + 1 ], array[ 3 * i + 2 ]);
-								var posB = new THREE.Vector3(array[ 3 * ( i + 1 ) ], array[ 3 * ( i + 1 ) + 1 ], array[ 3 * ( i + 1 ) + 2 ]);
-								var posC = new THREE.Vector3(array[ 3 * ( i + 2 ) ], array[ 3 * ( i + 2 ) + 1 ], array[ 3 * ( i + 2 ) + 2 ]);
+								var posA = new THREE.Vector3( array[ 3 * i ], array[ 3 * i + 1 ], array[ 3 * i + 2 ] );
+								var posB = new THREE.Vector3( array[ 3 * ( i + 1 ) ], array[ 3 * ( i + 1 ) + 1 ], array[ 3 * ( i + 1 ) + 2 ] );
+								var posC = new THREE.Vector3( array[ 3 * ( i + 2 ) ], array[ 3 * ( i + 2 ) + 1 ], array[ 3 * ( i + 2 ) + 2 ] );
 
-								var normA = new THREE.Vector3(normArray[ 3 * i ], normArray[ 3 * i + 1 ], normArray[ 3 * i + 2 ]).normalize();
-								var normB = new THREE.Vector3(normArray[ 3 * ( i + 1 ) ], normArray[ 3 * ( i + 1 ) + 1 ], normArray[ 3 * ( i + 1 ) + 2 ]).normalize();
-								var normC = new THREE.Vector3(normArray[ 3 * ( i + 2 ) ], normArray[ 3 * ( i + 2 ) + 1 ], normArray[ 3 * ( i + 2 ) + 2 ]).normalize();
+								var normA = new THREE.Vector3( normArray[ 3 * i ], normArray[ 3 * i + 1 ], normArray[ 3 * i + 2 ] ).normalize();
+								var normB = new THREE.Vector3( normArray[ 3 * ( i + 1 ) ], normArray[ 3 * ( i + 1 ) + 1 ], normArray[ 3 * ( i + 1 ) + 2 ] ).normalize();
+								var normC = new THREE.Vector3( normArray[ 3 * ( i + 2 ) ], normArray[ 3 * ( i + 2 ) + 1 ], normArray[ 3 * ( i + 2 ) + 2 ] ).normalize();
 
 								var strA = posA.toArray().toString();
 								var strB = posB.toArray().toString();
@@ -201,18 +197,24 @@
 								var b2c = normB.dot( posB_C.normalize() );
 								var c2a = normC.dot( posC_A.normalize() );
 
-								var a2b = -normA.dot( posB_A.normalize() );
-								var c2b = -normC.dot( posB_C.normalize() );
-								var a2c = -normA.dot( posC_A.normalize() );
+								var a2b = - normA.dot( posB_A.normalize() );
+								var c2b = - normC.dot( posB_C.normalize() );
+								var a2c = - normA.dot( posC_A.normalize() );
+
+								if ( dict[ strA ] === undefined ) {
 
-								if (dict[ strA ] === undefined ) {
 									dict[ strA ] = {};
+
 								}
-								if (dict[ strB ] === undefined ) {
+								if ( dict[ strB ] === undefined ) {
+
 									dict[ strB ] = {};
+
 								}
-								if (dict[ strC ] === undefined ) {
+								if ( dict[ strC ] === undefined ) {
+
 									dict[ strC ] = {};
+
 								}
 
 								dict[ strA ][ strB ] = a2b;
@@ -227,70 +229,75 @@
 							var curvatureDict = {};
 							var min = 10, max = 0;
 
-							Object.keys( dict ).forEach( function( key ) {
+							Object.keys( dict ).forEach( function ( key ) {
 
 								curvatureDict[ key ] = average( dict[ key ] );
 
-							});
+							} );
 
 							//smoothing
-							var smoothCurvatureDict  = Object.create(curvatureDict);
+							var smoothCurvatureDict = Object.create( curvatureDict );
 
-							Object.keys( dict ).forEach( function( key ) {
+							Object.keys( dict ).forEach( function ( key ) {
 
 								var count = 0;
 								var sum = 0;
-								Object.keys( dict[ key ] ).forEach( function( key2 ) {
+								Object.keys( dict[ key ] ).forEach( function ( key2 ) {
 
 									sum += smoothCurvatureDict[ key2 ];
 									count ++;
 
-								});
-								smoothCurvatureDict[key] = sum / count;
+								} );
+								smoothCurvatureDict[ key ] = sum / count;
 
-							});
+							} );
 
 							curvatureDict = smoothCurvatureDict;
 
 							// fit values to 0 and 1
-							Object.keys( curvatureDict ).forEach( function( key ) {
+							Object.keys( curvatureDict ).forEach( function ( key ) {
 
 								var val = Math.abs( curvatureDict[ key ] );
 								if ( val < min ) min = val;
 								if ( val > max ) max = val;
 
-							});
+							} );
 
 							var range = ( max - min );
 
-							Object.keys( curvatureDict ).forEach( function( key ) {
+							Object.keys( curvatureDict ).forEach( function ( key ) {
 
 								var val = Math.abs( curvatureDict[ key ] );
 								if ( curvatureDict[ key ] < 0 ) {
-									curvatureDict[ key ] = (min - val) / range
+
+									curvatureDict[ key ] = ( min - val ) / range;
+
 								} else {
-									curvatureDict[ key ] = (val - min) / range;
+
+									curvatureDict[ key ] = ( val - min ) / range;
+
 								}
 
-							});
+							} );
 
 							curvatureAttribute = new Float32Array( bufferGeo.attributes.position.count );
 
-							for ( var i = 0; i < bufferGeo.attributes.position.count; i++ ) {
+							for ( var i = 0; i < bufferGeo.attributes.position.count; i ++ ) {
 
 								array = bufferGeo.attributes.position.array;
 								var pos = new THREE.Vector3( array[ 3 * i ], array[ 3 * i + 1 ], array[ 3 * i + 2 ] );
 								var str = pos.toArray().toString();
-								curvatureAttribute[i] = curvatureDict[ str ];
+								curvatureAttribute[ i ] = curvatureDict[ str ];
+
 							}
 
 							bufferGeo.addAttribute( 'curvature', new THREE.BufferAttribute( curvatureAttribute, 1 ) );
 
 							//starting filter is to show both concave and convex
 							var curvatureFiltered = new Float32Array( curvatureAttribute );
-							filterBoth(curvatureFiltered);
+							filterBoth( curvatureFiltered );
 
-							var materialRaw = new THREE.ShaderMaterial ({
+							var materialRaw = new THREE.ShaderMaterial( {
 
 								vertexShader: document.getElementById( 'vertexShaderRaw' ).textContent,
 								fragmentShader: document.getElementById( 'fragmentShaderRaw' ).textContent
@@ -300,6 +307,7 @@
 							ninjaMeshRaw = new THREE.Mesh( bufferGeo, materialRaw );
 
 						}
+
 					} );
 
 					scene.add( ninjaMeshRaw );
@@ -313,7 +321,7 @@
 					filterConvex: function () {
 
 						var curvatureFiltered = new Float32Array( curvatureAttribute );
-						filterConvex(curvatureFiltered);
+						filterConvex( curvatureFiltered );
 						bufferGeo.attributes.curvature.array = curvatureFiltered;
 						bufferGeo.attributes.curvature.needsUpdate = true;
 
@@ -322,7 +330,7 @@
 					filterConcave: function () {
 
 						var curvatureFiltered = new Float32Array( curvatureAttribute );
-						filterConcave(curvatureFiltered);
+						filterConcave( curvatureFiltered );
 						bufferGeo.attributes.curvature.array = curvatureFiltered;
 						bufferGeo.attributes.curvature.needsUpdate = true;
 
@@ -331,7 +339,7 @@
 					filterBoth: function () {
 
 						var curvatureFiltered = new Float32Array( curvatureAttribute );
-						filterBoth(curvatureFiltered);
+						filterBoth( curvatureFiltered );
 						bufferGeo.attributes.curvature.array = curvatureFiltered;
 						bufferGeo.attributes.curvature.needsUpdate = true;
 
@@ -352,7 +360,7 @@
 
 			}
 
-			function onWindowResize( event ) {
+			function onWindowResize() {
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				camera.aspect = window.innerWidth / window.innerHeight;
@@ -370,7 +378,7 @@
 
 			function render() {
 
-				renderer.render(scene, camera);
+				renderer.render( scene, camera );
 
 			}
 

examples/webgl_materials_displacementmap.html

@@ -74,12 +74,6 @@
 
 			var pointLight, ambientLight;
 
-			var mouseX = 0;
-			var mouseY = 0;
-
-			var windowHalfX = window.innerWidth / 2;
-			var windowHalfY = window.innerHeight / 2;
-
 			var height = 500; // of camera frustum
 
 			var r = 0.0;
@@ -93,43 +87,43 @@
 
 				var gui = new dat.GUI();
 				//var gui = gui.addFolder( "Material" );
-				gui.add( settings, "metalness" ).min( 0 ).max( 1 ).onChange( function( value ) {
+				gui.add( settings, "metalness" ).min( 0 ).max( 1 ).onChange( function ( value ) {
 
 					material.metalness = value;
 
 				} );
 
-				gui.add( settings, "roughness" ).min( 0 ).max( 1 ).onChange( function( value ) {
+				gui.add( settings, "roughness" ).min( 0 ).max( 1 ).onChange( function ( value ) {
 
 					material.roughness = value;
 
 				} );
 
-				gui.add( settings, "aoMapIntensity" ).min( 0 ).max( 1 ).onChange( function( value ) {
+				gui.add( settings, "aoMapIntensity" ).min( 0 ).max( 1 ).onChange( function ( value ) {
 
 					material.aoMapIntensity = value;
 
 				} );
 
-				gui.add( settings, "ambientIntensity" ).min( 0 ).max( 1 ).onChange( function( value ) {
+				gui.add( settings, "ambientIntensity" ).min( 0 ).max( 1 ).onChange( function ( value ) {
 
 					ambientLight.intensity = value;
 
 				} );
 
-				gui.add( settings, "envMapIntensity" ).min( 0 ).max( 3 ).onChange( function( value ) {
+				gui.add( settings, "envMapIntensity" ).min( 0 ).max( 3 ).onChange( function ( value ) {
 
 					material.envMapIntensity = value;
 
 				} );
 
-				gui.add( settings, "displacementScale" ).min( 0 ).max( 3.0 ).onChange( function( value ) {
+				gui.add( settings, "displacementScale" ).min( 0 ).max( 3.0 ).onChange( function ( value ) {
 
 					material.displacementScale = value;
 
 				} );
 
-				gui.add( settings, "normalScale" ).min( - 1 ).max( 1 ).onChange( function( value ) {
+				gui.add( settings, "normalScale" ).min( - 1 ).max( 1 ).onChange( function ( value ) {
 
 					material.normalScale.set( 1, - 1 ).multiplyScalar( value );
 
@@ -185,10 +179,10 @@
 				var path = "textures/cube/SwedishRoyalCastle/";
 				var format = '.jpg';
 				var urls = [
-						path + 'px' + format, path + 'nx' + format,
-						path + 'py' + format, path + 'ny' + format,
-						path + 'pz' + format, path + 'nz' + format
-					];
+					path + 'px' + format, path + 'nx' + format,
+					path + 'py' + format, path + 'ny' + format,
+					path + 'pz' + format, path + 'nz' + format
+				];
 
 				var reflectionCube = new THREE.CubeTextureLoader().load( urls );
 

examples/webgl_materials_envmaps.html

@@ -43,7 +43,6 @@
 			var textureEquirec, textureCube, textureSphere;
 			var cubeMesh, sphereMesh;
 			var sphereMaterial;
-			var refract;
 
 			init();
 			animate();
@@ -141,21 +140,27 @@
 
 				var params = {
 					Cube: function () {
+
 						cubeMesh.material = cubeMaterial;
 						cubeMesh.visible = true;
 						sphereMaterial.envMap = textureCube;
 						sphereMaterial.needsUpdate = true;
+
 					},
 					Equirectangular: function () {
+
 						cubeMesh.material = equirectMaterial;
 						cubeMesh.visible = true;
 						sphereMaterial.envMap = textureEquirec;
 						sphereMaterial.needsUpdate = true;
+
 					},
 					Spherical: function () {
-							cubeMesh.visible = false;
+
+						cubeMesh.visible = false;
 						sphereMaterial.envMap = textureSphere;
 						sphereMaterial.needsUpdate = true;
+
 					},
 					Refraction: false
 				};
@@ -164,7 +169,7 @@
 				gui.add( params, 'Cube' );
 				gui.add( params, 'Equirectangular' );
 				gui.add( params, 'Spherical' );
-				gui.add( params, 'Refraction' ).onChange( function( value ) {
+				gui.add( params, 'Refraction' ).onChange( function ( value ) {
 
 					if ( value ) {
 

examples/webgl_materials_envmaps_hdr.html

@@ -103,12 +103,14 @@
 				planeMesh1.rotation.x = - Math.PI * 0.5;
 				scene.add( planeMesh1 );
 
-				var genCubeUrls = function( prefix, postfix ) {
+				var genCubeUrls = function ( prefix, postfix ) {
+
 					return [
 						prefix + 'px' + postfix, prefix + 'nx' + postfix,
 						prefix + 'py' + postfix, prefix + 'ny' + postfix,
 						prefix + 'pz' + postfix, prefix + 'nz' + postfix
 					];
+
 				};
 
 				var hdrUrls = genCubeUrls( './textures/cube/pisaHDR/', '.hdr' );
@@ -225,7 +227,7 @@
 
 					var newEnvMap = standardMaterial.envMap;
 
-					switch( params.envMap ) {
+					switch ( params.envMap ) {
 
 						case 'LDR': newEnvMap = ldrCubeRenderTarget ? ldrCubeRenderTarget.texture : null; break;
 						case 'HDR': newEnvMap = hdrCubeRenderTarget ? hdrCubeRenderTarget.texture : null; break;

examples/webgl_materials_lightmap.html

@@ -13,7 +13,6 @@
 				font-family:georgia;
 				text-align:center;
 			}
-			h1 { }
 			a { color:skyblue }
 		</style>
 	</head>
@@ -67,8 +66,6 @@
 			var container, stats;
 			var camera, scene, renderer;
 
-			var clock = new THREE.Clock();
-
 			init();
 			animate();
 
@@ -97,7 +94,7 @@
 				var light = new THREE.DirectionalLight( 0xaabbff, 0.3 );
 				light.position.x = 300;
 				light.position.y = 250;
-				light.position.z = -500;
+				light.position.z = - 500;
 				scene.add( light );
 
 				// SKYDOME
@@ -105,10 +102,10 @@
 				var vertexShader = document.getElementById( 'vertexShader' ).textContent;
 				var fragmentShader = document.getElementById( 'fragmentShader' ).textContent;
 				var uniforms = {
-					topColor: 	 { type: "c", value: new THREE.Color( 0x0077ff ) },
+					topColor: { type: "c", value: new THREE.Color( 0x0077ff ) },
 					bottomColor: { type: "c", value: new THREE.Color( 0xffffff ) },
-					offset:		 { type: "f", value: 400 },
-					exponent:	 { type: "f", value: 0.6 }
+					offset: { type: "f", value: 400 },
+					exponent: { type: "f", value: 0.6 }
 				};
 				uniforms.topColor.value.copy( light.color );
 

examples/webgl_materials_matcap.html

@@ -24,7 +24,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>
@@ -58,9 +58,9 @@
 			var image;
 
 			var API = {
-				color : 0xffffff,
-				exposure : 1.0
-			}
+				color: 0xffffff,
+				exposure: 1.0
+			};
 
 			init();
 
@@ -96,7 +96,7 @@
 				// matcap
 				var loader = new THREE.TextureLoader( manager );
 
-				var matcap = loader.load( 'textures/matcaps/matcap-porcelain-white.jpg', function( texture ) {
+				var matcap = loader.load( 'textures/matcaps/matcap-porcelain-white.jpg', function () {
 
 					matcap.encoding = THREE.sRGBEncoding;
 
@@ -125,10 +125,18 @@
 
 				gui.addColor( API, 'color' )
 					.listen()
-					.onChange( function() { mesh.material.color.set( API.color ); render(); } );
+					.onChange( function () {
+
+						mesh.material.color.set( API.color ); render();
+
+					} );
 
 				gui.add( API, 'exposure', 0, 2 )
-					.onChange( function() { renderer.toneMappingExposure = API.exposure; render(); } )
+					.onChange( function () {
+
+						renderer.toneMappingExposure = API.exposure; render();
+
+					} );
 
 				gui.domElement.style.webkitUserSelect = 'none';
 
@@ -150,7 +158,7 @@
 				image.src = 'textures/matcaps/matcap-porcelain-white.jpg';
 				div.appendChild( image );
 
-			    window.addEventListener( 'resize', onWindowResize, false );
+				window.addEventListener( 'resize', onWindowResize, false );
 
 			}
 

examples/webgl_materials_modified.html

@@ -14,9 +14,7 @@
 				overflow:hidden;
 			}
 
-			a {
-				color: #ffffff;
-			}
+			a { color: #ffffff; }
 
 			#info {
 				position: absolute;
@@ -59,7 +57,6 @@
 			}
 
 			var camera, scene, renderer, stats;
-			var controls;
 
 			var materialShader;
 
@@ -76,8 +73,6 @@
 				var material = new THREE.MeshNormalMaterial();
 				material.onBeforeCompile = function ( shader ) {
 
-					// console.log( shader )
-
 					shader.uniforms.time = { value: 0 };
 
 					shader.vertexShader = 'uniform float time;\n' + shader.vertexShader;
@@ -98,7 +93,7 @@
 				};
 
 				var loader = new THREE.GLTFLoader();
-				loader.load( 'models/gltf/LeePerrySmith/LeePerrySmith.glb', function( gltf ) {
+				loader.load( 'models/gltf/LeePerrySmith/LeePerrySmith.glb', function ( gltf ) {
 
 					var mesh = new THREE.Mesh( gltf.scene.children[ 0 ].geometry, material );
 					mesh.position.y = - 50;
@@ -112,7 +107,7 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
 
-				controls = new THREE.OrbitControls( camera, renderer.domElement );
+				var controls = new THREE.OrbitControls( camera, renderer.domElement );
 
 				//
 
@@ -127,7 +122,7 @@
 
 			//
 
-			function onWindowResize( event ) {
+			function onWindowResize() {
 
 				var width = window.innerWidth;
 				var height = window.innerHeight;

examples/webgl_materials_nodes.html

@@ -1989,7 +1989,7 @@
 						mtl.position.keywords[ "speed" ] = speed;
 
 						// add global keyword ( variable or const )
-						THREE.NodeLib.addKeyword( 'myCustomUv', function ( builder ) {
+						THREE.NodeLib.addKeyword( 'myCustomUv', function () {
 
 							return new THREE.ReflectNode();
 
@@ -2022,7 +2022,7 @@
 						keywordsexample.keywords[ "myAlpha" ] = new THREE.ConstNode( "float myAlpha .05" );
 
 						// add global keyword ( const only )
-						THREE.NodeLib.addKeyword( 'myUV', function ( builder ) {
+						THREE.NodeLib.addKeyword( 'myUV', function () {
 
 							return new THREE.UVNode();
 
@@ -2290,7 +2290,7 @@
 
 						// GUI
 
-						addGui( 'click to reset', false, function ( val ) {
+						addGui( 'click to reset', false, function () {
 
 							// render a single time
 

examples/webgl_materials_normalmap.html

@@ -14,9 +14,7 @@
 				overflow:hidden;
 			}
 
-			a {
-				color: #ffffff;
-			}
+			a { color: #ffffff; }
 
 			#info {
 				position: absolute;
@@ -36,7 +34,6 @@
 
 			#vt { display:none }
 			#vt, #vt a { color:orange; }
-			.code { }
 
 		</style>
 	</head>
@@ -120,7 +117,7 @@
 				scene.add( pointLight );
 
 				directionalLight = new THREE.DirectionalLight( 0xffffff );
-				directionalLight.position.set( 1, -0.5, -1 );
+				directionalLight.position.set( 1, - 0.5, - 1 );
 				scene.add( directionalLight );
 
 				var textureLoader = new THREE.TextureLoader();
@@ -136,7 +133,11 @@
 				} );
 
 				loader = new THREE.GLTFLoader();
-				loader.load( "models/gltf/LeePerrySmith/LeePerrySmith.glb", function( gltf ) { createScene( gltf.scene.children[ 0 ].geometry, 100, material ) } );
+				loader.load( "models/gltf/LeePerrySmith/LeePerrySmith.glb", function ( gltf ) {
+
+					createScene( gltf.scene.children[ 0 ].geometry, 100, material );
+
+				} );
 
 				renderer = new THREE.WebGLRenderer();
 				renderer.setSize( window.innerWidth, window.innerHeight );
@@ -199,7 +200,7 @@
 
 			//
 
-			function onWindowResize( event ) {
+			function onWindowResize() {
 
 				var width = window.innerWidth;
 				var height = window.innerHeight;

examples/webgl_materials_normalmap_object_space.html

@@ -53,9 +53,7 @@
 
 			}
 
-			var mesh, renderer, scene, camera;
-
-			var obj;
+			var renderer, scene, camera;
 
 			init();
 
@@ -127,7 +125,7 @@
 				} );
 
 
-			    window.addEventListener( 'resize', onWindowResize, false );
+				window.addEventListener( 'resize', onWindowResize, false );
 
 			}
 

examples/webgl_materials_parallaxmap.html

@@ -142,12 +142,12 @@
 
 				var uniforms = material.uniforms;
 
-				uniforms[ 'parallaxScale' ].value = -1.0 * effectController.scale;
+				uniforms[ 'parallaxScale' ].value = - 1.0 * effectController.scale;
 				uniforms[ 'parallaxMinLayers' ].value = effectController.minLayers;
 				uniforms[ 'parallaxMaxLayers' ].value = effectController.maxLayers;
 
 				material.defines = {};
-				material.defines[THREE.ParallaxShader.modes[effectController.mode]] = '';
+				material.defines[ THREE.ParallaxShader.modes[ effectController.mode ] ] = '';
 				material.needsUpdate = true;
 
 			}
@@ -188,7 +188,7 @@
 				renderer.render( scene, camera );
 
 			}
-			
+
 		</script>
 
 	</body>

examples/webgl_materials_reflectivity.html

@@ -69,9 +69,7 @@
 				exposure: 1.0,
 				gemColor: 'Green'
 			};
-			var camera, scene, renderer, controls, objects = [];
-			var hdrCubeMap;
-			var composer;
+			var camera, scene, renderer, objects = [];
 			var gemBackMaterial, gemFrontMaterial;
 			var hdrCubeRenderTarget;
 
@@ -84,7 +82,7 @@
 				document.body.appendChild( container );
 
 				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 2000 );
-				camera.position.set( 0.0, -10, 20 * 3.5 );
+				camera.position.set( 0.0, - 10, 20 * 3.5 );
 
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0x000000 );
@@ -148,13 +146,15 @@
 
 				} );
 
-				var genCubeUrls = function( prefix, postfix ) {
+				var genCubeUrls = function ( prefix, postfix ) {
+
 					return [
 						prefix + 'px' + postfix, prefix + 'nx' + postfix,
 						prefix + 'py' + postfix, prefix + 'ny' + postfix,
 						prefix + 'pz' + postfix, prefix + 'nz' + postfix
 					];
-				};
+
+	};
 
 				var hdrUrls = genCubeUrls( "./textures/cube/pisaHDR/", ".hdr" );
 				new THREE.HDRCubeTextureLoader().load( THREE.UnsignedByteType, hdrUrls, function ( hdrCubeMap ) {
@@ -187,11 +187,11 @@
 				scene.add( pointLight1 );
 
 				var pointLight2 = new THREE.PointLight( 0xffffff );
-				pointLight2.position.set( -150, 0, 0 );
+				pointLight2.position.set( - 150, 0, 0 );
 				scene.add( pointLight2 );
 
 				var pointLight3 = new THREE.PointLight( 0xffffff );
-				pointLight3.position.set( 0, -10, -150 );
+				pointLight3.position.set( 0, - 10, - 150 );
 				scene.add( pointLight3 );
 
 				var pointLight4 = new THREE.PointLight( 0xffffff );
@@ -209,7 +209,7 @@
 				stats = new Stats();
 				container.appendChild( stats.dom );
 
-				controls = new THREE.OrbitControls( camera, renderer.domElement );
+				var controls = new THREE.OrbitControls( camera, renderer.domElement );
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
@@ -254,13 +254,15 @@
 					gemFrontMaterial.reflectivity = gemBackMaterial.reflectivity = params.reflectivity;
 
 					var newColor = gemBackMaterial.color;
-					switch( params.gemColor ) {
+					switch ( params.gemColor ) {
+
 						case 'Blue': newColor = new THREE.Color( 0x000088 ); break;
 						case 'Red': newColor = new THREE.Color( 0x880000 ); break;
 						case 'Green': newColor = new THREE.Color( 0x008800 ); break;
-						case 'White': newColor =  new THREE.Color( 0x888888 ); break;
-						case 'Black': newColor =  new THREE.Color( 0x0f0f0f ); break;
-					}
+						case 'White': newColor = new THREE.Color( 0x888888 ); break;
+						case 'Black': newColor = new THREE.Color( 0x0f0f0f ); break;
+
+		}
 					gemBackMaterial.color = gemFrontMaterial.color = newColor;
 
 
@@ -270,14 +272,16 @@
 
 				camera.lookAt( scene.position );
 
-				if( params.autoRotate ) {
+				if ( params.autoRotate ) {
+
 					for ( var i = 0, l = objects.length; i < l; i ++ ) {
 
 						var object = objects[ i ];
 						object.rotation.y += 0.005;
 
 					}
-				}
+
+	}
 
 				renderer.render( scene, camera );
 

examples/webgl_materials_shaders_fresnel.html

@@ -52,11 +52,8 @@
 
 			var camera, scene, renderer;
 
-			var mesh, zmesh, lightMesh, geometry;
 			var spheres = [];
 
-			var directionalLight, pointLight;
-
 			var mouseX = 0, mouseY = 0;
 
 			var windowHalfX = window.innerWidth / 2;
@@ -80,10 +77,10 @@
 				var path = "textures/cube/Park2/";
 				var format = '.jpg';
 				var urls = [
-						path + 'posx' + format, path + 'negx' + format,
-						path + 'posy' + format, path + 'negy' + format,
-						path + 'posz' + format, path + 'negz' + format
-					];
+					path + 'posx' + format, path + 'negx' + format,
+					path + 'posy' + format, path + 'negy' + format,
+					path + 'posz' + format, path + 'negz' + format
+				];
 
 				var textureCube = new THREE.CubeTextureLoader().load( urls );
 				textureCube.format = THREE.RGBFormat;

examples/webgl_materials_skin.html

@@ -78,7 +78,7 @@
 
 			var composer, composerUV1, composerUV2, composerUV3, composerBeckmann;
 
-			var directionalLight, pointLight, ambientLight;
+			var directionalLight;
 
 			var mouseX = 0, mouseY = 0;
 			var targetX = 0, targetY = 0;
@@ -109,12 +109,12 @@
 				scene.add( directionalLight );
 
 				directionalLight = new THREE.DirectionalLight( 0xddddff, 0.5 );
-				directionalLight.position.set( -1, 0.5, -1 );
+				directionalLight.position.set( - 1, 0.5, - 1 );
 				scene.add( directionalLight );
 
 				// MATERIALS
 
-				var diffuse = 0xbbbbbb, specular = 0x555555, shininess = 50;
+				var diffuse = 0xbbbbbb, specular = 0x555555;
 
 				var shader = THREE.ShaderSkin[ "skin" ];
 
@@ -123,7 +123,7 @@
 				var textureLoader = new THREE.TextureLoader();
 
 				uniformsUV[ "tNormal" ].value = textureLoader.load( "models/gltf/LeePerrySmith/Infinite-Level_02_Tangent_SmoothUV.jpg" );
-				uniformsUV[ "uNormalScale" ].value = -1.5;
+				uniformsUV[ "uNormalScale" ].value = - 1.5;
 
 				uniformsUV[ "tDiffuse" ].value = textureLoader.load( "models/gltf/LeePerrySmith/Map-COL.jpg" );
 
@@ -154,7 +154,7 @@
 				// LOADER
 
 				loader = new THREE.GLTFLoader();
-				loader.load(  "models/gltf/LeePerrySmith/LeePerrySmith.glb", function( gltf ) {
+				loader.load( "models/gltf/LeePerrySmith/LeePerrySmith.glb", function ( gltf ) {
 
 					createScene( gltf.scene.children[ 0 ].geometry, 100, material );
 

examples/webgl_materials_standard.html

@@ -65,15 +65,9 @@
 
 			var statsEnabled = true;
 
-			var container, stats, loader;
+			var container, stats;
 
-			var camera, scene, renderer;
-
-			var controls;
-
-			var mesh;
-
-			var spotLight;
+			var camera, scene, renderer, controls;
 
 			init();
 			animate();
@@ -156,12 +150,14 @@
 
 					} );
 
-				var genCubeUrls = function( prefix, postfix ) {
+				var genCubeUrls = function ( prefix, postfix ) {
+
 					return [
 						prefix + 'px' + postfix, prefix + 'nx' + postfix,
 						prefix + 'py' + postfix, prefix + 'ny' + postfix,
 						prefix + 'pz' + postfix, prefix + 'nz' + postfix
 					];
+
 				};
 
 				var hdrUrls = genCubeUrls( './textures/cube/pisaHDR/', '.hdr' );
@@ -199,7 +195,7 @@
 
 			//
 
-			function onWindowResize( event ) {
+			function onWindowResize() {
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 

examples/webgl_materials_texture_anisotropy.html

@@ -64,7 +64,7 @@
 			var SCREEN_WIDTH = window.innerWidth;
 			var SCREEN_HEIGHT = window.innerHeight;
 
-			var container,stats;
+			var container, stats;
 
 			var camera, scene1, scene2, renderer;
 
@@ -136,7 +136,7 @@
 				} else {
 
 					document.getElementById( "val_left" ).innerHTML = "not supported";
-					document.getElementById( "val_right" ).innerHTML =  "not supported";
+					document.getElementById( "val_right" ).innerHTML = "not supported";
 
 				}
 
@@ -174,7 +174,7 @@
 			}
 
 
-			function onDocumentMouseMove(event) {
+			function onDocumentMouseMove( event ) {
 
 				mouseX = ( event.clientX - windowHalfX );
 				mouseY = ( event.clientY - windowHalfY );
@@ -201,10 +201,10 @@
 				renderer.clear();
 				renderer.setScissorTest( true );
 
-				renderer.setScissor( 0, 0, SCREEN_WIDTH/2 - 2, SCREEN_HEIGHT );
+				renderer.setScissor( 0, 0, SCREEN_WIDTH / 2 - 2, SCREEN_HEIGHT );
 				renderer.render( scene1, camera );
 
-				renderer.setScissor( SCREEN_WIDTH/2, 0, SCREEN_WIDTH/2 - 2, SCREEN_HEIGHT  );
+				renderer.setScissor( SCREEN_WIDTH / 2, 0, SCREEN_WIDTH / 2 - 2, SCREEN_HEIGHT );
 				renderer.render( scene2, camera );
 
 				renderer.setScissorTest( false );

examples/webgl_materials_texture_canvas.html

@@ -106,26 +106,26 @@
 				var paint = false;
 
 				// add canvas event listeners
-				drawingCanvas.addEventListener( 'mousedown', function( e ) {
+				drawingCanvas.addEventListener( 'mousedown', function ( e ) {
 
 					paint = true;
 					drawStartPos.set( e.offsetX, e.offsetY );
 
 				} );
 
-				drawingCanvas.addEventListener( 'mousemove', function( e ) {
+				drawingCanvas.addEventListener( 'mousemove', function ( e ) {
 
-					if( paint ) draw( drawingContext, e.offsetX, e.offsetY );
+					if ( paint ) draw( drawingContext, e.offsetX, e.offsetY );
 
 				} );
 
-				drawingCanvas.addEventListener( 'mouseup', function( e ) {
+				drawingCanvas.addEventListener( 'mouseup', function () {
 
 					paint = false;
 
 				} );
 
-				drawingCanvas.addEventListener( 'mouseleave', function( e ) {
+				drawingCanvas.addEventListener( 'mouseleave', function () {
 
 					paint = false;
 

examples/webgl_materials_texture_filters.html

@@ -77,7 +77,7 @@
 			var SCREEN_WIDTH = window.innerWidth;
 			var SCREEN_HEIGHT = window.innerHeight;
 
-			var container,stats;
+			var container, stats;
 
 			var camera, scene, scene2, renderer;
 
@@ -117,7 +117,7 @@
 				context.fillRect( 0, 0, 128, 128 );
 
 				context.fillStyle = "#fff";
-				context.fillRect( 0, 0, 64, 64);
+				context.fillRect( 0, 0, 64, 64 );
 				context.fillRect( 64, 64, 64, 64 );
 
 				var textureCanvas = new THREE.CanvasTexture( imageCanvas );
@@ -145,7 +145,7 @@
 
 				// PAINTING
 
-				var callbackPainting = function() {
+				var callbackPainting = function () {
 
 					var image = texturePainting.image;
 
@@ -176,14 +176,14 @@
 						zscene.add( meshFrame );
 
 						var meshShadow = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0x000000, opacity: 0.75, transparent: true } ) );
-						meshShadow.position.y = - 1.1 * image.height/2;
-						meshShadow.position.z = - 1.1 * image.height/2;
+						meshShadow.position.y = - 1.1 * image.height / 2;
+						meshShadow.position.z = - 1.1 * image.height / 2;
 						meshShadow.rotation.x = - Math.PI / 2;
 						meshShadow.scale.x = 1.1 * image.width / 100;
 						meshShadow.scale.y = 1.1 * image.height / 100;
 						zscene.add( meshShadow );
 
-						var floorHeight = - 1.117 * image.height/2;
+						var floorHeight = - 1.117 * image.height / 2;
 						meshCanvas.position.y = meshCanvas2.position.y = floorHeight;
 
 					}
@@ -217,7 +217,7 @@
 			}
 
 
-			function onDocumentMouseMove(event) {
+			function onDocumentMouseMove( event ) {
 
 				mouseX = ( event.clientX - windowHalfX );
 				mouseY = ( event.clientY - windowHalfY );
@@ -237,17 +237,17 @@
 			function render() {
 
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
-				camera.position.y += ( - ( mouseY - 200) - camera.position.y ) * .05;
+				camera.position.y += ( - ( mouseY - 200 ) - camera.position.y ) * .05;
 
 				camera.lookAt( scene.position );
 
 				renderer.clear();
 				renderer.setScissorTest( true );
 
-				renderer.setScissor( 0, 0, SCREEN_WIDTH/2 - 2, SCREEN_HEIGHT );
+				renderer.setScissor( 0, 0, SCREEN_WIDTH / 2 - 2, SCREEN_HEIGHT );
 				renderer.render( scene, camera );
 
-				renderer.setScissor( SCREEN_WIDTH/2, 0, SCREEN_WIDTH/2 - 2, SCREEN_HEIGHT  );
+				renderer.setScissor( SCREEN_WIDTH / 2, 0, SCREEN_WIDTH / 2 - 2, SCREEN_HEIGHT );
 				renderer.render( scene2, camera );
 
 				renderer.setScissorTest( false );

examples/webgl_materials_texture_manualmipmap.html

@@ -131,10 +131,10 @@
 				textureCanvas1.mipmaps[ 1 ] = mipmap( 64, '#0f0' );
 				textureCanvas1.mipmaps[ 2 ] = mipmap( 32, '#00f' );
 				textureCanvas1.mipmaps[ 3 ] = mipmap( 16, '#400' );
-				textureCanvas1.mipmaps[ 4 ] = mipmap( 8,  '#040' );
-				textureCanvas1.mipmaps[ 5 ] = mipmap( 4,  '#004' );
-				textureCanvas1.mipmaps[ 6 ] = mipmap( 2,  '#044' );
-				textureCanvas1.mipmaps[ 7 ] = mipmap( 1,  '#404' );
+				textureCanvas1.mipmaps[ 4 ] = mipmap( 8, '#040' );
+				textureCanvas1.mipmaps[ 5 ] = mipmap( 4, '#004' );
+				textureCanvas1.mipmaps[ 6 ] = mipmap( 2, '#044' );
+				textureCanvas1.mipmaps[ 7 ] = mipmap( 1, '#404' );
 				textureCanvas1.repeat.set( 1000, 1000 );
 				textureCanvas1.wrapS = THREE.RepeatWrapping;
 				textureCanvas1.wrapT = THREE.RepeatWrapping;
@@ -149,11 +149,11 @@
 				var geometry = new THREE.PlaneBufferGeometry( 100, 100 );
 
 				var meshCanvas1 = new THREE.Mesh( geometry, materialCanvas1 );
-				meshCanvas1.rotation.x = -Math.PI / 2;
-				meshCanvas1.scale.set(1000, 1000, 1000);
+				meshCanvas1.rotation.x = - Math.PI / 2;
+				meshCanvas1.scale.set( 1000, 1000, 1000 );
 
 				var meshCanvas2 = new THREE.Mesh( geometry, materialCanvas2 );
-				meshCanvas2.rotation.x = -Math.PI / 2;
+				meshCanvas2.rotation.x = - Math.PI / 2;
 				meshCanvas2.scale.set( 1000, 1000, 1000 );
 
 
@@ -190,14 +190,14 @@
 						zscene.add( meshFrame );
 
 						var meshShadow = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0x000000, opacity: 0.75, transparent: true } ) );
-						meshShadow.position.y = -1.1 * image.height / 2;
-						meshShadow.position.z = -1.1 * image.height / 2;
-						meshShadow.rotation.x = -Math.PI / 2;
+						meshShadow.position.y = - 1.1 * image.height / 2;
+						meshShadow.position.z = - 1.1 * image.height / 2;
+						meshShadow.rotation.x = - Math.PI / 2;
 						meshShadow.scale.x = 1.1 * image.width / 100;
 						meshShadow.scale.y = 1.1 * image.height / 100;
 						zscene.add( meshShadow );
 
-						var floorHeight = -1.117 * image.height / 2;
+						var floorHeight = - 1.117 * image.height / 2;
 						meshCanvas1.position.y = meshCanvas2.position.y = floorHeight;
 
 					}
@@ -251,7 +251,7 @@
 			function render() {
 
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
-				camera.position.y += ( -( mouseY - 200 ) - camera.position.y ) * .05;
+				camera.position.y += ( - ( mouseY - 200 ) - camera.position.y ) * .05;
 
 				camera.lookAt( scene1.position );
 

examples/webgl_materials_texture_partialupdate.html

@@ -114,8 +114,8 @@
 
 					last = elapsedTime;
 
-					position.x = ( 32 * THREE.Math.randInt( 1, 16 ) ) - 32 ;
-					position.y = ( 32 * THREE.Math.randInt( 1, 16 ) ) - 32 ;
+					position.x = ( 32 * THREE.Math.randInt( 1, 16 ) ) - 32;
+					position.y = ( 32 * THREE.Math.randInt( 1, 16 ) ) - 32;
 
 					// generate new color data
 

examples/webgl_materials_translucency.html

@@ -48,7 +48,7 @@
 		}
 
 		var container, stats;
-		var camera, scene, renderer, controls;
+		var camera, scene, renderer;
 		var model;
 
 		init();
@@ -76,15 +76,15 @@
 			pointLight1.add( new THREE.PointLight( 0x888888, 7.0, 300 ) );
 			scene.add( pointLight1 );
 			pointLight1.position.x = 0;
-			pointLight1.position.y = -50;
+			pointLight1.position.y = - 50;
 			pointLight1.position.z = 350;
 
 			var pointLight2 = new THREE.Mesh( new THREE.SphereBufferGeometry( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0x888800 } ) );
 			pointLight2.add( new THREE.PointLight( 0x888800, 1.0, 500 ) );
 			scene.add( pointLight2 );
-			pointLight2.position.x = -100;
+			pointLight2.position.x = - 100;
 			pointLight2.position.y = 20;
-			pointLight2.position.z = -260;
+			pointLight2.position.z = - 260;
 
 			renderer = new THREE.WebGLRenderer( { antialias: true } );
 			renderer.setPixelRatio( window.devicePixelRatio );
@@ -99,7 +99,7 @@
 			stats = new Stats();
 			container.appendChild( stats.dom );
 
-			controls = new THREE.OrbitControls( camera );
+			var controls = new THREE.OrbitControls( camera, container );
 
 			window.addEventListener( 'resize', onWindowResize, false );
 
@@ -151,44 +151,59 @@
 
 			} );
 
-			initGUI(uniforms);
+			initGUI( uniforms );
+
 		}
 
-		function initGUI(uniforms) {
+		function initGUI( uniforms ) {
+
 			var gui = new dat.GUI();
 
-			var ThicknessControls = function() {
-				this.distoration =  uniforms['thicknessDistortion'].value;
-				this.ambient =  uniforms['thicknessAmbient'].value;
-				this.attenuation =  uniforms['thicknessAttenuation'].value;
-				this.power =  uniforms['thicknessPower'].value;
-				this.scale =  uniforms['thicknessScale'].value;
+			var ThicknessControls = function () {
+
+				this.distoration = uniforms[ 'thicknessDistortion' ].value;
+				this.ambient = uniforms[ 'thicknessAmbient' ].value;
+				this.attenuation = uniforms[ 'thicknessAttenuation' ].value;
+				this.power = uniforms[ 'thicknessPower' ].value;
+				this.scale = uniforms[ 'thicknessScale' ].value;
+
 			};
 
 			var thicknessControls = new ThicknessControls();
 			var thicknessFolder = gui.addFolder( 'Thickness Control' );
 
-			thicknessFolder.add(thicknessControls, 'distoration' ).min(0.01).max(1).step(0.01).onChange(function() {
-				uniforms['thicknessDistortion'].value = thicknessControls.distoration;
-			});
+			thicknessFolder.add( thicknessControls, 'distoration' ).min( 0.01 ).max( 1 ).step( 0.01 ).onChange( function () {
+
+				uniforms[ 'thicknessDistortion' ].value = thicknessControls.distoration;
+
+			} );
+
+			thicknessFolder.add( thicknessControls, 'ambient' ).min( 0.01 ).max( 5.0 ).step( 0.05 ).onChange( function () {
+
+				uniforms[ 'thicknessAmbient' ].value = thicknessControls.ambient;
+
+			} );
+
+			thicknessFolder.add( thicknessControls, 'attenuation' ).min( 0.01 ).max( 5.0 ).step( 0.05 ).onChange( function () {
+
+				uniforms[ 'thicknessAttenuation' ].value = thicknessControls.attenuation;
+
+			} );
 
-			thicknessFolder.add(thicknessControls, 'ambient' ).min(0.01).max(5.0).step(0.05).onChange(function() {
-				uniforms['thicknessAmbient'].value = thicknessControls.ambient;
-			});
+			thicknessFolder.add( thicknessControls, 'power' ).min( 0.01 ).max( 16.0 ).step( 0.1 ).onChange( function () {
 
-			thicknessFolder.add(thicknessControls, 'attenuation' ).min(0.01).max(5.0).step(0.05).onChange(function() {
-				uniforms['thicknessAttenuation'].value = thicknessControls.attenuation;
-			});
+				uniforms[ 'thicknessPower' ].value = thicknessControls.power;
 
-			thicknessFolder.add(thicknessControls, 'power' ).min(0.01).max(16.0).step(0.1).onChange(function() {
-				uniforms['thicknessPower'].value = thicknessControls.power;
-			});
+			} );
+
+			thicknessFolder.add( thicknessControls, 'scale' ).min( 0.01 ).max( 50.0 ).step( 0.1 ).onChange( function () {
 
-			thicknessFolder.add(thicknessControls, 'scale' ).min(0.01).max(50.0).step(0.1).onChange(function() {
-				uniforms['thicknessScale'].value = thicknessControls.scale;
-			});
+				uniforms[ 'thicknessScale' ].value = thicknessControls.scale;
+
+			} );
 
 			thicknessFolder.open();
+
 		}
 
 		function onWindowResize() {

examples/webgl_materials_variations_basic.html

@@ -126,7 +126,7 @@
 						height: 1,
 						curveSegments: 1
 
-					});
+					} );
 
 					var textMaterial = new THREE.MeshBasicMaterial( { color: 0xffffff } );
 					var textMesh = new THREE.Mesh( textGeo, textMaterial );
@@ -135,16 +135,16 @@
 
 				}
 
-				addLabel( "+hue", new THREE.Vector3( -350, 0, 0 ) );
+				addLabel( "+hue", new THREE.Vector3( - 350, 0, 0 ) );
 				addLabel( "-hue", new THREE.Vector3( 350, 0, 0 ) );
 
-				addLabel( "-reflectivity", new THREE.Vector3( 0, -300, 0 ) );
+				addLabel( "-reflectivity", new THREE.Vector3( 0, - 300, 0 ) );
 				addLabel( "+reflectivity", new THREE.Vector3( 0, 300, 0 ) );
 
-				addLabel( "-diffuse", new THREE.Vector3( 0, 0, -300 ) );
+				addLabel( "-diffuse", new THREE.Vector3( 0, 0, - 300 ) );
 				addLabel( "+diffuse", new THREE.Vector3( 0, 0, 300 ) );
 
-				addLabel( "envMap", new THREE.Vector3( -350, 300, 0 ) );
+				addLabel( "envMap", new THREE.Vector3( - 350, 300, 0 ) );
 				addLabel( "no envMap", new THREE.Vector3( 350, 300, 0 ) );
 
 				particleLight = new THREE.Mesh( new THREE.SphereBufferGeometry( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0xffffff } ) );

examples/webgl_materials_variations_lambert.html

@@ -126,7 +126,7 @@
 						height: 1,
 						curveSegments: 1
 
-					});
+					} );
 
 					var textMaterial = new THREE.MeshBasicMaterial( { color: 0xffffff } );
 					var textMesh = new THREE.Mesh( textGeo, textMaterial );
@@ -135,16 +135,16 @@
 
 				}
 
-				addLabel( "+hue", new THREE.Vector3( -350, 0, 0 ) );
+				addLabel( "+hue", new THREE.Vector3( - 350, 0, 0 ) );
 				addLabel( "-hue", new THREE.Vector3( 350, 0, 0 ) );
 
-				addLabel( "-reflectivity", new THREE.Vector3( 0, -300, 0 ) );
+				addLabel( "-reflectivity", new THREE.Vector3( 0, - 300, 0 ) );
 				addLabel( "+reflectivity", new THREE.Vector3( 0, 300, 0 ) );
 
-				addLabel( "-diffuse", new THREE.Vector3( 0, 0, -300 ) );
+				addLabel( "-diffuse", new THREE.Vector3( 0, 0, - 300 ) );
 				addLabel( "+diffuse", new THREE.Vector3( 0, 0, 300 ) );
 
-				addLabel( "envMap", new THREE.Vector3( -350, 300, 0 ) );
+				addLabel( "envMap", new THREE.Vector3( - 350, 300, 0 ) );
 				addLabel( "no envMap", new THREE.Vector3( 350, 300, 0 ) );
 
 				particleLight = new THREE.Mesh( new THREE.SphereBufferGeometry( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0xffffff } ) );

examples/webgl_materials_variations_phong.html

@@ -136,7 +136,7 @@
 						height: 1,
 						curveSegments: 1
 
-					});
+					} );
 
 					var textMaterial = new THREE.MeshBasicMaterial( { color: 0xffffff } );
 					var textMesh = new THREE.Mesh( textGeo, textMaterial );
@@ -145,13 +145,13 @@
 
 				}
 
-				addLabel( "-shininess", new THREE.Vector3( -350, 0, 0 ) );
+				addLabel( "-shininess", new THREE.Vector3( - 350, 0, 0 ) );
 				addLabel( "+shininess", new THREE.Vector3( 350, 0, 0 ) );
 
-				addLabel( "-specular, -reflectivity", new THREE.Vector3( 0, -300, 0 ) );
+				addLabel( "-specular, -reflectivity", new THREE.Vector3( 0, - 300, 0 ) );
 				addLabel( "+specular, +reflectivity", new THREE.Vector3( 0, 300, 0 ) );
 
-				addLabel( "-diffuse", new THREE.Vector3( 0, 0, -300 ) );
+				addLabel( "-diffuse", new THREE.Vector3( 0, 0, - 300 ) );
 				addLabel( "+diffuse", new THREE.Vector3( 0, 0, 300 ) );
 
 				particleLight = new THREE.Mesh( new THREE.SphereBufferGeometry( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0xffffff } ) );

examples/webgl_materials_variations_physical.html

@@ -72,12 +72,14 @@
 
 				//
 
-				var genCubeUrls = function( prefix, postfix ) {
+				var genCubeUrls = function ( prefix, postfix ) {
+
 					return [
 						prefix + 'px' + postfix, prefix + 'nx' + postfix,
 						prefix + 'py' + postfix, prefix + 'ny' + postfix,
 						prefix + 'pz' + postfix, prefix + 'nz' + postfix
 					];
+
 				};
 
 
@@ -124,7 +126,7 @@
 									color: diffuseColor,
 									metalness: 0,
 									roughness: 0.5,
-									clearCoat:  1.0 - alpha,
+									clearCoat: 1.0 - alpha,
 									clearCoatRoughness: 1.0 - beta,
 									reflectivity: 1.0 - gamma,
 									envMap: ( index % 2 ) == 1 ? hdrCubeRenderTarget.texture : null
@@ -164,7 +166,7 @@
 						height: 1,
 						curveSegments: 1
 
-					});
+					} );
 
 					var textMaterial = new THREE.MeshBasicMaterial( { color: 0xffffff } );
 					var textMesh = new THREE.Mesh( textGeo, textMaterial );
@@ -173,13 +175,13 @@
 
 				}
 
-				addLabel( "+clearCoat", new THREE.Vector3( -350, 0, 0 ) );
+				addLabel( "+clearCoat", new THREE.Vector3( - 350, 0, 0 ) );
 				addLabel( "-clearCoat", new THREE.Vector3( 350, 0, 0 ) );
 
-				addLabel( "+clearCoatRoughness", new THREE.Vector3( 0, -300, 0 ) );
+				addLabel( "+clearCoatRoughness", new THREE.Vector3( 0, - 300, 0 ) );
 				addLabel( "-clearCoatRoughness", new THREE.Vector3( 0, 300, 0 ) );
 
-				addLabel( "+reflectivity", new THREE.Vector3( 0, 0, -300 ) );
+				addLabel( "+reflectivity", new THREE.Vector3( 0, 0, - 300 ) );
 				addLabel( "-reflectivity", new THREE.Vector3( 0, 0, 300 ) );
 
 				particleLight = new THREE.Mesh( new THREE.SphereBufferGeometry( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0xffffff } ) );

examples/webgl_materials_variations_standard.html

@@ -70,12 +70,14 @@
 				camera.position.set( 0.0, 400, 400 * 3.5 );
 
 				//
-				var genCubeUrls = function( prefix, postfix ) {
+				var genCubeUrls = function ( prefix, postfix ) {
+
 					return [
 						prefix + 'px' + postfix, prefix + 'nx' + postfix,
 						prefix + 'py' + postfix, prefix + 'ny' + postfix,
 						prefix + 'pz' + postfix, prefix + 'nz' + postfix
 					];
+
 				};
 
 				var textureCube = new THREE.CubeTextureLoader()
@@ -168,7 +170,7 @@
 						height: 1,
 						curveSegments: 1
 
-					});
+					} );
 
 					var textMaterial = new THREE.MeshBasicMaterial( { color: 0xffffff } );
 					var textMesh = new THREE.Mesh( textGeo, textMaterial );
@@ -177,13 +179,13 @@
 
 				}
 
-				addLabel( "+roughness", new THREE.Vector3( -350, 0, 0 ) );
+				addLabel( "+roughness", new THREE.Vector3( - 350, 0, 0 ) );
 				addLabel( "-roughness", new THREE.Vector3( 350, 0, 0 ) );
 
-				addLabel( "-metalness", new THREE.Vector3( 0, -300, 0 ) );
+				addLabel( "-metalness", new THREE.Vector3( 0, - 300, 0 ) );
 				addLabel( "+metalness", new THREE.Vector3( 0, 300, 0 ) );
 
-				addLabel( "-diffuse", new THREE.Vector3( 0, 0, -300 ) );
+				addLabel( "-diffuse", new THREE.Vector3( 0, 0, - 300 ) );
 				addLabel( "+diffuse", new THREE.Vector3( 0, 0, 300 ) );
 
 				particleLight = new THREE.Mesh( new THREE.SphereBufferGeometry( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0xffffff } ) );

examples/webgl_materials_variations_toon.html

@@ -138,7 +138,7 @@
 						height: 1,
 						curveSegments: 1
 
-					});
+					} );
 
 					var textMaterial = new THREE.MeshBasicMaterial( { color: 0xffffff } );
 					var textMesh = new THREE.Mesh( textGeo, textMaterial );
@@ -147,13 +147,13 @@
 
 				}
 
-				addLabel( "-shininess", new THREE.Vector3( -350, 0, 0 ) );
+				addLabel( "-shininess", new THREE.Vector3( - 350, 0, 0 ) );
 				addLabel( "+shininess", new THREE.Vector3( 350, 0, 0 ) );
 
-				addLabel( "-specular, -reflectivity", new THREE.Vector3( 0, -300, 0 ) );
+				addLabel( "-specular, -reflectivity", new THREE.Vector3( 0, - 300, 0 ) );
 				addLabel( "+specular, +reflectivity", new THREE.Vector3( 0, 300, 0 ) );
 
-				addLabel( "-diffuse", new THREE.Vector3( 0, 0, -300 ) );
+				addLabel( "-diffuse", new THREE.Vector3( 0, 0, - 300 ) );
 				addLabel( "+diffuse", new THREE.Vector3( 0, 0, 300 ) );
 
 				particleLight = new THREE.Mesh( new THREE.SphereBufferGeometry( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0xffffff } ) );

examples/webgl_materials_video.html

@@ -17,9 +17,7 @@
 				text-align:center;
 			}
 
-			a {
-				color:#0078ff;
-			}
+			a { color:#0078ff; }
 
 			#info {
 				color:#fff;
@@ -130,42 +128,42 @@
 				cube_count = 0;
 
 				for ( i = 0; i < xgrid; i ++ )
-				for ( j = 0; j < ygrid; j ++ ) {
+					for ( j = 0; j < ygrid; j ++ ) {
 
-					ox = i;
-					oy = j;
+						ox = i;
+						oy = j;
 
-					geometry = new THREE.BoxBufferGeometry( xsize, ysize, xsize );
+						geometry = new THREE.BoxBufferGeometry( xsize, ysize, xsize );
 
-					change_uvs( geometry, ux, uy, ox, oy );
+						change_uvs( geometry, ux, uy, ox, oy );
 
-					materials[ cube_count ] = new THREE.MeshLambertMaterial( parameters );
+						materials[ cube_count ] = new THREE.MeshLambertMaterial( parameters );
 
-					material = materials[ cube_count ];
+						material = materials[ cube_count ];
 
-					material.hue = i/xgrid;
-					material.saturation = 1 - j/ygrid;
+						material.hue = i / xgrid;
+						material.saturation = 1 - j / ygrid;
 
-					material.color.setHSL( material.hue, material.saturation, 0.5 );
+						material.color.setHSL( material.hue, material.saturation, 0.5 );
 
-					mesh = new THREE.Mesh( geometry, material );
+						mesh = new THREE.Mesh( geometry, material );
 
-					mesh.position.x =   ( i - xgrid/2 ) * xsize;
-					mesh.position.y =   ( j - ygrid/2 ) * ysize;
-					mesh.position.z = 0;
+						mesh.position.x = ( i - xgrid / 2 ) * xsize;
+						mesh.position.y = ( j - ygrid / 2 ) * ysize;
+						mesh.position.z = 0;
 
-					mesh.scale.x = mesh.scale.y = mesh.scale.z = 1;
+						mesh.scale.x = mesh.scale.y = mesh.scale.z = 1;
 
-					scene.add( mesh );
+						scene.add( mesh );
 
-					mesh.dx = 0.001 * ( 0.5 - Math.random() );
-					mesh.dy = 0.001 * ( 0.5 - Math.random() );
+						mesh.dx = 0.001 * ( 0.5 - Math.random() );
+						mesh.dy = 0.001 * ( 0.5 - Math.random() );
 
-					meshes[ cube_count ] = mesh;
+						meshes[ cube_count ] = mesh;
 
-					cube_count += 1;
+						cube_count += 1;
 
-				}
+					}
 
 				renderer.autoClear = false;
 
@@ -218,7 +216,7 @@
 			}
 
 
-			function onDocumentMouseMove(event) {
+			function onDocumentMouseMove( event ) {
 
 				mouseX = ( event.clientX - windowHalfX );
 				mouseY = ( event.clientY - windowHalfY ) * 0.3;
@@ -278,8 +276,8 @@
 
 						mesh = meshes[ i ];
 
-						mesh.dx *= -1;
-						mesh.dy *= -1;
+						mesh.dx *= - 1;
+						mesh.dy *= - 1;
 
 					}
 

examples/webgl_materials_video_webcam.html

@@ -104,14 +104,14 @@
 
 					var constraints = { video: { width: 1280, height: 720, facingMode: 'user' } };
 
-					navigator.mediaDevices.getUserMedia( constraints ).then( function( stream ) {
+					navigator.mediaDevices.getUserMedia( constraints ).then( function ( stream ) {
 
-							// apply the stream to the video element used in the texture
+						// apply the stream to the video element used in the texture
 
-							video.srcObject = stream;
-							video.play();
+						video.srcObject = stream;
+						video.play();
 
-					} ).catch( function( error ) {
+					} ).catch( function ( error ) {
 
 						console.error( 'Unable to access the camera/webcam.', error );
 
@@ -123,23 +123,23 @@
 
 				}
 
-			 }
+			}
 
-			 function onWindowResize() {
+			function onWindowResize() {
 
 				 camera.aspect = window.innerWidth / window.innerHeight;
 				 camera.updateProjectionMatrix();
 
 				 renderer.setSize( window.innerWidth, window.innerHeight );
 
-			 }
+			}
 
-			 function animate() {
+			function animate() {
 
 				 requestAnimationFrame( animate );
 				 renderer.render( scene, camera );
 
-			 }
+			}
 
 		</script>
 

examples/webgl_materials_wireframe.html

@@ -74,7 +74,7 @@
 				material = new THREE.MeshBasicMaterial( { wireframe: true } );
 
 				mesh = new THREE.Mesh( geometry, material );
-				mesh.position.x = -150;
+				mesh.position.x = - 150;
 				scene.add( mesh );
 
 				//
@@ -112,7 +112,7 @@
 				material.extensions.derivatives = true;
 
 				mesh = new THREE.Mesh( geometry, material );
-				mesh.position.x = -150;
+				mesh.position.x = - 150;
 				scene.add( mesh );
 
 				// renderer

examples/webgl_mirror.html

@@ -76,8 +76,8 @@
 				camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR );
 				camera.position.set( 0, 75, 160 );
 
-				cameraControls = new THREE.OrbitControls(camera, renderer.domElement);
-				cameraControls.target.set( 0, 40, 0);
+				cameraControls = new THREE.OrbitControls( camera, renderer.domElement );
+				cameraControls.target.set( 0, 40, 0 );
 				cameraControls.maxDistance = 400;
 				cameraControls.minDistance = 10;
 				cameraControls.update();
@@ -134,7 +134,7 @@
 				var geometry = new THREE.IcosahedronBufferGeometry( 5, 0 );
 				var material = new THREE.MeshPhongMaterial( { color: 0xffffff, emissive: 0x333333, flatShading: true } );
 				smallSphere = new THREE.Mesh( geometry, material );
-				scene.add(smallSphere);
+				scene.add( smallSphere );
 
 				// walls
 				var planeTop = new THREE.Mesh( planeGeo, new THREE.MeshPhongMaterial( { color: 0xffffff } ) );
@@ -159,7 +159,7 @@
 				scene.add( planeRight );
 
 				var planeLeft = new THREE.Mesh( planeGeo, new THREE.MeshPhongMaterial( { color: 0xff0000 } ) );
-				planeLeft.position.x = -50;
+				planeLeft.position.x = - 50;
 				planeLeft.position.y = 50;
 				planeLeft.rotateY( Math.PI / 2 );
 				scene.add( planeLeft );
@@ -199,7 +199,7 @@
 				smallSphere.rotation.y = ( Math.PI / 2 ) - timer * 0.1;
 				smallSphere.rotation.z = timer * 0.8;
 
-				renderer.render(scene, camera);
+				renderer.render( scene, camera );
 
 			}
 

examples/webgl_mirror_nodes.html

@@ -106,7 +106,6 @@
 				var groundMirror = new THREE.ReflectorRTT( geometry, { clipBias: 0.003, textureWidth: WIDTH, textureHeight: HEIGHT } );
 
 				var mask = new THREE.SwitchNode( new THREE.TextureNode( decalDiffuse ), 'w' );
-				var maskFlip = new THREE.Math1Node( mask, THREE.Math1Node.INVERT );
 
 				var mirror = new THREE.ReflectorNode( groundMirror );
 
@@ -129,13 +128,6 @@
 					THREE.OperatorNode.MUL
 				);
 
-				var clr = new THREE.Math3Node(
-					mirror,
-					new THREE.ColorNode( 0xFFFFFF ),
-					mask,
-					THREE.Math3Node.MIX
-				);
-
 				var blurMirror = new THREE.BlurNode( mirror );
 				blurMirror.size = new THREE.Vector2( WIDTH, HEIGHT );
 				blurMirror.uv = new THREE.ExpressionNode( "projCoord.xyz / projCoord.q", "vec3" );

examples/webgl_modifier_subdivision.html

@@ -37,9 +37,9 @@
 
 			// Create new object by parameters
 
-			var createSomething = function( klass, args ) {
+			var createSomething = function ( klass, args ) {
 
-				var F = function( klass, args ) {
+				var F = function ( klass, args ) {
 
 					return klass.apply( this, args );
 
@@ -74,19 +74,19 @@
 				{ type: 'TorusKnotGeometry', args: [ 100, 30 ], scale: 0.25, meshScale: 4 },
 				{ type: 'SphereGeometry', args: [ 100, 3, 3 ], meshScale: 2 },
 				{ type: 'IcosahedronGeometry', args: [ 100, 1 ], meshScale: 2 },
-				{ type: 'CylinderGeometry', args: [ 25, 75, 200, 8, 3 ]} ,
-				{ type: 'OctahedronGeometry', args: [200, 0], meshScale: 2 },
-				{ type: 'LatheGeometry', args: [ [
+				{ type: 'CylinderGeometry', args: [ 25, 75, 200, 8, 3 ] },
+				{ type: 'OctahedronGeometry', args: [ 200, 0 ], meshScale: 2 },
+				{ type: 'LatheGeometry', args: [[
 					new THREE.Vector2( 0, 0 ),
 					new THREE.Vector2( 50, 50 ),
 					new THREE.Vector2( 10, 100 ),
 					new THREE.Vector2( 50, 150 ),
-					new THREE.Vector2( 0, 200 ) ] ]},
-				{ type: 'TextGeometry', args: ['&', {
-						size: 200,
-						height: 50,
-						curveSegments: 1
-					}]},
+					new THREE.Vector2( 0, 200 ) ]] },
+				{ type: 'TextGeometry', args: [ '&', {
+					size: 200,
+					height: 50,
+					curveSegments: 1
+				} ] },
 				{ type: 'PlaneGeometry', args: [ 200, 200, 4, 4 ] }
 
 			];
@@ -103,28 +103,32 @@
 
 				geometry = new THREE.Geometry().fromBufferGeometry( geometry );
 
-				geometriesParams.push( {type: 'WaltHead', args: [ ], meshScale: 6 } );
+				geometriesParams.push( { type: 'WaltHead', args: [ ], meshScale: 6 } );
+
+				THREE.WaltHead = function () {
 
-				THREE.WaltHead = function() {
 					return geometry.clone();
-				};
 
-				updateInfo()
+	};
+
+				updateInfo();
 
-			});
+			} );
 
 			var loader2 = new THREE.BufferGeometryLoader();
 			loader2.load( 'models/json/suzanne_buffergeometry.json', function ( geometry ) {
 
 				geometry = new THREE.Geometry().fromBufferGeometry( geometry );
 
-				geometriesParams.push( {type: 'Suzanne', args: [ ], scale: 100, meshScale:2 } );
+				geometriesParams.push( { type: 'Suzanne', args: [ ], scale: 100, meshScale: 2 } );
+
+				THREE.Suzanne = function () {
 
-				THREE.Suzanne = function() {
 					return geometry.clone();
-				};
 
-				updateInfo()
+	};
+
+				updateInfo();
 
 			} );
 
@@ -159,11 +163,12 @@
 
 			}
 
-			function switchGeometry(i) {
+			function switchGeometry( i ) {
 
 				geometryIndex = i;
 
 				addStuff();
+
 			}
 
 			function updateInfo() {
@@ -173,11 +178,13 @@
 				var dropdown = '<select id="dropdown" onchange="switchGeometry(this.value)">';
 
 				for ( var i = 0; i < geometriesParams.length; i ++ ) {
+
 					dropdown += '<option value="' + i + '"';
 
 					dropdown += ( geometryIndex == i ) ? ' selected' : '';
 
 					dropdown += '>' + geometriesParams[ i ].type + '</option>';
+
 				}
 
 				dropdown += '</select>';
@@ -188,7 +195,7 @@
 					' <a href="#" onclick="nextSubdivision(1); return false;">more</a>/<a href="#" onclick="nextSubdivision(-1); return false;">less</a>' +
 					'<br>Geometry: ' + dropdown + ' <a href="#" onclick="nextGeometry();return false;">next</a>' +
 					'<br><br>Vertices count: before ' + geometry.vertices.length + ' after ' + smooth.vertices.length +
-					'<br>Face count: before ' + geometry.faces.length + ' after ' + smooth.faces.length
+					'<br>Face count: before ' + geometry.faces.length + ' after ' + smooth.faces.length;
 
 			}
 
@@ -224,7 +231,7 @@
 
 				for ( var i = 0; i < smooth.faces.length; i ++ ) {
 
-					var face  = smooth.faces[ i ];
+					var face = smooth.faces[ i ];
 
 					for ( var j = 0; j < 3; j ++ ) {
 

examples/webgl_modifier_tessellation.html

@@ -112,7 +112,7 @@
 		function init( font ) {
 
 			camera = new THREE.PerspectiveCamera( 40, WIDTH / HEIGHT, 1, 10000 );
-			camera.position.set( -100, 100, 200 );
+			camera.position.set( - 100, 100, 200 );
 
 			controls = new THREE.TrackballControls( camera );
 
@@ -133,7 +133,7 @@
 				bevelSize: 1,
 				bevelEnabled: true
 
-			});
+			} );
 
 			geometry.center();
 
@@ -170,11 +170,11 @@
 
 				for ( var i = 0; i < 3; i ++ ) {
 
-					colors[ index + ( 3 * i )     ] = color.r;
+					colors[ index + ( 3 * i ) ] = color.r;
 					colors[ index + ( 3 * i ) + 1 ] = color.g;
 					colors[ index + ( 3 * i ) + 2 ] = color.b;
 
-					displacement[ index + ( 3 * i )     ] = d;
+					displacement[ index + ( 3 * i ) ] = d;
 					displacement[ index + ( 3 * i ) + 1 ] = d;
 					displacement[ index + ( 3 * i ) + 2 ] = d;
 
@@ -195,11 +195,11 @@
 
 			var shaderMaterial = new THREE.ShaderMaterial( {
 
-				uniforms:       uniforms,
-				vertexShader:   document.getElementById( 'vertexshader' ).textContent,
+				uniforms: uniforms,
+				vertexShader: document.getElementById( 'vertexshader' ).textContent,
 				fragmentShader: document.getElementById( 'fragmentshader' ).textContent
 
-			});
+			} );
 
 			//
 

examples/webgl_morphtargets.html

@@ -23,9 +23,7 @@
 				color: #ffffff;
 			}
 
-			a {
-				color: #ffffff;
-			}
+			a { color: #ffffff; }
 
 		</style>
 	</head>
@@ -51,12 +49,10 @@
 
 			}
 
-			var container, stats;
+			var container;
 
 			var camera, scene, renderer;
 
-			var geometry, objects;
-
 			var mesh;
 
 			init();
@@ -129,14 +125,46 @@
 				var gui = new dat.GUI();
 
 				var folder = gui.addFolder( 'Morph Targets' );
-				folder.add( params, 'influence1', 0, 1 ).step( 0.01 ).onChange( function( value ) { mesh.morphTargetInfluences[ 0 ] = value; } );
-				folder.add( params, 'influence2', 0, 1 ).step( 0.01 ).onChange( function( value ) { mesh.morphTargetInfluences[ 1 ] = value; } );
-				folder.add( params, 'influence3', 0, 1 ).step( 0.01 ).onChange( function( value ) { mesh.morphTargetInfluences[ 2 ] = value; } );
-				folder.add( params, 'influence4', 0, 1 ).step( 0.01 ).onChange( function( value ) { mesh.morphTargetInfluences[ 3 ] = value; } );
-				folder.add( params, 'influence5', 0, 1 ).step( 0.01 ).onChange( function( value ) { mesh.morphTargetInfluences[ 4 ] = value; } );
-				folder.add( params, 'influence6', 0, 1 ).step( 0.01 ).onChange( function( value ) { mesh.morphTargetInfluences[ 5 ] = value; } );
-				folder.add( params, 'influence7', 0, 1 ).step( 0.01 ).onChange( function( value ) { mesh.morphTargetInfluences[ 6 ] = value; } );
-				folder.add( params, 'influence8', 0, 1 ).step( 0.01 ).onChange( function( value ) { mesh.morphTargetInfluences[ 7 ] = value; } );
+				folder.add( params, 'influence1', 0, 1 ).step( 0.01 ).onChange( function ( value ) {
+
+					mesh.morphTargetInfluences[ 0 ] = value;
+
+				} );
+				folder.add( params, 'influence2', 0, 1 ).step( 0.01 ).onChange( function ( value ) {
+
+					mesh.morphTargetInfluences[ 1 ] = value;
+
+				} );
+				folder.add( params, 'influence3', 0, 1 ).step( 0.01 ).onChange( function ( value ) {
+
+					mesh.morphTargetInfluences[ 2 ] = value;
+
+				} );
+				folder.add( params, 'influence4', 0, 1 ).step( 0.01 ).onChange( function ( value ) {
+
+					mesh.morphTargetInfluences[ 3 ] = value;
+
+				} );
+				folder.add( params, 'influence5', 0, 1 ).step( 0.01 ).onChange( function ( value ) {
+
+					mesh.morphTargetInfluences[ 4 ] = value;
+
+				} );
+				folder.add( params, 'influence6', 0, 1 ).step( 0.01 ).onChange( function ( value ) {
+
+					mesh.morphTargetInfluences[ 5 ] = value;
+
+				} );
+				folder.add( params, 'influence7', 0, 1 ).step( 0.01 ).onChange( function ( value ) {
+
+					mesh.morphTargetInfluences[ 6 ] = value;
+
+				} );
+				folder.add( params, 'influence8', 0, 1 ).step( 0.01 ).onChange( function ( value ) {
+
+					mesh.morphTargetInfluences[ 7 ] = value;
+
+				} );
 				folder.open();
 
 				//

examples/webgl_morphtargets_human.html

@@ -170,13 +170,13 @@
 				morphConfig = {
 				};
 
-				var morphCallback = function( index ) {
+				var morphCallback = function () {
 
 					return function () {
 
 						character.updateMorphs( morphConfig );
 
-					}
+					};
 
 				};
 

examples/webgl_morphtargets_sphere.html

@@ -42,12 +42,10 @@
 
 		<script>
 
-			var container, stats;
+			var container;
 
 			var camera, scene, renderer;
 
-			var geometry, objects;
-
 			var mesh;
 
 			var sign = 1;

examples/webgl_multiple_canvases_complex.html

@@ -124,9 +124,9 @@
 				var fullWidth = 550;
 				var fullHeight = 600;
 
-				views.push( new View( canvas1, fullWidth, fullHeight,   0,   0, canvas1.clientWidth, canvas1.clientHeight ) );
+				views.push( new View( canvas1, fullWidth, fullHeight, 0, 0, canvas1.clientWidth, canvas1.clientHeight ) );
 				views.push( new View( canvas2, fullWidth, fullHeight, 150, 200, canvas2.clientWidth, canvas2.clientHeight ) );
-				views.push( new View( canvas3, fullWidth, fullHeight,  75, 300, canvas3.clientWidth, canvas3.clientHeight ) );
+				views.push( new View( canvas3, fullWidth, fullHeight, 75, 300, canvas3.clientWidth, canvas3.clientHeight ) );
 
 				//
 
@@ -249,7 +249,7 @@
 
 			function animate() {
 
-				for ( var i = 0; i < views.length; ++i ) {
+				for ( var i = 0; i < views.length; ++ i ) {
 
 					views[ i ].render();
 

examples/webgl_multiple_canvases_grid.html

@@ -267,7 +267,7 @@
 
 			function animate() {
 
-				for ( var i = 0; i < views.length; ++i ) {
+				for ( var i = 0; i < views.length; ++ i ) {
 
 					views[ i ].render();
 

examples/webgl_multiple_elements.html

@@ -111,7 +111,7 @@
 				var template = document.getElementById( "template" ).text;
 				var content = document.getElementById( "content" );
 
-				for ( var i =  0; i < 40; i ++ ) {
+				for ( var i = 0; i < 40; i ++ ) {
 
 					var scene = new THREE.Scene();
 
@@ -200,7 +200,7 @@
 				renderer.setClearColor( 0xe0e0e0 );
 				renderer.setScissorTest( true );
 
-				scenes.forEach( function( scene ) {
+				scenes.forEach( function ( scene ) {
 
 					// so something moves
 					scene.children[ 0 ].rotation.y = Date.now() * 0.001;
@@ -213,18 +213,18 @@
 					var rect = element.getBoundingClientRect();
 
 					// check if it's offscreen. If so skip it
-					if ( rect.bottom < 0 || rect.top  > renderer.domElement.clientHeight ||
-						 rect.right  < 0 || rect.left > renderer.domElement.clientWidth ) {
+					if ( rect.bottom < 0 || rect.top > renderer.domElement.clientHeight ||
+						 rect.right < 0 || rect.left > renderer.domElement.clientWidth ) {
 
-						return;  // it's off screen
+						return; // it's off screen
 
 					}
 
 					// set the viewport
-					var width  = rect.right - rect.left;
+					var width = rect.right - rect.left;
 					var height = rect.bottom - rect.top;
-					var left   = rect.left;
-					var top    = rect.top;
+					var left = rect.left;
+					var top = rect.top;
 
 					renderer.setViewport( left, top, width, height );
 					renderer.setScissor( left, top, width, height );

examples/webgl_multiple_elements_text.html

@@ -44,9 +44,7 @@
 				text-align: center;
 			}
 
-			a {
-				color: #0080ff;
-			}
+			a { color: #0080ff; }
 
 			.math {
 
@@ -131,7 +129,7 @@
 
 				views = document.querySelectorAll( '.view' );
 
-				for ( var n = 0 ; n < views.length ; n++ ) {
+				for ( var n = 0; n < views.length; n ++ ) {
 
 					var scene = new THREE.Scene();
 					scene.background = new THREE.Color( 0xffffff );
@@ -141,14 +139,14 @@
 
 					var vertices = [];
 
-					if ( views[n].lattice ) {
+					if ( views[ n ].lattice ) {
 
 						var range = balls / 2;
-						for ( var i = -range ; i <= range ; i++ ) {
+						for ( var i = - range; i <= range; i ++ ) {
 
-							for ( var j = -range ; j <= range ; j++ ) {
+							for ( var j = - range; j <= range; j ++ ) {
 
-								for ( var k = -range ; k <= range ; k++ ) {
+								for ( var k = - range; k <= range; k ++ ) {
 
 									vertices.push( i, j, k );
 
@@ -160,7 +158,7 @@
 
 					} else {
 
-						for ( var m = 0 ; m < Math.pow( balls, 3 ) ; m++ ) {
+						for ( var m = 0; m < Math.pow( balls, 3 ); m ++ ) {
 
 							var i = balls * Math.random() - balls / 2;
 							var j = balls * Math.random() - balls / 2;
@@ -240,19 +238,21 @@
 				renderer.setClearColor( 0x000000 );
 				renderer.setScissorTest( true );
 
-				scenes.forEach( function( scene ) {
+				scenes.forEach( function ( scene ) {
 
 					var rect = scene.userData.view.getBoundingClientRect();
 					// check if it's offscreen. If so skip it
-					if ( rect.bottom < 0 || rect.top  > renderer.domElement.clientHeight ||
-						 rect.right  < 0 || rect.left > renderer.domElement.clientWidth ) {
-						return;  // it's off screen
+					if ( rect.bottom < 0 || rect.top > renderer.domElement.clientHeight ||
+						 rect.right < 0 || rect.left > renderer.domElement.clientWidth ) {
+
+						return; // it's off screen
+
 					}
 					// set the viewport
-					var width  = rect.right - rect.left;
+					var width = rect.right - rect.left;
 					var height = rect.bottom - rect.top;
-					var left   = rect.left;
-					var top    = rect.top;
+					var left = rect.left;
+					var top = rect.top;
 
 					renderer.setViewport( left, top, width, height );
 					renderer.setScissor( left, top, width, height );
@@ -265,7 +265,7 @@
 					var point = new THREE.Vector3();
 					var offset = new THREE.Vector3();
 
-					for ( var i = 0 ; i < position.count; i ++ ) {
+					for ( var i = 0; i < position.count; i ++ ) {
 
 						point.fromBufferAttribute( scene.userData.geometry1.attributes.position, i );
 
@@ -342,7 +342,7 @@
 
 			var parent = document.scripts[ document.scripts.length - 1 ].parentNode;
 
-			parent.displacement = function( x, y, z, t, target ) {
+			parent.displacement = function ( x, y, z, t, target ) {
 
 				return target.set( Math.sin( x - t ), 0, 0 );
 
@@ -362,7 +362,7 @@
 
 			var parent = document.scripts[ document.scripts.length - 1 ].parentNode;
 
-			parent.displacement = function( x, y, z, t, target ) {
+			parent.displacement = function ( x, y, z, t, target ) {
 
 				return target.set( Math.sin( x - t ), 0, 0 );
 
@@ -456,7 +456,7 @@
 
 			var parent = document.scripts[ document.scripts.length - 1 ].parentNode;
 
-			parent.displacement = function( x, y, z, t, target ) {
+			parent.displacement = function ( x, y, z, t, target ) {
 
 				if ( x * x + y * y < 0.01 ) {
 
@@ -487,7 +487,7 @@
 
 			var parent = document.scripts[ document.scripts.length - 1 ].parentNode;
 
-			parent.displacement = function( x, y, z, t, target ) {
+			parent.displacement = function ( x, y, z, t, target ) {
 
 				if ( x * x + y * y < 0.01 ) {
 
@@ -592,7 +592,7 @@
 
 			var parent = document.scripts[ document.scripts.length - 1 ].parentNode;
 
-			parent.displacement = function( x, y, z, t, target ) {
+			parent.displacement = function ( x, y, z, t, target ) {
 
 				if ( x * x + y * y + z * z < 0.01 ) {
 
@@ -604,7 +604,7 @@
 					var theta = Math.acos( z / r );
 					var phi = Math.atan2( y, x );
 
-					return target.set( 3 * Math.cos( phi ) * Math.sin( theta ) * Math.sin( r - t ) / r , 3 * Math.sin( phi ) * Math.sin( theta ) * Math.sin( r - t ) / r , 3 * Math.cos( theta ) * Math.sin( r - t ) / r );
+					return target.set( 3 * Math.cos( phi ) * Math.sin( theta ) * Math.sin( r - t ) / r, 3 * Math.sin( phi ) * Math.sin( theta ) * Math.sin( r - t ) / r, 3 * Math.cos( theta ) * Math.sin( r - t ) / r );
 
 				}
 
@@ -624,7 +624,7 @@
 
 			var parent = document.scripts[ document.scripts.length - 1 ].parentNode;
 
-			parent.displacement = function( x, y, z, t, target ) {
+			parent.displacement = function ( x, y, z, t, target ) {
 
 				if ( x * x + y * y + z * z < 0.01 ) {
 
@@ -636,9 +636,10 @@
 					var theta = Math.acos( z / r );
 					var phi = Math.atan2( y, x );
 
-					return target.set( 3 * Math.cos( phi ) * Math.sin( theta ) * Math.sin( r - t ) / r , 3 * Math.sin( phi ) * Math.sin( theta ) * Math.sin( r - t ) / r , 3 * Math.cos( theta ) * Math.sin( r - t ) / r );
+					return target.set( 3 * Math.cos( phi ) * Math.sin( theta ) * Math.sin( r - t ) / r, 3 * Math.sin( phi ) * Math.sin( theta ) * Math.sin( r - t ) / r, 3 * Math.cos( theta ) * Math.sin( r - t ) / r );
 
 				}
+
 			};
 
 			parent.lattice = false;

examples/webgl_multiple_renderers.html

@@ -49,7 +49,6 @@
 
 			var mesh1, mesh2, mesh3;
 			var color = new THREE.Color();
-			var vec = new THREE.Vector3();
 
 			init();
 			animate();

examples/webgl_multiple_views.html

@@ -64,10 +64,12 @@
 					eye: [ 0, 300, 1800 ],
 					up: [ 0, 1, 0 ],
 					fov: 30,
-					updateCamera: function ( camera, scene, mouseX, mouseY ) {
+					updateCamera: function ( camera, scene, mouseX ) {
+
 					  camera.position.x += mouseX * 0.05;
-					  camera.position.x = Math.max( Math.min( camera.position.x, 2000 ), -2000 );
+					  camera.position.x = Math.max( Math.min( camera.position.x, 2000 ), - 2000 );
 					  camera.lookAt( scene.position );
+
 					}
 				},
 				{
@@ -79,10 +81,12 @@
 					eye: [ 0, 1800, 0 ],
 					up: [ 0, 0, 1 ],
 					fov: 45,
-					updateCamera: function ( camera, scene, mouseX, mouseY ) {
+					updateCamera: function ( camera, scene, mouseX ) {
+
 					  camera.position.x -= mouseX * 0.05;
-					  camera.position.x = Math.max( Math.min( camera.position.x, 2000 ), -2000 );
+					  camera.position.x = Math.max( Math.min( camera.position.x, 2000 ), - 2000 );
 					  camera.lookAt( camera.position.clone().setY( 0 ) );
+
 					}
 				},
 				{
@@ -94,10 +98,12 @@
 					eye: [ 1400, 800, 1400 ],
 					up: [ 0, 1, 0 ],
 					fov: 60,
-					updateCamera: function ( camera, scene, mouseX, mouseY ) {
+					updateCamera: function ( camera, scene, mouseX ) {
+
 					  camera.position.y -= mouseX * 0.05;
-					  camera.position.y = Math.max( Math.min( camera.position.y, 1600 ), -1600 );
+					  camera.position.y = Math.max( Math.min( camera.position.y, 1600 ), - 1600 );
 					  camera.lookAt( scene.position );
+
 					}
 				}
 			];
@@ -109,9 +115,9 @@
 
 				container = document.getElementById( 'container' );
 
-				for (var ii =  0; ii < views.length; ++ii ) {
+				for ( var ii = 0; ii < views.length; ++ ii ) {
 
-					var view = views[ii];
+					var view = views[ ii ];
 					var camera = new THREE.PerspectiveCamera( view.fov, window.innerWidth / window.innerHeight, 1, 10000 );
 					camera.position.fromArray( view.eye );
 					camera.up.fromArray( view.up );
@@ -148,19 +154,19 @@
 
 				shadowMesh = new THREE.Mesh( shadowGeo, shadowMaterial );
 				shadowMesh.position.y = - 250;
-				shadowMesh.rotation.x = - Math. PI / 2;
+				shadowMesh.rotation.x = - Math.PI / 2;
 				scene.add( shadowMesh );
 
 				shadowMesh = new THREE.Mesh( shadowGeo, shadowMaterial );
 				shadowMesh.position.x = - 400;
 				shadowMesh.position.y = - 250;
-				shadowMesh.rotation.x = - Math. PI / 2;
+				shadowMesh.rotation.x = - Math.PI / 2;
 				scene.add( shadowMesh );
 
 				shadowMesh = new THREE.Mesh( shadowGeo, shadowMaterial );
 				shadowMesh.position.x = 400;
 				shadowMesh.position.y = - 250;
-				shadowMesh.rotation.x = - Math. PI / 2;
+				shadowMesh.rotation.x = - Math.PI / 2;
 				scene.add( shadowMesh );
 
 				var radius = 200;
@@ -244,10 +250,10 @@
 
 				if ( windowWidth != window.innerWidth || windowHeight != window.innerHeight ) {
 
-					windowWidth  = window.innerWidth;
+					windowWidth = window.innerWidth;
 					windowHeight = window.innerHeight;
 
-					renderer.setSize ( windowWidth, windowHeight );
+					renderer.setSize( windowWidth, windowHeight );
 
 				}
 
@@ -259,22 +265,23 @@
 				stats.update();
 
 				requestAnimationFrame( animate );
+
 			}
 
 			function render() {
 
 				updateSize();
 
-				for ( var ii = 0; ii < views.length; ++ii ) {
+				for ( var ii = 0; ii < views.length; ++ ii ) {
 
-					var view = views[ii];
+					var view = views[ ii ];
 					var camera = view.camera;
 
 					view.updateCamera( camera, scene, mouseX, mouseY );
 
-					var left   = Math.floor( windowWidth  * view.left );
-					var top    = Math.floor( windowHeight * view.top );
-					var width  = Math.floor( windowWidth  * view.width );
+					var left = Math.floor( windowWidth * view.left );
+					var top = Math.floor( windowHeight * view.top );
+					var width = Math.floor( windowWidth * view.width );
 					var height = Math.floor( windowHeight * view.height );
 
 					renderer.setViewport( left, top, width, height );

examples/webgl_nearestneighbour.html

@@ -80,10 +80,6 @@
 
 			var clock = new THREE.Clock();
 
-			var blocker = document.getElementById( 'blocker' );
-			var instructions = document.getElementById( 'instructions' );
-
-
 			function init() {
 
 				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000000 );
@@ -128,7 +124,7 @@
 						tex1: { value: imagePreviewTexture },
 						zoom: { value: 9.0 }
 					},
-					vertexShader:   document.getElementById( 'vertexshader' ).textContent,
+					vertexShader: document.getElementById( 'vertexshader' ).textContent,
 					fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
 					transparent: true
 				} );
@@ -137,7 +133,7 @@
 				//create particles with buffer geometry
 				var distanceFunction = function ( a, b ) {
 
-					return Math.pow( a[ 0 ] - b [0 ], 2 ) +  Math.pow( a[ 1 ] - b[ 1 ], 2 ) +  Math.pow( a[ 2 ] - b[ 2 ], 2 );
+					return Math.pow( a[ 0 ] - b[ 0 ], 2 ) + Math.pow( a[ 1 ] - b[ 1 ], 2 ) + Math.pow( a[ 2 ] - b[ 2 ], 2 );
 
 				};
 
@@ -183,6 +179,7 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				controls.handleResize();
+
 			}
 
 			function animate() {

examples/webgl_octree.html

@@ -24,7 +24,6 @@
 				renderer,
 				octree,
 				geometry = new THREE.BoxBufferGeometry( 50, 50, 50 ),
-				material,
 				mesh,
 				meshes = [],
 				meshesSearch = [],
@@ -157,9 +156,7 @@
 
 					}
 
-				}
-				// else remove objects from octree
-				else {
+				} else { // else remove objects from octree
 
 					// get object
 
@@ -203,7 +200,7 @@
 
 				// revert previous search objects to base color
 
-				for ( i = 0, il = meshesSearch.length; i < il; i++ ) {
+				for ( i = 0, il = meshesSearch.length; i < il; i ++ ) {
 
 					meshesSearch[ i ].object.material.color.copy( base );
 
@@ -228,7 +225,7 @@
 
 				// set color of all meshes found in search
 
-				for ( i = 0, il = meshesSearch.length; i < il; i++ ) {
+				for ( i = 0, il = meshesSearch.length; i < il; i ++ ) {
 
 					meshesSearch[ i ].object.material.color.copy( found );
 

examples/webgl_octree_raycasting.html

@@ -32,22 +32,16 @@
 		var octree;
 
 		var objects = [];
-		var objectsSearch = [];
 		var totalFaces = 0;
 
 		var simpleMeshCount = 5000;
 		var radius = 100;
 		var radiusMax = radius * 10;
 		var radiusMaxHalf = radiusMax * 0.5;
-		var radiusSearch = radius * 0.75;
 
 		var baseColor = 0x333333;
-		var foundColor = 0x12C0E3;
 		var intersectColor = 0x00D66B;
 
-		var clock = new THREE.Clock();
-		var searchDelay = 1;
-		var searchInterval = 0;
 		var useOctree = true;
 
 		var raycaster = new THREE.Raycaster();
@@ -103,7 +97,7 @@
 
 			var simpleGeometry = new THREE.BoxGeometry( 1, 1, 1 );
 
-			for ( var i = 0; i < simpleMeshCount - 1; i++ ) {
+			for ( var i = 0; i < simpleMeshCount - 1; i ++ ) {
 
 				totalFaces += simpleGeometry.faces.length;
 
@@ -169,19 +163,19 @@
 			toggle.style.background = '#FFFFFF';
 			container.appendChild( toggle );
 
-			var checkbox = document.createElement('input');
+			var checkbox = document.createElement( 'input' );
 			checkbox.type = "checkbox";
 			checkbox.name = "octreeToggle";
 			checkbox.value = "value";
 			checkbox.id = "octreeToggle";
 			checkbox.checked = true;
 
-			var label = document.createElement('label');
+			var label = document.createElement( 'label' );
 			label.htmlFor = "octreeToggle";
-			label.appendChild(document.createTextNode('Use Octree') );
+			label.appendChild( document.createTextNode( 'Use Octree' ) );
 
-			toggle.appendChild(checkbox);
-			toggle.appendChild(label);
+			toggle.appendChild( checkbox );
+			toggle.appendChild( label );
 
 			// events
 
@@ -192,9 +186,9 @@
 
 		}
 
-		function toggleOctree () {
+		function toggleOctree() {
 
-			useOctree = !useOctree;
+			useOctree = ! useOctree;
 
 		}
 
@@ -317,14 +311,13 @@
 
 				numObjects = octreeObjects.length;
 
-				for ( var i = 0, il = numObjects; i < il; i++ ) {
+				for ( var i = 0, il = numObjects; i < il; i ++ ) {
 
 					numFaces += octreeObjects[ i ].faces.length;
 
 				}
 
-			}
-			else {
+			} else {
 
 				intersections = raycaster.intersectObjects( objects );
 				numObjects = objects.length;
@@ -345,8 +338,7 @@
 
 				document.body.style.cursor = 'pointer';
 
-			}
-			else if ( intersected ) {
+			} else if ( intersected ) {
 
 				intersected.material.color.setHex( baseColor );
 				intersected = null;

examples/webgl_panorama_cube.html

@@ -96,7 +96,7 @@
 
 			var imageObj = new Image();
 
-			imageObj.onload = function() {
+			imageObj.onload = function () {
 
 				var canvas, context;
 				var tileWidth = imageObj.height;
@@ -108,7 +108,7 @@
 					canvas.height = tileWidth;
 					canvas.width = tileWidth;
 					context.drawImage( imageObj, tileWidth * i, 0, tileWidth, tileWidth, 0, 0, tileWidth, tileWidth );
-					textures[ i ].image = canvas
+					textures[ i ].image = canvas;
 					textures[ i ].needsUpdate = true;
 
 				}

examples/webgl_panorama_dualfisheye.html

@@ -41,11 +41,14 @@
 			var camera, scene, renderer;
 
 			var isUserInteracting = false,
-			onMouseDownMouseX = 0, onMouseDownMouseY = 0,
-			lon = 0, onMouseDownLon = 0,
-			lat = 0, onMouseDownLat = 0,
-			phi = 0, theta = 0,
-			distance = 500;
+				lon = 0, lat = 0,
+				phi = 0, theta = 0,
+				distance = 500,
+				onPointerDownPointerX = 0,
+				onPointerDownPointerY = 0,
+
+				onPointerDownLon = 0,
+				onPointerDownLat = 0;
 
 			init();
 			animate();
@@ -153,7 +156,7 @@
 
 			}
 
-			function onDocumentMouseUp( event ) {
+			function onDocumentMouseUp() {
 
 				isUserInteracting = false;
 

examples/webgl_panorama_equirectangular.html

@@ -43,10 +43,10 @@
 			var camera, scene, renderer;
 
 			var isUserInteracting = false,
-			onMouseDownMouseX = 0, onMouseDownMouseY = 0,
-			lon = 0, onMouseDownLon = 0,
-			lat = 0, onMouseDownLat = 0,
-			phi = 0, theta = 0;
+				onMouseDownMouseX = 0, onMouseDownMouseY = 0,
+				lon = 0, onMouseDownLon = 0,
+				lat = 0, onMouseDownLat = 0,
+				phi = 0, theta = 0;
 
 			init();
 			animate();
@@ -98,13 +98,13 @@
 
 				}, false );
 
-				document.addEventListener( 'dragenter', function ( event ) {
+				document.addEventListener( 'dragenter', function () {
 
 					document.body.style.opacity = 0.5;
 
 				}, false );
 
-				document.addEventListener( 'dragleave', function ( event ) {
+				document.addEventListener( 'dragleave', function () {
 
 					document.body.style.opacity = 1;
 
@@ -171,7 +171,7 @@
 
 			}
 
-			function onPointerUp( event ) {
+			function onPointerUp() {
 
 				isUserInteracting = false;
 

examples/webgl_performance.html

@@ -103,7 +103,7 @@
 
 			}
 
-			function onDocumentMouseMove(event) {
+			function onDocumentMouseMove( event ) {
 
 				mouseX = ( event.clientX - windowHalfX ) * 10;
 				mouseY = ( event.clientY - windowHalfY ) * 10;

examples/webgl_performance_doublesided.html

@@ -33,8 +33,6 @@
 
 			var camera, scene, renderer;
 
-			var mesh, geometry;
-
 			var mouseX = 0, mouseY = 0;
 
 			var SCREEN_WIDTH = window.innerWidth,
@@ -65,7 +63,7 @@
 				scene.add( light );
 
 				var light = new THREE.PointLight( 0xff1100, 1, 5500 );
-				light.position.set( -4000, 0, 0 );
+				light.position.set( - 4000, 0, 0 );
 				scene.add( light );
 
 				var light = new THREE.PointLight( 0xffaa00, 2, 3000 );
@@ -75,10 +73,10 @@
 				var path = "textures/cube/SwedishRoyalCastle/";
 				var format = '.jpg';
 				var urls = [
-						path + 'px' + format, path + 'nx' + format,
-						path + 'py' + format, path + 'ny' + format,
-						path + 'pz' + format, path + 'nz' + format
-					];
+					path + 'px' + format, path + 'nx' + format,
+					path + 'py' + format, path + 'ny' + format,
+					path + 'pz' + format, path + 'nz' + format
+				];
 
 				var reflectionCube = new THREE.CubeTextureLoader().load( urls );
 				reflectionCube.format = THREE.RGBFormat;
@@ -125,7 +123,7 @@
 
 			//
 
-			function onWindowResize( event ) {
+			function onWindowResize() {
 
 				SCREEN_WIDTH = window.innerWidth;
 				SCREEN_HEIGHT = window.innerHeight;
@@ -140,7 +138,7 @@
 
 			}
 
-			function onDocumentMouseMove(event) {
+			function onDocumentMouseMove( event ) {
 
 				mouseX = ( event.clientX - windowHalfX ) * 10;
 				mouseY = ( event.clientY - windowHalfY ) * 10;

examples/webgl_performance_static.html

@@ -25,8 +25,6 @@
 
 			var camera, scene, renderer;
 
-			var mesh, zmesh, lightMesh, geometry;
-
 			var mouseX = 0, mouseY = 0;
 
 			var windowHalfX = window.innerWidth / 2;
@@ -103,7 +101,7 @@
 
 			}
 
-			function onDocumentMouseMove(event) {
+			function onDocumentMouseMove( event ) {
 
 				mouseX = ( event.clientX - windowHalfX ) * 10;
 				mouseY = ( event.clientY - windowHalfY ) * 10;

examples/webgl_physics_cloth.html

@@ -21,9 +21,7 @@
 				padding: 5px;
 			}
 
-			a {
-				color: #a06851;
-			}
+			a { color: #a06851; }
 		</style>
 	</head>
 	<body>
@@ -47,8 +45,6 @@
 
 			}
 
-			// - Global variables -
-
 			// Graphics variables
 			var container, stats;
 			var camera, controls, scene, renderer;
@@ -56,7 +52,7 @@
 			var clock = new THREE.Clock();
 
 			// Physics variables
-			var gravityConstant = -9.8;
+			var gravityConstant = - 9.8;
 			var physicsWorld;
 			var rigidBodies = [];
 			var margin = 0.05;
@@ -64,17 +60,12 @@
 			var cloth;
 			var transformAux1 = new Ammo.btTransform();
 
-			var time = 0;
 			var armMovement = 0;
 
-			// - Main code -
-
 			init();
 			animate();
 
 
-			// - Functions -
-
 			function init() {
 
 				initGraphics();
@@ -96,7 +87,7 @@
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xbfd1e5 );
 
-				camera.position.set( -12, 7, 4 );
+				camera.position.set( - 12, 7, 4 );
 
 				controls = new THREE.OrbitControls( camera );
 				controls.target.set( 0, 2, 0 );
@@ -113,13 +104,13 @@
 				scene.add( ambientLight );
 
 				var light = new THREE.DirectionalLight( 0xffffff, 1 );
-				light.position.set( -7, 10, 15 );
+				light.position.set( - 7, 10, 15 );
 				light.castShadow = true;
 				var d = 10;
-				light.shadow.camera.left = -d;
+				light.shadow.camera.left = - d;
 				light.shadow.camera.right = d;
 				light.shadow.camera.top = d;
-				light.shadow.camera.bottom = -d;
+				light.shadow.camera.bottom = - d;
 
 				light.shadow.camera.near = 2;
 				light.shadow.camera.far = 50;
@@ -127,7 +118,7 @@
 				light.shadow.mapSize.x = 1024;
 				light.shadow.mapSize.y = 1024;
 
-				light.shadow.bias = -0.003;
+				light.shadow.bias = - 0.003;
 				scene.add( light );
 
 
@@ -153,7 +144,7 @@
 				var broadphase = new Ammo.btDbvtBroadphase();
 				var solver = new Ammo.btSequentialImpulseConstraintSolver();
 				var softBodySolver = new Ammo.btDefaultSoftBodySolver();
-				physicsWorld = new Ammo.btSoftRigidDynamicsWorld( dispatcher, broadphase, solver, collisionConfiguration, softBodySolver);
+				physicsWorld = new Ammo.btSoftRigidDynamicsWorld( dispatcher, broadphase, solver, collisionConfiguration, softBodySolver );
 				physicsWorld.setGravity( new Ammo.btVector3( 0, gravityConstant, 0 ) );
 				physicsWorld.getWorldInfo().set_m_gravity( new Ammo.btVector3( 0, gravityConstant, 0 ) );
 
@@ -170,13 +161,15 @@
 				var ground = createParalellepiped( 40, 1, 40, 0, pos, quat, new THREE.MeshPhongMaterial( { color: 0xFFFFFF } ) );
 				ground.castShadow = true;
 				ground.receiveShadow = true;
-				textureLoader.load( "textures/grid.png", function( texture ) {
+				textureLoader.load( "textures/grid.png", function ( texture ) {
+
 					texture.wrapS = THREE.RepeatWrapping;
 					texture.wrapT = THREE.RepeatWrapping;
 					texture.repeat.set( 40, 40 );
 					ground.material.map = texture;
 					ground.material.needsUpdate = true;
-				} );
+
+	} );
 
 				// Wall
 				var brickMass = 0.5;
@@ -195,17 +188,21 @@
 					pos.z = z0;
 
 					if ( oddRow ) {
+
 						pos.z -= 0.25 * brickLength;
-					}
 
-					var nRow = oddRow? numBricksLength + 1 : numBricksLength;
+		}
+
+					var nRow = oddRow ? numBricksLength + 1 : numBricksLength;
 					for ( var i = 0; i < nRow; i ++ ) {
 
 						var brickLengthCurrent = brickLength;
 						var brickMassCurrent = brickMass;
 						if ( oddRow && ( i == 0 || i == nRow - 1 ) ) {
+
 							brickLengthCurrent *= 0.5;
 							brickMassCurrent *= 0.5;
+
 						}
 
 						var brick = createParalellepiped( brickDepth, brickHeight, brickLengthCurrent, brickMassCurrent, pos, quat, createMaterial() );
@@ -213,14 +210,18 @@
 						brick.receiveShadow = true;
 
 						if ( oddRow && ( i == 0 || i == nRow - 2 ) ) {
+
 							pos.z += 0.75 * brickLength;
-						}
-						else {
+
+						} else {
+
 							pos.z += brickLength;
+
 						}
 
 					}
 					pos.y += brickHeight;
+
 				}
 
 				// The cloth
@@ -229,9 +230,7 @@
 				var clothHeight = 3;
 				var clothNumSegmentsZ = clothWidth * 5;
 				var clothNumSegmentsY = clothHeight * 5;
-				var clothSegmentLengthZ = clothWidth / clothNumSegmentsZ;
-				var clothSegmentLengthY = clothHeight / clothNumSegmentsY;
-				var clothPos = new THREE.Vector3( -3, 3, 2 );
+				var clothPos = new THREE.Vector3( - 3, 3, 2 );
 
 				//var clothGeometry = new THREE.BufferGeometry();
 				var clothGeometry = new THREE.PlaneBufferGeometry( clothWidth, clothHeight, clothNumSegmentsZ, clothNumSegmentsY );
@@ -243,12 +242,14 @@
 				cloth.castShadow = true;
 				cloth.receiveShadow = true;
 				scene.add( cloth );
-				textureLoader.load( "textures/grid.png", function( texture ) {
+				textureLoader.load( "textures/grid.png", function ( texture ) {
+
 					texture.wrapS = THREE.RepeatWrapping;
 					texture.wrapT = THREE.RepeatWrapping;
 					texture.repeat.set( clothNumSegmentsZ, clothNumSegmentsY );
 					cloth.material.map = texture;
 					cloth.material.needsUpdate = true;
+
 				} );
 
 				// Cloth physic object
@@ -264,7 +265,7 @@
 
 				clothSoftBody.setTotalMass( 0.9, false );
 				Ammo.castObject( clothSoftBody, Ammo.btCollisionObject ).getCollisionShape().setMargin( margin * 3 );
-				physicsWorld.addSoftBody( clothSoftBody, 1, -1 );
+				physicsWorld.addSoftBody( clothSoftBody, 1, - 1 );
 				cloth.userData.physicsBody = clothSoftBody;
 				// Disable deactivation
 				clothSoftBody.setActivationState( 4 );
@@ -295,7 +296,7 @@
 
 				// Hinge constraint to move the arm
 				var pivotA = new Ammo.btVector3( 0, pylonHeight * 0.5, 0 );
-				var pivotB = new Ammo.btVector3( 0, -0.2, - armLength * 0.5 );
+				var pivotB = new Ammo.btVector3( 0, - 0.2, - armLength * 0.5 );
 				var axis = new Ammo.btVector3( 0, 1, 0 );
 				hinge = new Ammo.btHingeConstraint( pylon.userData.physicsBody, arm.userData.physicsBody, pivotA, pivotB, axis, axis, true );
 				physicsWorld.addConstraint( hinge, true );
@@ -336,10 +337,12 @@
 				scene.add( threeObject );
 
 				if ( mass > 0 ) {
+
 					rigidBodies.push( threeObject );
 
 					// Disable deactivation
 					body.setActivationState( 4 );
+
 				}
 
 				physicsWorld.addRigidBody( body );
@@ -347,36 +350,42 @@
 			}
 
 			function createRandomColor() {
+
 				return Math.floor( Math.random() * ( 1 << 24 ) );
+
 			}
 
 			function createMaterial() {
-					return new THREE.MeshPhongMaterial( { color: createRandomColor() } );
+
+				return new THREE.MeshPhongMaterial( { color: createRandomColor() } );
+
 			}
 
 			function initInput() {
 
-					window.addEventListener( 'keydown', function( event ) {
+				window.addEventListener( 'keydown', function ( event ) {
+
+					switch ( event.keyCode ) {
 
-						switch ( event.keyCode ) {
-							// Q
-							case 81:
-								armMovement = 1;
+						// Q
+						case 81:
+							armMovement = 1;
 							break;
 
 							// A
-							case 65:
-								armMovement = - 1;
+						case 65:
+							armMovement = - 1;
 							break;
-						}
 
-					}, false );
+					}
+
+				}, false );
 
-					window.addEventListener( 'keyup', function( event ) {
+				window.addEventListener( 'keyup', function () {
 
-						armMovement = 0;
+					armMovement = 0;
 
-					}, false );
+				}, false );
 
 			}
 
@@ -406,8 +415,6 @@
 
 				renderer.render( scene, camera );
 
-				time += deltaTime;
-
 			}
 
 			function updatePhysics( deltaTime ) {
@@ -428,9 +435,9 @@
 
 					var node = nodes.at( i );
 					var nodePos = node.get_m_x();
-					clothPositions[ indexFloat++ ] = nodePos.x();
-					clothPositions[ indexFloat++ ] = nodePos.y();
-					clothPositions[ indexFloat++ ] = nodePos.z();
+					clothPositions[ indexFloat ++ ] = nodePos.x();
+					clothPositions[ indexFloat ++ ] = nodePos.y();
+					clothPositions[ indexFloat ++ ] = nodePos.z();
 
 				}
 				cloth.geometry.computeVertexNormals();
@@ -438,7 +445,8 @@
 				cloth.geometry.attributes.normal.needsUpdate = true;
 
 				// Update rigid bodies
-				for ( var i = 0, il = rigidBodies.length; i < il; i++ ) {
+				for ( var i = 0, il = rigidBodies.length; i < il; i ++ ) {
+
 					var objThree = rigidBodies[ i ];
 					var objPhys = objThree.userData.physicsBody;
 					var ms = objPhys.getMotionState();
@@ -451,6 +459,7 @@
 						objThree.quaternion.set( q.x(), q.y(), q.z(), q.w() );
 
 					}
+
 				}
 
 			}

examples/webgl_physics_rope.html

@@ -21,9 +21,7 @@
 					padding: 5px;
 				}
 
-				a {
-					color: #a06851;
-				}
+				a { color: #a06851; }
 
 		</style>
 	</head>
@@ -48,8 +46,6 @@
 
 		}
 
-		// - Global variables -
-
 		// Graphics variables
 		var container, stats;
 		var camera, controls, scene, renderer;
@@ -57,7 +53,7 @@
 		var clock = new THREE.Clock();
 
 		// Physics variables
-		var gravityConstant = -9.8;
+		var gravityConstant = - 9.8;
 		var collisionConfiguration;
 		var dispatcher;
 		var broadphase;
@@ -70,17 +66,11 @@
 		var rope;
 		var transformAux1 = new Ammo.btTransform();
 
-		var time = 0;
 		var armMovement = 0;
 
-		// - Main code -
-
 		init();
 		animate();
 
-
-		// - Functions -
-
 		function init() {
 
 			initGraphics();
@@ -102,7 +92,7 @@
 			scene = new THREE.Scene();
 			scene.background = new THREE.Color( 0xbfd1e5 );
 
-			camera.position.set( -7, 5, 8 );
+			camera.position.set( - 7, 5, 8 );
 
 			controls = new THREE.OrbitControls( camera );
 			controls.target.set( 0, 2, 0 );
@@ -119,13 +109,13 @@
 			scene.add( ambientLight );
 
 			var light = new THREE.DirectionalLight( 0xffffff, 1 );
-			light.position.set( -10, 10, 5 );
+			light.position.set( - 10, 10, 5 );
 			light.castShadow = true;
 			var d = 10;
-			light.shadow.camera.left = -d;
+			light.shadow.camera.left = - d;
 			light.shadow.camera.right = d;
 			light.shadow.camera.top = d;
-			light.shadow.camera.bottom = -d;
+			light.shadow.camera.bottom = - d;
 
 			light.shadow.camera.near = 2;
 			light.shadow.camera.far = 50;
@@ -135,7 +125,6 @@
 
 			scene.add( light );
 
-
 			container.innerHTML = "";
 
 			container.appendChild( renderer.domElement );
@@ -160,7 +149,7 @@
 			broadphase = new Ammo.btDbvtBroadphase();
 			solver = new Ammo.btSequentialImpulseConstraintSolver();
 			softBodySolver = new Ammo.btDefaultSoftBodySolver();
-			physicsWorld = new Ammo.btSoftRigidDynamicsWorld( dispatcher, broadphase, solver, collisionConfiguration, softBodySolver);
+			physicsWorld = new Ammo.btSoftRigidDynamicsWorld( dispatcher, broadphase, solver, collisionConfiguration, softBodySolver );
 			physicsWorld.setGravity( new Ammo.btVector3( 0, gravityConstant, 0 ) );
 			physicsWorld.getWorldInfo().set_m_gravity( new Ammo.btVector3( 0, gravityConstant, 0 ) );
 
@@ -177,12 +166,14 @@
 			var ground = createParalellepiped( 40, 1, 40, 0, pos, quat, new THREE.MeshPhongMaterial( { color: 0xFFFFFF } ) );
 			ground.castShadow = true;
 			ground.receiveShadow = true;
-			textureLoader.load( "textures/grid.png", function( texture ) {
+			textureLoader.load( "textures/grid.png", function ( texture ) {
+
 				texture.wrapS = THREE.RepeatWrapping;
 				texture.wrapT = THREE.RepeatWrapping;
 				texture.repeat.set( 40, 40 );
 				ground.material.map = texture;
 				ground.material.needsUpdate = true;
+
 			} );
 
 
@@ -195,7 +186,7 @@
 			ball.receiveShadow = true;
 			var ballShape = new Ammo.btSphereShape( ballRadius );
 			ballShape.setMargin( margin );
-			pos.set( -3, 2, 0 );
+			pos.set( - 3, 2, 0 );
 			quat.set( 0, 0, 0, 1 );
 			createRigidBody( ball, ballShape, ballMass, pos, quat );
 			ball.userData.physicsBody.setFriction( 0.5 );
@@ -217,17 +208,21 @@
 				pos.z = z0;
 
 				if ( oddRow ) {
+
 					pos.z -= 0.25 * brickLength;
+
 				}
 
-				var nRow = oddRow? numBricksLength + 1 : numBricksLength;
+				var nRow = oddRow ? numBricksLength + 1 : numBricksLength;
 				for ( var i = 0; i < nRow; i ++ ) {
 
 					var brickLengthCurrent = brickLength;
 					var brickMassCurrent = brickMass;
 					if ( oddRow && ( i == 0 || i == nRow - 1 ) ) {
+
 						brickLengthCurrent *= 0.5;
 						brickMassCurrent *= 0.5;
+
 					}
 
 					var brick = createParalellepiped( brickDepth, brickHeight, brickLengthCurrent, brickMassCurrent, pos, quat, createMaterial() );
@@ -235,14 +230,18 @@
 					brick.receiveShadow = true;
 
 					if ( oddRow && ( i == 0 || i == nRow - 2 ) ) {
+
 						pos.z += 0.75 * brickLength;
-					}
-					else {
+
+					} else {
+
 						pos.z += brickLength;
+
 					}
 
 				}
 				pos.y += brickHeight;
+
 			}
 
 			// The rope
@@ -259,12 +258,16 @@
 			var ropePositions = [];
 			var ropeIndices = [];
 
-			for ( var i = 0; i < ropeNumSegments + 1; i++ ) {
+			for ( var i = 0; i < ropeNumSegments + 1; i ++ ) {
+
 				ropePositions.push( ropePos.x, ropePos.y + i * segmentLength, ropePos.z );
+
 			}
 
-			for ( var i = 0; i < ropeNumSegments; i++ ) {
+			for ( var i = 0; i < ropeNumSegments; i ++ ) {
+
 				ropeIndices.push( i, i + 1 );
+
 			}
 
 			ropeGeometry.setIndex( new THREE.BufferAttribute( new Uint16Array( ropeIndices ), 1 ) );
@@ -285,7 +288,7 @@
 			sbConfig.set_piterations( 10 );
 			ropeSoftBody.setTotalMass( ropeMass, false );
 			Ammo.castObject( ropeSoftBody, Ammo.btCollisionObject ).getCollisionShape().setMargin( margin * 3 );
-			physicsWorld.addSoftBody( ropeSoftBody, 1, -1 );
+			physicsWorld.addSoftBody( ropeSoftBody, 1, - 1 );
 			rope.userData.physicsBody = ropeSoftBody;
 			// Disable deactivation
 			ropeSoftBody.setActivationState( 4 );
@@ -316,7 +319,7 @@
 
 			// Hinge constraint to move the arm
 			var pivotA = new Ammo.btVector3( 0, pylonHeight * 0.5, 0 );
-			var pivotB = new Ammo.btVector3( 0, -0.2, - armLength * 0.5 );
+			var pivotB = new Ammo.btVector3( 0, - 0.2, - armLength * 0.5 );
 			var axis = new Ammo.btVector3( 0, 1, 0 );
 			hinge = new Ammo.btHingeConstraint( pylon.userData.physicsBody, arm.userData.physicsBody, pivotA, pivotB, axis, axis, true );
 			physicsWorld.addConstraint( hinge, true );
@@ -358,10 +361,12 @@
 			scene.add( threeObject );
 
 			if ( mass > 0 ) {
+
 				rigidBodies.push( threeObject );
 
 				// Disable deactivation
 				body.setActivationState( 4 );
+
 			}
 
 			physicsWorld.addRigidBody( body );
@@ -369,32 +374,38 @@
 		}
 
 		function createRandomColor() {
+
 			return Math.floor( Math.random() * ( 1 << 24 ) );
+
 		}
 
 		function createMaterial() {
+
 			return new THREE.MeshPhongMaterial( { color: createRandomColor() } );
+
 		}
 
 		function initInput() {
 
-			window.addEventListener( 'keydown', function( event ) {
+			window.addEventListener( 'keydown', function ( event ) {
 
 				switch ( event.keyCode ) {
+
 					// Q
 					case 81:
 						armMovement = 1;
-					break;
+						break;
 
 					// A
 					case 65:
 						armMovement = - 1;
-					break;
+						break;
+
 				}
 
 			}, false );
 
-			window.addEventListener( 'keyup', function( event ) {
+			window.addEventListener( 'keyup', function () {
 
 				armMovement = 0;
 
@@ -428,8 +439,6 @@
 
 			renderer.render( scene, camera );
 
-			time += deltaTime;
-
 		}
 
 		function updatePhysics( deltaTime ) {
@@ -450,15 +459,16 @@
 
 				var node = nodes.at( i );
 				var nodePos = node.get_m_x();
-				ropePositions[ indexFloat++ ] = nodePos.x();
-				ropePositions[ indexFloat++ ] = nodePos.y();
-				ropePositions[ indexFloat++ ] = nodePos.z();
+				ropePositions[ indexFloat ++ ] = nodePos.x();
+				ropePositions[ indexFloat ++ ] = nodePos.y();
+				ropePositions[ indexFloat ++ ] = nodePos.z();
 
 			}
 			rope.geometry.attributes.position.needsUpdate = true;
 
 			// Update rigid bodies
-			for ( var i = 0, il = rigidBodies.length; i < il; i++ ) {
+			for ( var i = 0, il = rigidBodies.length; i < il; i ++ ) {
+
 				var objThree = rigidBodies[ i ];
 				var objPhys = objThree.userData.physicsBody;
 				var ms = objPhys.getMotionState();
@@ -471,6 +481,7 @@
 					objThree.quaternion.set( q.x(), q.y(), q.z(), q.w() );
 
 				}
+
 			}
 
 		}

examples/webgl_physics_terrain.html

@@ -1,439 +1,446 @@
 <!DOCTYPE html>
 <html lang="en">
-		<head>
-				<title>Ammo.js terrain heightfield demo</title>
-				<meta charset="utf-8">
-				<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
-				<style>
-						body {
-								color: #61443e;
-								font-family:Monospace;
-								font-size:13px;
-								text-align:center;
-
-								background-color: #bfd1e5;
-								margin: 0px;
-								overflow: hidden;
-						}
-
-						#info {
-								position: absolute;
-								top: 0px; width: 100%;
-								padding: 5px;
-						}
-
-						a {
-
-								color: #a06851;
-						}
-
-				</style>
-		</head>
-		<body>
-				<div id="container"><br /><br /><br /><br /><br />Loading...</div>
-				<div id="info">Ammo.js physics terrain heightfield demo</div>
-
-				<script src="../build/three.js"></script>
-				<script src="js/libs/ammo.js"></script>
-				<script src="js/controls/OrbitControls.js"></script>
-				<script src="js/WebGL.js"></script>
-				<script src="js/libs/stats.min.js"></script>
-
-				<script>
-
-					// Detects webgl
-
-					if ( WEBGL.isWebGLAvailable() === false ) {
-
-						document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-						document.getElementById( 'container' ).innerHTML = "";
+	<head>
+		<title>Ammo.js terrain heightfield demo</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<style>
+			body {
+				color: #61443e;
+				font-family:Monospace;
+				font-size:13px;
+				text-align:center;
 
-					}
+				background-color: #bfd1e5;
+				margin: 0px;
+				overflow: hidden;
+			}
 
-					// - Global variables -
+			#info {
+				position: absolute;
+				top: 0px; width: 100%;
+				padding: 5px;
+			}
 
-					// Heightfield parameters
-					var terrainWidthExtents = 100;
-					var terrainDepthExtents = 100;
-					var terrainWidth = 128;
-					var terrainDepth = 128;
-					var terrainHalfWidth = terrainWidth / 2;
-					var terrainHalfDepth = terrainDepth / 2;
-					var terrainMaxHeight = 8;
-					var terrainMinHeight = -2;
+			a { color: #a06851; }
 
-					// Graphics variables
-					var container, stats;
-					var camera, controls, scene, renderer;
-					var terrainMesh, texture;
-					var clock = new THREE.Clock();
+		</style>
+	</head>
+	<body>
+		<div id="container"><br /><br /><br /><br /><br />Loading...</div>
+		<div id="info">Ammo.js physics terrain heightfield demo</div>
 
-					// Physics variables
-					var collisionConfiguration;
-					var dispatcher;
-					var broadphase;
-					var solver;
-					var physicsWorld;
-					var terrainBody;
-					var dynamicObjects = [];
-					var transformAux1 = new Ammo.btTransform();
+		<script src="../build/three.js"></script>
+		<script src="js/libs/ammo.js"></script>
+		<script src="js/controls/OrbitControls.js"></script>
+		<script src="js/WebGL.js"></script>
+		<script src="js/libs/stats.min.js"></script>
 
-					var heightData = null;
-					var ammoHeightData = null;
+		<script>
 
-					var time = 0;
-					var objectTimePeriod = 3;
-					var timeNextSpawn = time + objectTimePeriod;
-					var maxNumObjects = 30;
+			if ( WEBGL.isWebGLAvailable() === false ) {
 
-					// - Main code -
-					init();
-					animate();
+				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
+				document.getElementById( 'container' ).innerHTML = "";
 
-					function init() {
+			}
 
-						heightData = generateHeight( terrainWidth, terrainDepth, terrainMinHeight, terrainMaxHeight );
+			// Heightfield parameters
+			var terrainWidthExtents = 100;
+			var terrainDepthExtents = 100;
+			var terrainWidth = 128;
+			var terrainDepth = 128;
+			var terrainHalfWidth = terrainWidth / 2;
+			var terrainHalfDepth = terrainDepth / 2;
+			var terrainMaxHeight = 8;
+			var terrainMinHeight = - 2;
 
-						initGraphics();
+			// Graphics variables
+			var container, stats;
+			var camera, scene, renderer;
+			var terrainMesh;
+			var clock = new THREE.Clock();
 
-						initPhysics();
+			// Physics variables
+			var collisionConfiguration;
+			var dispatcher;
+			var broadphase;
+			var solver;
+			var physicsWorld;
+			var dynamicObjects = [];
+			var transformAux1 = new Ammo.btTransform();
 
-					}
+			var heightData = null;
+			var ammoHeightData = null;
 
-					function initGraphics() {
+			var time = 0;
+			var objectTimePeriod = 3;
+			var timeNextSpawn = time + objectTimePeriod;
+			var maxNumObjects = 30;
 
-						container = document.getElementById( 'container' );
+			init();
+			animate();
 
-						renderer = new THREE.WebGLRenderer();
-						renderer.setPixelRatio( window.devicePixelRatio );
-						renderer.setSize( window.innerWidth, window.innerHeight );
-						renderer.shadowMap.enabled = true;
+			function init() {
 
-						container.innerHTML = "";
+				heightData = generateHeight( terrainWidth, terrainDepth, terrainMinHeight, terrainMaxHeight );
 
-						container.appendChild( renderer.domElement );
+				initGraphics();
 
-						stats = new Stats();
-						stats.domElement.style.position = 'absolute';
-						stats.domElement.style.top = '0px';
-						container.appendChild( stats.domElement );
+				initPhysics();
 
+			}
 
-						camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.2, 2000 );
+			function initGraphics() {
 
-						scene = new THREE.Scene();
-						scene.background = new THREE.Color( 0xbfd1e5 );
+				container = document.getElementById( 'container' );
 
-						camera.position.y = heightData[ terrainHalfWidth + terrainHalfDepth * terrainWidth ] * ( terrainMaxHeight - terrainMinHeight ) + 5;
+				renderer = new THREE.WebGLRenderer();
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.shadowMap.enabled = true;
 
-						camera.position.z = terrainDepthExtents / 2;
-						camera.lookAt( 0, 0, 0 );
+				container.innerHTML = "";
 
-						controls = new THREE.OrbitControls( camera );
+				container.appendChild( renderer.domElement );
 
-						var geometry = new THREE.PlaneBufferGeometry( terrainWidthExtents, terrainDepthExtents, terrainWidth - 1, terrainDepth - 1 );
-						geometry.rotateX( -Math.PI / 2 );
+				stats = new Stats();
+				stats.domElement.style.position = 'absolute';
+				stats.domElement.style.top = '0px';
+				container.appendChild( stats.domElement );
 
-						var vertices = geometry.attributes.position.array;
 
-						for ( var i = 0, j = 0, l = vertices.length; i < l; i++, j += 3 ) {
+				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.2, 2000 );
 
-							// j + 1 because it is the y component that we modify
-							vertices[ j + 1 ] = heightData[ i ];
+				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xbfd1e5 );
 
-						}
+				camera.position.y = heightData[ terrainHalfWidth + terrainHalfDepth * terrainWidth ] * ( terrainMaxHeight - terrainMinHeight ) + 5;
 
-						geometry.computeVertexNormals();
+				camera.position.z = terrainDepthExtents / 2;
+				camera.lookAt( 0, 0, 0 );
 
-						var groundMaterial = new THREE.MeshPhongMaterial( { color: 0xC7C7C7 } );
-						terrainMesh = new THREE.Mesh( geometry, groundMaterial );
-						terrainMesh.receiveShadow = true;
-						terrainMesh.castShadow = true;
+				var controls = new THREE.OrbitControls( camera );
 
-						scene.add( terrainMesh );
+				var geometry = new THREE.PlaneBufferGeometry( terrainWidthExtents, terrainDepthExtents, terrainWidth - 1, terrainDepth - 1 );
+				geometry.rotateX( - Math.PI / 2 );
 
-						var textureLoader = new THREE.TextureLoader();
-						textureLoader.load("textures/grid.png", function ( texture ) {
-							texture.wrapS = THREE.RepeatWrapping;
-							texture.wrapT = THREE.RepeatWrapping;
-							texture.repeat.set( terrainWidth - 1, terrainDepth - 1 );
-							groundMaterial.map = texture;
-							groundMaterial.needsUpdate = true;
+				var vertices = geometry.attributes.position.array;
 
-						});
+				for ( var i = 0, j = 0, l = vertices.length; i < l; i ++, j += 3 ) {
 
-						var light = new THREE.DirectionalLight( 0xffffff, 1 );
-						light.position.set( 100, 100, 50 );
-						light.castShadow = true;
-						var dLight = 200;
-						var sLight = dLight * 0.25;
-						light.shadow.camera.left = -sLight;
-						light.shadow.camera.right = sLight;
-						light.shadow.camera.top = sLight;
-						light.shadow.camera.bottom = -sLight;
+					// j + 1 because it is the y component that we modify
+					vertices[ j + 1 ] = heightData[ i ];
 
-						light.shadow.camera.near = dLight / 30;
-						light.shadow.camera.far = dLight;
+				}
 
-						light.shadow.mapSize.x = 1024 * 2;
-						light.shadow.mapSize.y = 1024 * 2;
+				geometry.computeVertexNormals();
 
-						scene.add(light);
+				var groundMaterial = new THREE.MeshPhongMaterial( { color: 0xC7C7C7 } );
+				terrainMesh = new THREE.Mesh( geometry, groundMaterial );
+				terrainMesh.receiveShadow = true;
+				terrainMesh.castShadow = true;
 
+				scene.add( terrainMesh );
 
-						window.addEventListener( 'resize', onWindowResize, false );
+				var textureLoader = new THREE.TextureLoader();
+				textureLoader.load( "textures/grid.png", function ( texture ) {
 
-					}
+					texture.wrapS = THREE.RepeatWrapping;
+					texture.wrapT = THREE.RepeatWrapping;
+					texture.repeat.set( terrainWidth - 1, terrainDepth - 1 );
+					groundMaterial.map = texture;
+					groundMaterial.needsUpdate = true;
 
-					function onWindowResize() {
+				} );
 
-						camera.aspect = window.innerWidth / window.innerHeight;
-						camera.updateProjectionMatrix();
+				var light = new THREE.DirectionalLight( 0xffffff, 1 );
+				light.position.set( 100, 100, 50 );
+				light.castShadow = true;
+				var dLight = 200;
+				var sLight = dLight * 0.25;
+				light.shadow.camera.left = - sLight;
+				light.shadow.camera.right = sLight;
+				light.shadow.camera.top = sLight;
+				light.shadow.camera.bottom = - sLight;
 
-						renderer.setSize( window.innerWidth, window.innerHeight );
+				light.shadow.camera.near = dLight / 30;
+				light.shadow.camera.far = dLight;
 
-					}
+				light.shadow.mapSize.x = 1024 * 2;
+				light.shadow.mapSize.y = 1024 * 2;
 
-					function initPhysics() {
+				scene.add( light );
 
-						// Physics configuration
 
-						collisionConfiguration = new Ammo.btDefaultCollisionConfiguration();
-						dispatcher = new Ammo.btCollisionDispatcher( collisionConfiguration );
-						broadphase = new Ammo.btDbvtBroadphase();
-						solver = new Ammo.btSequentialImpulseConstraintSolver();
-						physicsWorld = new Ammo.btDiscreteDynamicsWorld( dispatcher, broadphase, solver, collisionConfiguration );
-						physicsWorld.setGravity( new Ammo.btVector3( 0, -6, 0 ) );
+				window.addEventListener( 'resize', onWindowResize, false );
 
-						// Create the terrain body
+			}
 
-						var groundShape = createTerrainShape();
-						var groundTransform = new Ammo.btTransform();
-						groundTransform.setIdentity();
-						// Shifts the terrain, since bullet re-centers it on its bounding box.
-						groundTransform.setOrigin( new Ammo.btVector3( 0, ( terrainMaxHeight + terrainMinHeight ) / 2, 0 ) );
-						var groundMass = 0;
-						var groundLocalInertia = new Ammo.btVector3( 0, 0, 0 );
-						var groundMotionState = new Ammo.btDefaultMotionState( groundTransform );
-						var groundBody = new Ammo.btRigidBody( new Ammo.btRigidBodyConstructionInfo( groundMass, groundMotionState, groundShape, groundLocalInertia ) );
-						physicsWorld.addRigidBody( groundBody );
+			function onWindowResize() {
 
-					}
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+			}
+
+			function initPhysics() {
+
+				// Physics configuration
+
+				collisionConfiguration = new Ammo.btDefaultCollisionConfiguration();
+				dispatcher = new Ammo.btCollisionDispatcher( collisionConfiguration );
+				broadphase = new Ammo.btDbvtBroadphase();
+				solver = new Ammo.btSequentialImpulseConstraintSolver();
+				physicsWorld = new Ammo.btDiscreteDynamicsWorld( dispatcher, broadphase, solver, collisionConfiguration );
+				physicsWorld.setGravity( new Ammo.btVector3( 0, - 6, 0 ) );
+
+				// Create the terrain body
 
-					function generateHeight( width, depth, minHeight, maxHeight ) {
+				var groundShape = createTerrainShape();
+				var groundTransform = new Ammo.btTransform();
+				groundTransform.setIdentity();
+				// Shifts the terrain, since bullet re-centers it on its bounding box.
+				groundTransform.setOrigin( new Ammo.btVector3( 0, ( terrainMaxHeight + terrainMinHeight ) / 2, 0 ) );
+				var groundMass = 0;
+				var groundLocalInertia = new Ammo.btVector3( 0, 0, 0 );
+				var groundMotionState = new Ammo.btDefaultMotionState( groundTransform );
+				var groundBody = new Ammo.btRigidBody( new Ammo.btRigidBodyConstructionInfo( groundMass, groundMotionState, groundShape, groundLocalInertia ) );
+				physicsWorld.addRigidBody( groundBody );
 
-						// Generates the height data (a sinus wave)
+			}
 
-						var size = width * depth;
-						var data = new Float32Array(size);
+			function generateHeight( width, depth, minHeight, maxHeight ) {
 
-						var hRange = maxHeight - minHeight;
-						var w2 = width / 2;
-						var d2 = depth / 2;
-						var phaseMult = 12;
+				// Generates the height data (a sinus wave)
 
-						var p = 0;
-						for ( var j = 0; j < depth; j++ ) {
-							for ( var i = 0; i < width; i++ ) {
+				var size = width * depth;
+				var data = new Float32Array( size );
 
-								var radius = Math.sqrt(
-										Math.pow( ( i - w2 ) / w2, 2.0 ) +
-										Math.pow( ( j - d2 ) / d2, 2.0 ) );
+				var hRange = maxHeight - minHeight;
+				var w2 = width / 2;
+				var d2 = depth / 2;
+				var phaseMult = 12;
 
-								var height = ( Math.sin( radius * phaseMult ) + 1 ) * 0.5 * hRange + minHeight;
+				var p = 0;
+				for ( var j = 0; j < depth; j ++ ) {
 
-								data[ p ] = height;
+					for ( var i = 0; i < width; i ++ ) {
 
-								p++;
-							}
-						}
+						var radius = Math.sqrt(
+							Math.pow( ( i - w2 ) / w2, 2.0 ) +
+								Math.pow( ( j - d2 ) / d2, 2.0 ) );
 
-						return data;
+						var height = ( Math.sin( radius * phaseMult ) + 1 ) * 0.5 * hRange + minHeight;
+
+						data[ p ] = height;
+
+						p ++;
 
 					}
 
-					function createTerrainShape() {
+				}
 
-						// This parameter is not really used, since we are using PHY_FLOAT height data type and hence it is ignored
-						var heightScale = 1;
+				return data;
 
-						// Up axis = 0 for X, 1 for Y, 2 for Z. Normally 1 = Y is used.
-						var upAxis = 1;
+			}
 
-						// hdt, height data type. "PHY_FLOAT" is used. Possible values are "PHY_FLOAT", "PHY_UCHAR", "PHY_SHORT"
-						var hdt = "PHY_FLOAT";
+			function createTerrainShape() {
 
-						// Set this to your needs (inverts the triangles)
-						var flipQuadEdges = false;
+				// This parameter is not really used, since we are using PHY_FLOAT height data type and hence it is ignored
+				var heightScale = 1;
 
-						// Creates height data buffer in Ammo heap
-						ammoHeightData = Ammo._malloc(4 * terrainWidth * terrainDepth);
+				// Up axis = 0 for X, 1 for Y, 2 for Z. Normally 1 = Y is used.
+				var upAxis = 1;
 
-						// Copy the javascript height data array to the Ammo one.
-						var p = 0;
-						var p2 = 0;
-						for ( var j = 0; j < terrainDepth; j++ ) {
-							for ( var i = 0; i < terrainWidth; i++ ) {
+				// hdt, height data type. "PHY_FLOAT" is used. Possible values are "PHY_FLOAT", "PHY_UCHAR", "PHY_SHORT"
+				var hdt = "PHY_FLOAT";
 
-								// write 32-bit float data to memory
-								Ammo.HEAPF32[ ammoHeightData + p2 >> 2 ] = heightData[ p ];
+				// Set this to your needs (inverts the triangles)
+				var flipQuadEdges = false;
 
-								p++;
+				// Creates height data buffer in Ammo heap
+				ammoHeightData = Ammo._malloc( 4 * terrainWidth * terrainDepth );
 
-								// 4 bytes/float
-								p2 += 4;
-							}
-						}
+				// Copy the javascript height data array to the Ammo one.
+				var p = 0;
+				var p2 = 0;
+				for ( var j = 0; j < terrainDepth; j ++ ) {
 
-						// Creates the heightfield physics shape
-						var heightFieldShape = new Ammo.btHeightfieldTerrainShape(
-							terrainWidth,
-							terrainDepth,
-							ammoHeightData,
-							heightScale,
-							terrainMinHeight,
-							terrainMaxHeight,
-							upAxis,
-							hdt,
-							flipQuadEdges
-							);
+					for ( var i = 0; i < terrainWidth; i ++ ) {
 
-						// Set horizontal scale
-						var scaleX = terrainWidthExtents / ( terrainWidth - 1 );
-						var scaleZ = terrainDepthExtents / ( terrainDepth - 1 );
-						heightFieldShape.setLocalScaling( new Ammo.btVector3( scaleX, 1, scaleZ ) );
+						// write 32-bit float data to memory
+						Ammo.HEAPF32[ ammoHeightData + p2 >> 2 ] = heightData[ p ];
 
-						heightFieldShape.setMargin( 0.05 );
+						p ++;
 
-						return heightFieldShape;
+						// 4 bytes/float
+						p2 += 4;
 
 					}
 
-					function generateObject() {
-
-						var numTypes = 4;
-						var objectType = Math.ceil( Math.random() * numTypes );
-
-						var threeObject = null;
-						var shape = null;
-
-						var objectSize = 3;
-						var margin = 0.05;
-
-						switch (objectType) {
-							case 1:
-								// Sphere
-								var radius = 1 + Math.random() * objectSize;
-								threeObject = new THREE.Mesh( new THREE.SphereBufferGeometry( radius, 20, 20 ), createObjectMaterial() );
-								shape = new Ammo.btSphereShape( radius );
-								shape.setMargin( margin );
-								break;
-							case 2:
-								// Box
-								var sx = 1 + Math.random() * objectSize;
-								var sy = 1 + Math.random() * objectSize;
-								var sz = 1 + Math.random() * objectSize;
-								threeObject = new THREE.Mesh( new THREE.BoxBufferGeometry( sx, sy, sz, 1, 1, 1 ), createObjectMaterial() );
-								shape = new Ammo.btBoxShape( new Ammo.btVector3( sx * 0.5, sy * 0.5, sz * 0.5 ) );
-								shape.setMargin( margin );
-								break;
-							case 3:
-								// Cylinder
-								var radius = 1 + Math.random() * objectSize;
-								var height = 1 + Math.random() * objectSize;
-								threeObject = new THREE.Mesh( new THREE.CylinderBufferGeometry( radius, radius, height, 20, 1 ), createObjectMaterial() );
-								shape = new Ammo.btCylinderShape( new Ammo.btVector3( radius, height * 0.5, radius ) );
-								shape.setMargin(margin);
-								break;
-							default:
-								// Cone
-								var radius = 1 + Math.random() * objectSize;
-								var height = 2 + Math.random() * objectSize;
-								threeObject = new THREE.Mesh( new THREE.ConeBufferGeometry( radius, height, 20, 2 ), createObjectMaterial() );
-								shape = new Ammo.btConeShape( radius, height );
-								break;
-						}
-
-						threeObject.position.set( ( Math.random() - 0.5 ) * terrainWidth * 0.6, terrainMaxHeight + objectSize + 2, ( Math.random() - 0.5 ) * terrainDepth * 0.6 );
-
-						var mass = objectSize * 5;
-						var localInertia = new Ammo.btVector3( 0, 0, 0 );
-						shape.calculateLocalInertia( mass, localInertia );
-						var transform = new Ammo.btTransform();
-						transform.setIdentity();
-						var pos = threeObject.position;
-						transform.setOrigin( new Ammo.btVector3( pos.x, pos.y, pos.z ) );
-						var motionState = new Ammo.btDefaultMotionState( transform );
-						var rbInfo = new Ammo.btRigidBodyConstructionInfo( mass, motionState, shape, localInertia );
-						var body = new Ammo.btRigidBody( rbInfo );
-
-						threeObject.userData.physicsBody = body;
-
-						threeObject.receiveShadow = true;
-						threeObject.castShadow = true;
-
-						scene.add( threeObject );
-						dynamicObjects.push( threeObject );
-
-						physicsWorld.addRigidBody( body );
+				}
+
+				// Creates the heightfield physics shape
+				var heightFieldShape = new Ammo.btHeightfieldTerrainShape(
+					terrainWidth,
+					terrainDepth,
+					ammoHeightData,
+					heightScale,
+					terrainMinHeight,
+					terrainMaxHeight,
+					upAxis,
+					hdt,
+					flipQuadEdges
+				);
 
+				// Set horizontal scale
+				var scaleX = terrainWidthExtents / ( terrainWidth - 1 );
+				var scaleZ = terrainDepthExtents / ( terrainDepth - 1 );
+				heightFieldShape.setLocalScaling( new Ammo.btVector3( scaleX, 1, scaleZ ) );
 
+				heightFieldShape.setMargin( 0.05 );
 
-					}
+				return heightFieldShape;
 
-					function createObjectMaterial() {
-						var c = Math.floor( Math.random() * ( 1 << 24 ) );
-						return new THREE.MeshPhongMaterial( { color: c } );
-					}
+			}
 
-					function animate() {
+			function generateObject() {
 
-						requestAnimationFrame(animate);
+				var numTypes = 4;
+				var objectType = Math.ceil( Math.random() * numTypes );
 
-						render();
-						stats.update();
+				var threeObject = null;
+				var shape = null;
 
-					}
+				var objectSize = 3;
+				var margin = 0.05;
 
-					function render() {
+				switch ( objectType ) {
 
-						var deltaTime = clock.getDelta();
+					case 1:
+						// Sphere
+						var radius = 1 + Math.random() * objectSize;
+						threeObject = new THREE.Mesh( new THREE.SphereBufferGeometry( radius, 20, 20 ), createObjectMaterial() );
+						shape = new Ammo.btSphereShape( radius );
+						shape.setMargin( margin );
+						break;
+					case 2:
+						// Box
+						var sx = 1 + Math.random() * objectSize;
+						var sy = 1 + Math.random() * objectSize;
+						var sz = 1 + Math.random() * objectSize;
+						threeObject = new THREE.Mesh( new THREE.BoxBufferGeometry( sx, sy, sz, 1, 1, 1 ), createObjectMaterial() );
+						shape = new Ammo.btBoxShape( new Ammo.btVector3( sx * 0.5, sy * 0.5, sz * 0.5 ) );
+						shape.setMargin( margin );
+						break;
+					case 3:
+						// Cylinder
+						var radius = 1 + Math.random() * objectSize;
+						var height = 1 + Math.random() * objectSize;
+						threeObject = new THREE.Mesh( new THREE.CylinderBufferGeometry( radius, radius, height, 20, 1 ), createObjectMaterial() );
+						shape = new Ammo.btCylinderShape( new Ammo.btVector3( radius, height * 0.5, radius ) );
+						shape.setMargin( margin );
+						break;
+					default:
+						// Cone
+						var radius = 1 + Math.random() * objectSize;
+						var height = 2 + Math.random() * objectSize;
+						threeObject = new THREE.Mesh( new THREE.ConeBufferGeometry( radius, height, 20, 2 ), createObjectMaterial() );
+						shape = new Ammo.btConeShape( radius, height );
+						break;
 
-						if ( dynamicObjects.length < maxNumObjects && time > timeNextSpawn ) {
-							generateObject();
-							timeNextSpawn = time + objectTimePeriod;
-						}
+				}
 
-						updatePhysics( deltaTime );
+				threeObject.position.set( ( Math.random() - 0.5 ) * terrainWidth * 0.6, terrainMaxHeight + objectSize + 2, ( Math.random() - 0.5 ) * terrainDepth * 0.6 );
 
-						renderer.render( scene, camera );
+				var mass = objectSize * 5;
+				var localInertia = new Ammo.btVector3( 0, 0, 0 );
+				shape.calculateLocalInertia( mass, localInertia );
+				var transform = new Ammo.btTransform();
+				transform.setIdentity();
+				var pos = threeObject.position;
+				transform.setOrigin( new Ammo.btVector3( pos.x, pos.y, pos.z ) );
+				var motionState = new Ammo.btDefaultMotionState( transform );
+				var rbInfo = new Ammo.btRigidBodyConstructionInfo( mass, motionState, shape, localInertia );
+				var body = new Ammo.btRigidBody( rbInfo );
+
+				threeObject.userData.physicsBody = body;
+
+				threeObject.receiveShadow = true;
+				threeObject.castShadow = true;
+
+				scene.add( threeObject );
+				dynamicObjects.push( threeObject );
+
+				physicsWorld.addRigidBody( body );
 
-						time += deltaTime;
 
-					}
 
-					function updatePhysics( deltaTime ) {
+			}
 
-						physicsWorld.stepSimulation( deltaTime, 10 );
+			function createObjectMaterial() {
 
-						// Update objects
-						for ( var i = 0, il = dynamicObjects.length; i < il; i++ ) {
-							var objThree = dynamicObjects[ i ];
-							var objPhys = objThree.userData.physicsBody;
-							var ms = objPhys.getMotionState();
-							if ( ms ) {
+				var c = Math.floor( Math.random() * ( 1 << 24 ) );
+				return new THREE.MeshPhongMaterial( { color: c } );
 
-								ms.getWorldTransform( transformAux1 );
-								var p = transformAux1.getOrigin();
-								var q = transformAux1.getRotation();
-								objThree.position.set( p.x(), p.y(), p.z() );
-								objThree.quaternion.set( q.x(), q.y(), q.z(), q.w() );
+			}
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
+			function render() {
+
+				var deltaTime = clock.getDelta();
+
+				if ( dynamicObjects.length < maxNumObjects && time > timeNextSpawn ) {
+
+					generateObject();
+					timeNextSpawn = time + objectTimePeriod;
+
+				}
+
+				updatePhysics( deltaTime );
+
+				renderer.render( scene, camera );
+
+				time += deltaTime;
+
+			}
+
+			function updatePhysics( deltaTime ) {
+
+				physicsWorld.stepSimulation( deltaTime, 10 );
+
+				// Update objects
+				for ( var i = 0, il = dynamicObjects.length; i < il; i ++ ) {
+
+					var objThree = dynamicObjects[ i ];
+					var objPhys = objThree.userData.physicsBody;
+					var ms = objPhys.getMotionState();
+					if ( ms ) {
+
+						ms.getWorldTransform( transformAux1 );
+						var p = transformAux1.getOrigin();
+						var q = transformAux1.getRotation();
+						objThree.position.set( p.x(), p.y(), p.z() );
+						objThree.quaternion.set( q.x(), q.y(), q.z(), q.w() );
 
-							}
-						}
 					}
 
-				</script>
+				}
+
+			}
+
+		</script>
 
-		</body>
+	</body>
 </html>

examples/webgl_physics_volume.html

@@ -21,9 +21,7 @@
 				padding: 5px;
 			}
 
-			a {
-				color: #a06851;
-			}
+			a { color: #a06851; }
 		</style>
 	</head>
 	<body>
@@ -38,8 +36,6 @@
 
 		<script>
 
-			// Detects webgl
-
 			if ( WEBGL.isWebGLAvailable() === false ) {
 
 				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
@@ -47,8 +43,6 @@
 
 			}
 
-			// - Global variables -
-
 			// Graphics variables
 			var container, stats;
 			var camera, controls, scene, renderer;
@@ -62,7 +56,7 @@
 			var quat = new THREE.Quaternion();
 
 			// Physics variables
-			var gravityConstant = -9.8;
+			var gravityConstant = - 9.8;
 			var physicsWorld;
 			var rigidBodies = [];
 			var softBodies = [];
@@ -70,16 +64,9 @@
 			var transformAux1 = new Ammo.btTransform();
 			var softBodyHelpers = new Ammo.btSoftBodyHelpers();
 
-			var armMovement = 0;
-
-			// - Main code -
-
 			init();
 			animate();
 
-
-			// - Functions -
-
 			function init() {
 
 				initGraphics();
@@ -101,7 +88,7 @@
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xbfd1e5 );
 
-				camera.position.set( -7, 5, 8 );
+				camera.position.set( - 7, 5, 8 );
 
 				controls = new THREE.OrbitControls( camera );
 				controls.target.set( 0, 2, 0 );
@@ -118,13 +105,13 @@
 				scene.add( ambientLight );
 
 				var light = new THREE.DirectionalLight( 0xffffff, 1 );
-				light.position.set( -10, 10, 5 );
+				light.position.set( - 10, 10, 5 );
 				light.castShadow = true;
 				var d = 20;
-				light.shadow.camera.left = -d;
+				light.shadow.camera.left = - d;
 				light.shadow.camera.right = d;
 				light.shadow.camera.top = d;
-				light.shadow.camera.bottom = -d;
+				light.shadow.camera.bottom = - d;
 
 				light.shadow.camera.near = 2;
 				light.shadow.camera.far = 50;
@@ -134,7 +121,6 @@
 
 				scene.add( light );
 
-
 				container.innerHTML = '';
 
 				container.appendChild( renderer.domElement );
@@ -158,7 +144,7 @@
 				var broadphase = new Ammo.btDbvtBroadphase();
 				var solver = new Ammo.btSequentialImpulseConstraintSolver();
 				var softBodySolver = new Ammo.btDefaultSoftBodySolver();
-				physicsWorld = new Ammo.btSoftRigidDynamicsWorld( dispatcher, broadphase, solver, collisionConfiguration, softBodySolver);
+				physicsWorld = new Ammo.btSoftRigidDynamicsWorld( dispatcher, broadphase, solver, collisionConfiguration, softBodySolver );
 				physicsWorld.setGravity( new Ammo.btVector3( 0, gravityConstant, 0 ) );
 				physicsWorld.getWorldInfo().set_m_gravity( new Ammo.btVector3( 0, gravityConstant, 0 ) );
 
@@ -172,14 +158,15 @@
 				var ground = createParalellepiped( 40, 1, 40, 0, pos, quat, new THREE.MeshPhongMaterial( { color: 0xFFFFFF } ) );
 				ground.castShadow = true;
 				ground.receiveShadow = true;
-				textureLoader.load( "textures/grid.png", function( texture ) {
+				textureLoader.load( "textures/grid.png", function ( texture ) {
+
 					texture.wrapS = THREE.RepeatWrapping;
 					texture.wrapT = THREE.RepeatWrapping;
 					texture.repeat.set( 40, 40 );
 					ground.material.map = texture;
 					ground.material.needsUpdate = true;
-				} );
 
+				} );
 
 				// Create soft volumes
 				var volumeMass = 15;
@@ -226,7 +213,7 @@
 				var vertices = new Float32Array( numVertices * 3 );
 				var indices = new ( numFaces * 3 > 65535 ? Uint32Array : Uint16Array )( numFaces * 3 );
 
-				for ( var i = 0; i < numVertices; i++ ) {
+				for ( var i = 0; i < numVertices; i ++ ) {
 
 					var p = geometry.vertices[ i ];
 
@@ -238,7 +225,7 @@
 
 				}
 
-				for ( var i = 0; i < numFaces; i++ ) {
+				for ( var i = 0; i < numFaces; i ++ ) {
 
 					var f = geometry.faces[ i ];
 
@@ -254,6 +241,7 @@
 				bufferGeom.addAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
 
 				return bufferGeom;
+
 			}
 
 			function isEqual( x1, y1, z1, x2, y2, z2 ) {
@@ -280,19 +268,21 @@
 				bufGeometry.ammoIndices = indices;
 				bufGeometry.ammoIndexAssociation = [];
 
-				for ( var i = 0; i < numIdxVertices; i++ ) {
+				for ( var i = 0; i < numIdxVertices; i ++ ) {
 
 					var association = [];
 					bufGeometry.ammoIndexAssociation.push( association );
 
 					var i3 = i * 3;
 
-					for ( var j = 0; j < numVertices; j++ ) {
+					for ( var j = 0; j < numVertices; j ++ ) {
 
 						var j3 = j * 3;
-						if ( isEqual( idxVertices[ i3 ], idxVertices[ i3 + 1 ],  idxVertices[ i3 + 2 ],
-										vertices[ j3 ], vertices[ j3 + 1 ], vertices[ j3 + 2 ] ) ) {
-								association.push( j3 );
+						if ( isEqual( idxVertices[ i3 ], idxVertices[ i3 + 1 ], idxVertices[ i3 + 2 ],
+							vertices[ j3 ], vertices[ j3 + 1 ], vertices[ j3 + 2 ] ) ) {
+
+							association.push( j3 );
+
 						}
 
 					}
@@ -311,19 +301,21 @@
 				volume.frustumCulled = false;
 				scene.add( volume );
 
-				textureLoader.load( "textures/colors.png", function( texture ) {
-						volume.material.map = texture;
-						volume.material.needsUpdate = true;
+				textureLoader.load( "textures/colors.png", function ( texture ) {
+
+					volume.material.map = texture;
+					volume.material.needsUpdate = true;
+
 				} );
 
 				// Volume physic object
 
 				var volumeSoftBody = softBodyHelpers.CreateFromTriMesh(
-						physicsWorld.getWorldInfo(),
-						bufferGeom.ammoVertices,
-						bufferGeom.ammoIndices,
-						bufferGeom.ammoIndices.length / 3,
-						true );
+					physicsWorld.getWorldInfo(),
+					bufferGeom.ammoVertices,
+					bufferGeom.ammoIndices,
+					bufferGeom.ammoIndices.length / 3,
+					true );
 
 				var sbConfig = volumeSoftBody.get_m_cfg();
 				sbConfig.set_viterations( 40 );
@@ -344,7 +336,7 @@
 
 				volumeSoftBody.setTotalMass( mass, false );
 				Ammo.castObject( volumeSoftBody, Ammo.btCollisionObject ).getCollisionShape().setMargin( margin );
-				physicsWorld.addSoftBody( volumeSoftBody, 1, -1 );
+				physicsWorld.addSoftBody( volumeSoftBody, 1, - 1 );
 				volume.userData.physicsBody = volumeSoftBody;
 				// Disable deactivation
 				volumeSoftBody.setActivationState( 4 );
@@ -397,12 +389,13 @@
 
 				physicsWorld.addRigidBody( body );
 
-					return body;
+				return body;
+
 			}
 
 			function initInput() {
 
-				window.addEventListener( 'mousedown', function( event ) {
+				window.addEventListener( 'mousedown', function ( event ) {
 
 					if ( ! clickRequest ) {
 
@@ -486,7 +479,8 @@
 				physicsWorld.stepSimulation( deltaTime, 10 );
 
 				// Update soft volumes
-				for ( var i = 0, il = softBodies.length; i < il; i++ ) {
+				for ( var i = 0, il = softBodies.length; i < il; i ++ ) {
+
 					var volume = softBodies[ i ];
 					var geometry = volume.geometry;
 					var softBody = volume.userData.physicsBody;
@@ -509,17 +503,20 @@
 
 						var assocVertex = association[ j ];
 
-						for ( var k = 0, kl = assocVertex.length; k < kl; k++ ) {
+						for ( var k = 0, kl = assocVertex.length; k < kl; k ++ ) {
+
 							var indexVertex = assocVertex[ k ];
 							volumePositions[ indexVertex ] = x;
 							volumeNormals[ indexVertex ] = nx;
-							indexVertex++;
+							indexVertex ++;
 							volumePositions[ indexVertex ] = y;
 							volumeNormals[ indexVertex ] = ny;
-							indexVertex++;
+							indexVertex ++;
 							volumePositions[ indexVertex ] = z;
 							volumeNormals[ indexVertex ] = nz;
+
 						}
+
 					}
 
 					geometry.attributes.position.needsUpdate = true;
@@ -528,7 +525,8 @@
 				}
 
 				// Update rigid bodies
-				for ( var i = 0, il = rigidBodies.length; i < il; i++ ) {
+				for ( var i = 0, il = rigidBodies.length; i < il; i ++ ) {
+
 					var objThree = rigidBodies[ i ];
 					var objPhys = objThree.userData.physicsBody;
 					var ms = objPhys.getMotionState();
@@ -541,6 +539,7 @@
 						objThree.quaternion.set( q.x(), q.y(), q.z(), q.w() );
 
 					}
+
 				}
 
 			}

examples/webgl_points_billboards.html

@@ -106,7 +106,7 @@
 
 				var gui = new dat.GUI();
 
-				gui.add( material, 'sizeAttenuation' ).onChange( function() {
+				gui.add( material, 'sizeAttenuation' ).onChange( function () {
 
 					material.needsUpdate = true;
 
@@ -155,6 +155,7 @@
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 
 				}
+
 			}
 
 			function onDocumentTouchMove( event ) {

examples/webgl_points_dynamic.html

@@ -76,6 +76,8 @@
 
 			function init() {
 
+				var container = document.querySelector( '#container' );
+
 				camera = new THREE.PerspectiveCamera( 20, window.innerWidth / window.innerHeight, 1, 50000 );
 				camera.position.set( 0, 700, 7000 );
 
@@ -91,10 +93,10 @@
 
 					var positions = combineBuffer( object, 'position' );
 
-					createMesh( positions, scene, 4.05,  -500, -350,   600, 0xff7744 );
-					createMesh( positions, scene, 4.05,   500, -350,     0, 0xff5522 );
-					createMesh( positions, scene, 4.05,  -250, -350,  1500, 0xff9922 );
-					createMesh( positions, scene, 4.05,  -250, -350, -1500, 0xff99ff );
+					createMesh( positions, scene, 4.05, - 500, - 350, 600, 0xff7744 );
+					createMesh( positions, scene, 4.05, 500, - 350, 0, 0xff5522 );
+					createMesh( positions, scene, 4.05, - 250, - 350, 1500, 0xff9922 );
+					createMesh( positions, scene, 4.05, - 250, - 350, - 1500, 0xff99ff );
 
 				} );
 
@@ -102,18 +104,18 @@
 
 					var positions = combineBuffer( object, 'position' );
 
-					createMesh( positions, scene, 4.05, -1000, -350,    0, 0xffdd44 );
-					createMesh( positions, scene, 4.05,     0, -350,    0, 0xffffff );
-					createMesh( positions, scene, 4.05,  1000, -350,  400, 0xff4422 );
-					createMesh( positions, scene, 4.05,   250, -350, 1500, 0xff9955 );
-					createMesh( positions, scene, 4.05,   250, -350, 2500, 0xff77dd );
+					createMesh( positions, scene, 4.05, - 1000, - 350, 0, 0xffdd44 );
+					createMesh( positions, scene, 4.05, 0, - 350, 0, 0xffffff );
+					createMesh( positions, scene, 4.05, 1000, - 350, 400, 0xff4422 );
+					createMesh( positions, scene, 4.05, 250, - 350, 1500, 0xff9955 );
+					createMesh( positions, scene, 4.05, 250, - 350, 2500, 0xff77dd );
 
 				} );
 
 
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
-				renderer.setSize( window.innerWidth,window.innerHeight );
+				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.autoClear = false;
 				container.appendChild( renderer.domElement );
 
@@ -121,7 +123,7 @@
 				scene.add( parent );
 
 				var grid = new THREE.Points( new THREE.PlaneBufferGeometry( 15000, 15000, 64, 64 ), new THREE.PointsMaterial( { color: 0xff0000, size: 10 } ) );
-				grid.position.y = -400;
+				grid.position.y = - 400;
 				grid.rotation.x = - Math.PI / 2;
 				parent.add( grid );
 
@@ -154,7 +156,7 @@
 			}
 
 
-			function onWindowResize( event ) {
+			function onWindowResize() {
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
@@ -186,7 +188,7 @@
 
 				} );
 
-				var combined = new Float32Array(count);
+				var combined = new Float32Array( count );
 
 				let offset = 0;
 
@@ -217,13 +219,13 @@
 
 				var clones = [
 
-					[  6000, 0, -4000 ],
-					[  5000, 0, 0 ],
-					[  1000, 0, 5000 ],
-					[  1000, 0, -5000 ],
-					[  4000, 0, 2000 ],
-					[ -4000, 0, 1000 ],
-					[ -5000, 0, -5000 ],
+					[ 6000, 0, - 4000 ],
+					[ 5000, 0, 0 ],
+					[ 1000, 0, 5000 ],
+					[ 1000, 0, - 5000 ],
+					[ 4000, 0, 2000 ],
+					[ - 4000, 0, 1000 ],
+					[ - 5000, 0, - 5000 ],
 
 					[ 0, 0, 0 ]
 
@@ -231,7 +233,7 @@
 
 				for ( var i = 0; i < clones.length; i ++ ) {
 
-					var c = ( i < clones.length -1 ) ? 0x252525 : color;
+					var c = ( i < clones.length - 1 ) ? 0x252525 : color;
 
 					mesh = new THREE.Points( geometry, new THREE.PointsMaterial( { size: 30, color: c } ) );
 					mesh.scale.x = mesh.scale.y = mesh.scale.z = scale;
@@ -253,7 +255,7 @@
 
 			}
 
-			function animate () {
+			function animate() {
 
 				requestAnimationFrame( animate );
 				render();
@@ -261,22 +263,22 @@
 
 			}
 
-			function render () {
+			function render() {
 
 				var delta = 10 * clock.getDelta();
 
 				delta = delta < 2 ? delta : 2;
 
-				parent.rotation.y += -0.02 * delta;
+				parent.rotation.y += - 0.02 * delta;
 
-				for( var j = 0; j < clonemeshes.length; j ++ ) {
+				for ( var j = 0; j < clonemeshes.length; j ++ ) {
 
 					var cm = clonemeshes[ j ];
-					cm.mesh.rotation.y += -0.1 * delta * cm.speed;
+					cm.mesh.rotation.y += - 0.1 * delta * cm.speed;
 
 				}
 
-				for( var j = 0; j < meshes.length; j ++ ) {
+				for ( var j = 0; j < meshes.length; j ++ ) {
 
 					var data = meshes[ j ];
 					var positions = data.mesh.geometry.attributes.position;
@@ -292,7 +294,7 @@
 
 						if ( data.direction === 0 ) {
 
-							data.direction = -1;
+							data.direction = - 1;
 
 						}
 
@@ -343,7 +345,7 @@
 									i,
 									px - ( px - ix ) / dx * data.speed * delta * ( 0.85 - Math.random() ),
 									py - ( py - iy ) / dy * data.speed * delta * ( 1 + Math.random() ),
-									pz - ( pz - iz ) / dz * data.speed * delta * ( 0.85 - Math.random() ),
+									pz - ( pz - iz ) / dz * data.speed * delta * ( 0.85 - Math.random() )
 								);
 
 							} else {
@@ -379,7 +381,7 @@
 
 						if ( data.delay <= 0 ) {
 
-							data.direction = -1;
+							data.direction = - 1;
 							data.speed = 15;
 							data.verticesUp = 0;
 							data.delay = 120;

examples/webgl_points_sprites.html

@@ -92,23 +92,23 @@
 				geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
 
 				parameters = [
-					[ [ 1.0, 0.2, 0.5 ], sprite2, 20 ],
-					[ [ 0.95, 0.1, 0.5 ], sprite3, 15 ],
-					[ [ 0.90, 0.05, 0.5 ], sprite1, 10 ],
-					[ [ 0.85, 0, 0.5 ], sprite5, 8 ],
-					[ [ 0.80, 0, 0.5 ], sprite4, 5 ]
+					[[ 1.0, 0.2, 0.5 ], sprite2, 20 ],
+					[[ 0.95, 0.1, 0.5 ], sprite3, 15 ],
+					[[ 0.90, 0.05, 0.5 ], sprite1, 10 ],
+					[[ 0.85, 0, 0.5 ], sprite5, 8 ],
+					[[ 0.80, 0, 0.5 ], sprite4, 5 ]
 				];
 
 				for ( var i = 0; i < parameters.length; i ++ ) {
 
-					var color  = parameters[ i ][ 0 ];
+					var color = parameters[ i ][ 0 ];
 					var sprite = parameters[ i ][ 1 ];
-					var size   = parameters[ i ][ 2 ];
+					var size = parameters[ i ][ 2 ];
 
-					materials[ i ] = new THREE.PointsMaterial( { size: size, map: sprite, blending: THREE.AdditiveBlending, depthTest: false, transparent : true } );
+					materials[ i ] = new THREE.PointsMaterial( { size: size, map: sprite, blending: THREE.AdditiveBlending, depthTest: false, transparent: true } );
 					materials[ i ].color.setHSL( color[ 0 ], color[ 1 ], color[ 2 ] );
 
-					var particles = new THREE.Points( geometry, materials[i] );
+					var particles = new THREE.Points( geometry, materials[ i ] );
 
 					particles.rotation.x = Math.random() * 6;
 					particles.rotation.y = Math.random() * 6;
@@ -138,7 +138,7 @@
 					texture: true
 				};
 
-				gui.add( params, 'texture' ).onChange( function( value ) {
+				gui.add( params, 'texture' ).onChange( function ( value ) {
 
 					for ( var i = 0; i < materials.length; i ++ ) {
 
@@ -251,7 +251,6 @@
 
 			}
 
-
 		</script>
 	</body>
 </html>

examples/webgl_postprocessing_advanced.html

@@ -87,7 +87,7 @@
 			var halfWidth = width / 2;
 			var halfHeight = height / 2;
 
-			var materialColor, material2D, quadBG, quadMask, renderScene;
+			var quadBG, quadMask, renderScene;
 
 			var delta = 0.01;
 
@@ -100,7 +100,7 @@
 
 				//
 
-				cameraOrtho = new THREE.OrthographicCamera( -halfWidth, halfWidth, halfHeight, -halfHeight, -10000, 10000 );
+				cameraOrtho = new THREE.OrthographicCamera( - halfWidth, halfWidth, halfHeight, - halfHeight, - 10000, 10000 );
 				cameraOrtho.position.z = 100;
 
 				cameraPerspective = new THREE.PerspectiveCamera( 50, width / height, 1, 10000 );
@@ -114,11 +114,11 @@
 				//
 
 				directionalLight = new THREE.DirectionalLight( 0xffffff );
-				directionalLight.position.set( 0, -0.1, 1 ).normalize();
+				directionalLight.position.set( 0, - 0.1, 1 ).normalize();
 				sceneModel.add( directionalLight );
 
 				var loader = new THREE.GLTFLoader();
-				loader.load( "models/gltf/LeePerrySmith/LeePerrySmith.glb", function( gltf ) {
+				loader.load( "models/gltf/LeePerrySmith/LeePerrySmith.glb", function ( gltf ) {
 
 					createMesh( gltf.scene.children[ 0 ].geometry, sceneModel, 100 );
 
@@ -127,12 +127,12 @@
 				//
 
 				var materialColor = new THREE.MeshBasicMaterial( {
-					map:  new THREE.TextureLoader().load( "textures/cube/SwedishRoyalCastle/pz.jpg" ),
+					map: new THREE.TextureLoader().load( "textures/cube/SwedishRoyalCastle/pz.jpg" ),
 					depthTest: false
 				} );
 
 				quadBG = new THREE.Mesh( new THREE.PlaneBufferGeometry( 1, 1 ), materialColor );
-				quadBG.position.z = -500;
+				quadBG.position.z = - 500;
 				quadBG.scale.set( width, height, 1 );
 				sceneBG.add( quadBG );
 
@@ -140,8 +140,8 @@
 
 				var sceneMask = new THREE.Scene();
 
-				quadMask = new THREE.Mesh( new THREE.PlaneBufferGeometry( 1, 1 ), new THREE.MeshBasicMaterial( { color: 0xffaa00 } )  );
-				quadMask.position.z = -300;
+				quadMask = new THREE.Mesh( new THREE.PlaneBufferGeometry( 1, 1 ), new THREE.MeshBasicMaterial( { color: 0xffaa00 } ) );
+				quadMask.position.z = - 300;
 				quadMask.scale.set( width / 2, height / 2, 1 );
 				sceneMask.add( quadMask );
 
@@ -164,19 +164,19 @@
 				//
 
 				stats = new Stats();
-				//container.appendChild( stats.dom );
+				container.appendChild( stats.dom );
 
 				//
 
 				var shaderBleach = THREE.BleachBypassShader;
 				var shaderSepia = THREE.SepiaShader;
 				var shaderVignette = THREE.VignetteShader;
-				var shaderCopy = THREE.CopyShader;
+				// var shaderCopy = THREE.CopyShader;
 
 				var effectBleach = new THREE.ShaderPass( shaderBleach );
 				var effectSepia = new THREE.ShaderPass( shaderSepia );
 				var effectVignette = new THREE.ShaderPass( shaderVignette );
-				var effectCopy = new THREE.ShaderPass( shaderCopy );
+				// var effectCopy = new THREE.ShaderPass( shaderCopy );
 
 				effectBleach.uniforms[ "opacity" ].value = 0.95;
 
@@ -222,7 +222,7 @@
 					stencilBuffer: true
 				};
 
-				var rtWidth  = width / 2;
+				var rtWidth = width / 2;
 				var rtHeight = height / 2;
 
 				//
@@ -292,17 +292,13 @@
 				//composer4.addPass( clearMask );
 				composer4.addPass( effectVignette );
 
-				//
-
-				//onWindowResize();
-
 				renderScene.uniforms[ "tDiffuse" ].value = composerScene.renderTarget2.texture;
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
 			}
 
-			function onWindowResize( event ) {
+			function onWindowResize() {
 
 				halfWidth = window.innerWidth / 2;
 				halfHeight = window.innerHeight / 2;
@@ -310,10 +306,10 @@
 				cameraPerspective.aspect = window.innerWidth / window.innerHeight;
 				cameraPerspective.updateProjectionMatrix();
 
-				cameraOrtho.left = -halfWidth;
+				cameraOrtho.left = - halfWidth;
 				cameraOrtho.right = halfWidth;
 				cameraOrtho.top = halfHeight;
-				cameraOrtho.bottom = -halfHeight;
+				cameraOrtho.bottom = - halfHeight;
 
 				cameraOrtho.updateProjectionMatrix();
 
@@ -333,12 +329,6 @@
 
 			}
 
-			function getText( id ) {
-
-				return document.getElementById( id ).textContent;
-
-			}
-
 			function createMesh( geometry, scene, scale ) {
 
 				var mat2 = new THREE.MeshPhongMaterial( {
@@ -347,13 +337,13 @@
 					specular: 0x080808,
 					shininess: 20,
 					map: new THREE.TextureLoader().load( "models/gltf/LeePerrySmith/Map-COL.jpg" ),
-					normalMap: new THREE.TextureLoader().load("models/gltf/LeePerrySmith/Infinite-Level_02_Tangent_SmoothUV.jpg" ),
+					normalMap: new THREE.TextureLoader().load( "models/gltf/LeePerrySmith/Infinite-Level_02_Tangent_SmoothUV.jpg" ),
 					normalScale: new THREE.Vector2( 0.75, 0.75 )
 
 				} );
 
 				mesh = new THREE.Mesh( geometry, mat2 );
-				mesh.position.set( 0, -50, 0 );
+				mesh.position.set( 0, - 50, 0 );
 				mesh.scale.set( scale, scale, scale );
 
 				scene.add( mesh );
@@ -376,7 +366,7 @@
 
 				var time = Date.now() * 0.0004;
 
-				if ( mesh ) mesh.rotation.y = -time;
+				if ( mesh ) mesh.rotation.y = - time;
 
 				renderer.setViewport( 0, 0, halfWidth, halfHeight );
 				composerScene.render( delta );

examples/webgl_postprocessing_afterimage.html

@@ -30,7 +30,7 @@
 		<script>
 
 			var camera, scene, renderer, composer;
-			var mesh, light;
+			var mesh;
 
 			var afterimagePass;
 
@@ -57,7 +57,7 @@
 				scene = new THREE.Scene();
 				scene.fog = new THREE.Fog( 0x000000, 1, 1000 );
 
-				var geometry = new THREE.BoxBufferGeometry( 150, 150, 150, 2, 2, 2);
+				var geometry = new THREE.BoxBufferGeometry( 150, 150, 150, 2, 2, 2 );
 				var material = new THREE.MeshNormalMaterial();
 				mesh = new THREE.Mesh( geometry, material );
 				scene.add( mesh );
@@ -75,7 +75,7 @@
 
 			}
 
-			function createGUI(){
+			function createGUI() {
 
 				var gui = new dat.GUI( { name: 'Damp setting' } );
 				gui.add( afterimagePass.uniforms[ "damp" ], 'value', 0, 1 ).step( 0.001 );
@@ -100,7 +100,7 @@
 				mesh.rotation.x += 0.005;
 				mesh.rotation.y += 0.01;
 
-				if( params.enable ){
+				if ( params.enable ) {
 
 					composer.render();
 

examples/webgl_postprocessing_backgrounds.html

@@ -56,7 +56,7 @@
 			var clearPass, texturePass, renderPass;
 			var cameraP, cubeTexturePassP;
 			//var cameraO, cubeTexturePassO;
-			var gui, stats, texture;
+			var gui, stats;
 
 			var params = {
 
@@ -131,13 +131,13 @@
 				cameraP = new THREE.PerspectiveCamera( 65, aspect, 1, 10 );
 				cameraP.position.z = 7;
 
-			//	cameraO = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, 3, 10 );
-			//	cameraO.position.z = 7;
+				//	cameraO = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, 3, 10 );
+				//	cameraO.position.z = 7;
 
-			//	var fov = THREE.Math.degToRad( cameraP.fov );
-			//	var hyperfocus = ( cameraP.near + cameraP.far ) / 2;
-			//	var _height = 2 * Math.tan( fov / 2 ) * hyperfocus;
-			//	cameraO.zoom = height / _height;
+				//	var fov = THREE.Math.degToRad( cameraP.fov );
+				//	var hyperfocus = ( cameraP.near + cameraP.far ) / 2;
+				//	var _height = 2 * Math.tan( fov / 2 ) * hyperfocus;
+				//	cameraO.zoom = height / _height;
 
 				scene = new THREE.Scene();
 
@@ -146,20 +146,20 @@
 
 				var light = new THREE.PointLight( 0xddffdd, 1.0 );
 				light.position.z = 70;
-				light.position.y = -70;
-				light.position.x = -70;
+				light.position.y = - 70;
+				light.position.x = - 70;
 				scene.add( light );
 
 				var light2 = new THREE.PointLight( 0xffdddd, 1.0 );
 				light2.position.z = 70;
-				light2.position.x = -70;
+				light2.position.x = - 70;
 				light2.position.y = 70;
 				scene.add( light2 );
 
 				var light3 = new THREE.PointLight( 0xddddff, 1.0 );
 				light3.position.z = 70;
 				light3.position.x = 70;
-				light3.position.y = -70;
+				light3.position.y = - 70;
 				scene.add( light3 );
 
 				var geometry = new THREE.SphereBufferGeometry( 1, 48, 24 );
@@ -174,12 +174,14 @@
 
 				// postprocessing
 
-				var genCubeUrls = function( prefix, postfix ) {
+				var genCubeUrls = function ( prefix, postfix ) {
+
 					return [
 						prefix + 'px' + postfix, prefix + 'nx' + postfix,
 						prefix + 'py' + postfix, prefix + 'ny' + postfix,
 						prefix + 'pz' + postfix, prefix + 'nz' + postfix
 					];
+
 				};
 
 				composer = new THREE.EffectComposer( renderer );
@@ -191,18 +193,22 @@
 				composer.addPass( texturePass );
 
 				var textureLoader = new THREE.TextureLoader();
-				textureLoader.load( "textures/hardwood2_diffuse.jpg", function( map ) {
+				textureLoader.load( "textures/hardwood2_diffuse.jpg", function ( map ) {
+
 					texturePass.map = map;
-				});
+
+				} );
 
 				cubeTexturePassP = new THREE.CubeTexturePass( cameraP );
 				composer.addPass( cubeTexturePassP );
 
 				var ldrUrls = genCubeUrls( "textures/cube/pisa/", ".png" );
 				new THREE.CubeTextureLoader().load( ldrUrls, function ( ldrCubeMap ) {
+
 					cubeTexturePassP.envMap = ldrCubeMap;
-					console.log( "loaded envmap");
-				});
+					console.log( "loaded envmap" );
+
+				} );
 
 				renderPass = new THREE.RenderPass( scene, cameraP );
 				renderPass.clear = false;
@@ -236,7 +242,7 @@
 				renderer.setSize( width, height );
 
 				var pixelRatio = renderer.getPixelRatio();
-				var newWidth  = Math.floor( width / pixelRatio ) || 1;
+				var newWidth = Math.floor( width / pixelRatio ) || 1;
 				var newHeight = Math.floor( height / pixelRatio ) || 1;
 				composer.setSize( newWidth, newHeight );
 
@@ -251,12 +257,14 @@
 				cameraP.updateMatrixWorld( true );
 
 				var newColor = clearPass.clearColor;
-				switch( params.clearColor ) {
+				switch ( params.clearColor ) {
+
 					case 'blue': newColor = 0x0000ff; break;
 					case 'red': newColor = 0xff0000; break;
 					case 'green': newColor = 0x00ff00; break;
 					case 'white': newColor = 0xffffff; break;
 					case 'black': newColor = 0x000000; break;
+
 				}
 
 				clearPass.enabled = params.clearPass;

examples/webgl_postprocessing_crossfade.html

@@ -22,9 +22,7 @@
 				width: 100%;
 			}
 
-			.info a {
-				color: #00ffff;
-			}
+			a { color: #00ffff; }
 		</style>
 	</head>
 	<body>
@@ -68,10 +66,10 @@
 				stats = new Stats();
 				container.appendChild( stats.dom );
 
-				var sceneA = new Scene( "cube", 5000, 1200, 120, new THREE.Vector3(0,-0.4,0), 0xffffff );
-				var sceneB = new Scene( "sphere", 500, 2000, 50, new THREE.Vector3(0,0.2,0.1), 0x000000 );
+				var sceneA = new Scene( "cube", 5000, 1200, 120, new THREE.Vector3( 0, - 0.4, 0 ), 0xffffff );
+				var sceneB = new Scene( "sphere", 500, 2000, 50, new THREE.Vector3( 0, 0.2, 0.1 ), 0x000000 );
 
-				transition = new Transition(sceneA,sceneB);
+				transition = new Transition( sceneA, sceneB );
 
 			}
 

examples/webgl_postprocessing_dof.html

@@ -16,9 +16,7 @@
 				text-align: center;
 			}
 
-			a {
-				color: #0078ff;
-			}
+			a { color: #0078ff; }
 
 			#info {
 				color: #fff;
@@ -67,7 +65,7 @@
 			var camera, scene, renderer,
 				materials = [], objects = [],
 				singleMaterial, zmaterial = [],
-				parameters, i, j, k, h, color, x, y, z, s, n, nobjects, cubeMaterial;
+				parameters, i, j, k, h, x, y, z, nobjects, cubeMaterial;
 
 			var mouseX = 0, mouseY = 0;
 
@@ -100,10 +98,10 @@
 				var path = "textures/cube/SwedishRoyalCastle/";
 				var format = '.jpg';
 				var urls = [
-						path + 'px' + format, path + 'nx' + format,
-						path + 'py' + format, path + 'ny' + format,
-						path + 'pz' + format, path + 'nz' + format
-					];
+					path + 'px' + format, path + 'nx' + format,
+					path + 'py' + format, path + 'ny' + format,
+					path + 'pz' + format, path + 'nz' + format
+				];
 
 				var textureCube = new THREE.CubeTextureLoader().load( urls );
 
@@ -112,7 +110,7 @@
 
 				singleMaterial = false;
 
-				if( singleMaterial ) zmaterial = [ cubeMaterial ];
+				if ( singleMaterial ) zmaterial = [ cubeMaterial ];
 
 				var geo = new THREE.SphereBufferGeometry( 1, 20, 10 );
 
@@ -126,38 +124,38 @@
 				var count = 0;
 
 				for ( i = 0; i < xgrid; i ++ )
-				for ( j = 0; j < ygrid; j ++ )
-				for ( k = 0; k < zgrid; k ++ ) {
+					for ( j = 0; j < ygrid; j ++ )
+						for ( k = 0; k < zgrid; k ++ ) {
 
-					var mesh;
+							var mesh;
 
-					if ( singleMaterial ) {
+							if ( singleMaterial ) {
 
-						mesh = new THREE.Mesh( geo, zmaterial );
+								mesh = new THREE.Mesh( geo, zmaterial );
 
-					} else {
+							} else {
 
-						mesh = new THREE.Mesh( geo, new THREE.MeshBasicMaterial( parameters ) );
-						materials[ count ] = mesh.material;
+								mesh = new THREE.Mesh( geo, new THREE.MeshBasicMaterial( parameters ) );
+								materials[ count ] = mesh.material;
 
-					}
+							}
 
-					x = 200 * ( i - xgrid/2 );
-					y = 200 * ( j - ygrid/2 );
-					z = 200 * ( k - zgrid/2 );
+							x = 200 * ( i - xgrid / 2 );
+							y = 200 * ( j - ygrid / 2 );
+							z = 200 * ( k - zgrid / 2 );
 
-					mesh.position.set( x, y, z );
-					mesh.scale.set( s, s, s );
+							mesh.position.set( x, y, z );
+							mesh.scale.set( s, s, s );
 
-					mesh.matrixAutoUpdate = false;
-					mesh.updateMatrix();
+							mesh.matrixAutoUpdate = false;
+							mesh.updateMatrix();
 
-					scene.add( mesh );
-					objects.push( mesh );
+							scene.add( mesh );
+							objects.push( mesh );
 
-					count ++;
+							count ++;
 
-				}
+						}
 
 				scene.matrixAutoUpdate = false;
 
@@ -174,15 +172,15 @@
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
-				var effectController  = {
+				var effectController = {
 
-					focus: 		500.0,
+					focus: 500.0,
 					aperture:	5,
 					maxblur:	1.0
 
 				};
 
-				var matChanger = function( ) {
+				var matChanger = function ( ) {
 
 					postprocessing.bokeh.uniforms[ "focus" ].value = effectController.focus;
 					postprocessing.bokeh.uniforms[ "aperture" ].value = effectController.aperture * 0.00001;
@@ -197,6 +195,7 @@
 				gui.close();
 
 				matChanger();
+
 			}
 
 			function onDocumentMouseMove( event ) {
@@ -216,6 +215,7 @@
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 
 				}
+
 			}
 
 			function onDocumentTouchMove( event ) {
@@ -248,10 +248,11 @@
 			}
 
 			function initPostprocessing() {
+
 				var renderPass = new THREE.RenderPass( scene, camera );
 
 				var bokehPass = new THREE.BokehPass( scene, camera, {
-					focus: 		1.0,
+					focus: 1.0,
 					aperture:	0.025,
 					maxblur:	1.0,
 
@@ -286,13 +287,13 @@
 				var time = Date.now() * 0.00005;
 
 				camera.position.x += ( mouseX - camera.position.x ) * 0.036;
-				camera.position.y += ( - (mouseY) - camera.position.y ) * 0.036;
+				camera.position.y += ( - ( mouseY ) - camera.position.y ) * 0.036;
 
 				camera.lookAt( scene.position );
 
-				if ( !singleMaterial ) {
+				if ( ! singleMaterial ) {
 
-					for( i = 0; i < nobjects; i ++ ) {
+					for ( i = 0; i < nobjects; i ++ ) {
 
 						h = ( 360 * ( i / nobjects + time ) % 360 ) / 360;
 						materials[ i ].color.setHSL( h, 1, 0.5 );

examples/webgl_postprocessing_dof2.html

@@ -16,9 +16,7 @@
 				text-align:center;
 			}
 
-			a {
-				color:#0078ff;
-			}
+			a { color:#0078ff; }
 
 			#info {
 				color:#fff;
@@ -31,10 +29,10 @@
 			}
 		</style>
 	</head>
-<!-- TODO
-Setup Number Focus Test Plates
-Use WEBGL Depth buffer support?
--->
+	<!-- TODO
+		Setup Number Focus Test Plates
+		Use WEBGL Depth buffer support?
+	-->
 	<body>
 		<script src="../build/three.js"></script>
 		<script src="js/shaders/BokehShader2.js"></script>
@@ -62,14 +60,13 @@ Use WEBGL Depth buffer support?
 			var windowHalfX = window.innerWidth / 2;
 			var windowHalfY = window.innerHeight / 2;
 
-			var postprocessing = { enabled  : true };
+			var postprocessing = { enabled: true };
 
 			var shaderSettings = {
 				rings: 3,
 				samples: 4
 			};
 
-			var singleMaterial = false;
 			var mouse = new THREE.Vector2();
 			var raycaster = new THREE.Raycaster();
 			var distance = 100;
@@ -142,11 +139,11 @@ Use WEBGL Depth buffer support?
 				var planePiece = new THREE.PlaneBufferGeometry( 10, 10, 1, 1 );
 
 				var planeMat = new THREE.MeshPhongMaterial( {
-						color: 0xffffff * 0.4,
-						shininess: 0.5,
-						specular: 0xffffff,
-						envMap: textureCube,
-						side: THREE.DoubleSide
+					color: 0xffffff * 0.4,
+					shininess: 0.5,
+					specular: 0xffffff,
+					envMap: textureCube,
+					side: THREE.DoubleSide
 				} );
 
 				var rand = Math.random;
@@ -160,8 +157,8 @@ Use WEBGL Depth buffer support?
 					plane.rotation.dz = rand() * 0.1;
 
 					plane.position.set( rand() * 150, 0 + rand() * 300, rand() * 150 );
-					plane.position.dx = (rand()  - 0.5 );
-					plane.position.dz = (rand()  - 0.5 );
+					plane.position.dx = ( rand() - 0.5 );
+					plane.position.dz = ( rand() - 0.5 );
 					scene.add( plane );
 					planes.push( plane );
 
@@ -180,7 +177,7 @@ Use WEBGL Depth buffer support?
 						shininess: 50,
 						reflectivity: 1.0,
 						flatShading: true
-					});
+					} );
 
 					var monkeys = 20;
 
@@ -211,14 +208,14 @@ Use WEBGL Depth buffer support?
 					var ballmaterial = new THREE.MeshPhongMaterial( {
 						color: 0xffffff * Math.random(),
 						shininess: 0.5,
-						specular: 0xffffff ,
+						specular: 0xffffff,
 						envMap: textureCube } );
 
 					var mesh = new THREE.Mesh( geometry, ballmaterial );
 
 					mesh.position.x = ( Math.random() - 0.5 ) * 200;
 					mesh.position.y = Math.random() * 50;
-					mesh.position.z = ( Math.random() - 0.5 )  * 200;
+					mesh.position.z = ( Math.random() - 0.5 ) * 200;
 					mesh.scale.multiplyScalar( 10 );
 					scene.add( mesh );
 
@@ -233,7 +230,7 @@ Use WEBGL Depth buffer support?
 				scene.add( directionalLight );
 
 				var directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
-				directionalLight.position.set( - 2, 1.2, -10 ).normalize();
+				directionalLight.position.set( - 2, 1.2, - 10 ).normalize();
 				scene.add( directionalLight );
 
 				initPostprocessing();
@@ -245,7 +242,7 @@ Use WEBGL Depth buffer support?
 				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 
-				effectController  = {
+				effectController = {
 
 					enabled: true,
 					jsDepthCalculation: true,
@@ -273,7 +270,7 @@ Use WEBGL Depth buffer support?
 
 				};
 
-				var matChanger = function() {
+				var matChanger = function () {
 
 					for ( var e in effectController ) {
 
@@ -288,7 +285,7 @@ Use WEBGL Depth buffer support?
 					postprocessing.enabled = effectController.enabled;
 					postprocessing.bokeh_uniforms[ 'znear' ].value = camera.near;
 					postprocessing.bokeh_uniforms[ 'zfar' ].value = camera.far;
-					camera.setFocalLength(effectController.focalLength);
+					camera.setFocalLength( effectController.focalLength );
 
 				};
 
@@ -310,7 +307,7 @@ Use WEBGL Depth buffer support?
 
 				gui.add( effectController, 'threshold', 0, 1, 0.001 ).onChange( matChanger );
 				gui.add( effectController, 'gain', 0, 100, 0.001 ).onChange( matChanger );
-				gui.add( effectController, 'bias', 0,3, 0.001 ).onChange( matChanger );
+				gui.add( effectController, 'bias', 0, 3, 0.001 ).onChange( matChanger );
 				gui.add( effectController, 'fringe', 0, 5, 0.001 ).onChange( matChanger );
 
 				gui.add( effectController, 'focalLength', 16, 80, 0.001 ).onChange( matChanger );
@@ -321,8 +318,8 @@ Use WEBGL Depth buffer support?
 
 				gui.add( effectController, 'pentagon' ).onChange( matChanger );
 
-				gui.add( shaderSettings, 'rings', 1, 8).step(1).onChange( shaderUpdate );
-				gui.add( shaderSettings, 'samples', 1, 13).step(1).onChange( shaderUpdate );
+				gui.add( shaderSettings, 'rings', 1, 8 ).step( 1 ).onChange( shaderUpdate );
+				gui.add( shaderSettings, 'samples', 1, 13 ).step( 1 ).onChange( shaderUpdate );
 
 				matChanger();
 
@@ -358,6 +355,7 @@ Use WEBGL Depth buffer support?
 					mouse.y = - ( event.touches[ 0 ].pageY - windowHalfY ) / windowHalfY;
 
 				}
+
 			}
 
 			function onDocumentTouchMove( event ) {
@@ -377,7 +375,7 @@ Use WEBGL Depth buffer support?
 
 				postprocessing.scene = new THREE.Scene();
 
-				postprocessing.camera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2,  window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
+				postprocessing.camera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, - 10000, 10000 );
 				postprocessing.camera.position.z = 100;
 
 				postprocessing.scene.add( postprocessing.camera );
@@ -438,7 +436,6 @@ Use WEBGL Depth buffer support?
 
 			}
 
-
 			function smoothstep( near, far, depth ) {
 
 				var x = saturate( ( depth - near ) / ( far - near ) );
@@ -475,15 +472,15 @@ Use WEBGL Depth buffer support?
 
 						var targetDistance = intersects[ 0 ].distance;
 
-						distance += (targetDistance - distance) * 0.03;
+						distance += ( targetDistance - distance ) * 0.03;
 
-						var sdistance = smoothstep(camera.near, camera.far, distance);
+						var sdistance = smoothstep( camera.near, camera.far, distance );
 
-						var ldistance = linearize(1 -  sdistance);
+						var ldistance = linearize( 1 - sdistance );
 
 						postprocessing.bokeh_uniforms[ 'focalDepth' ].value = ldistance;
 
-						effectController['focalDepth'] = ldistance;
+						effectController[ 'focalDepth' ] = ldistance;
 
 					}
 
@@ -534,7 +531,6 @@ Use WEBGL Depth buffer support?
 
 			}
 
-
 		</script>
 	</body>
 </html>

examples/webgl_postprocessing_fxaa.html

@@ -55,6 +55,7 @@
 
 				var loader = new THREE.TextureLoader();
 				loader.load( "textures/fxaa_scene.png", function onLoad( texture ) {
+
 					var image = texture.image;
 					texture.minFilter = THREE.LinearFilter;
 					texture.magFilter = THREE.LinearFilter;
@@ -75,7 +76,7 @@
 					scene1.add( quad1 );
 					scene2.add( quad2 );
 
-					var camera = new THREE.OrthographicCamera( -0.5, 0.5, 0.5, -0.5, -0.5, 0.5 );
+					var camera = new THREE.OrthographicCamera( - 0.5, 0.5, 0.5, - 0.5, - 0.5, 0.5 );
 
 					var container = document.getElementById( 'container' );
 
@@ -92,8 +93,10 @@
 
 					renderer1.render( scene1, camera );
 					renderer2.render( scene2, camera );
-				});
-			})();
+
+				} );
+
+			} )();
 
 		</script>
 	</body>

examples/webgl_postprocessing_glitch.html

@@ -21,9 +21,7 @@
 				width: 100%;
 			}
 
-			label, input {
-				cursor: pointer;
-			}
+			input { cursor: pointer; }
 		</style>
 	</head>
 	<body>
@@ -54,8 +52,10 @@
 			animate();
 
 			function updateOptions() {
-				var wildGlitch = document.getElementById('wildGlitch');
-				glitchPass.goWild=wildGlitch.checked;
+
+				var wildGlitch = document.getElementById( 'wildGlitch' );
+				glitchPass.goWild = wildGlitch.checked;
+
 			}
 
 			function init() {

examples/webgl_postprocessing_godrays.html

@@ -16,9 +16,7 @@
 				text-align:center;
 			}
 
-			a {
-				color:#0078ff;
-			}
+			a { color:#0078ff; }
 
 			#info {
 				color:#fff;
@@ -56,7 +54,7 @@
 
 			var sphereMesh;
 
-			var sunPosition = new THREE.Vector3( 0, 1000, -1000 );
+			var sunPosition = new THREE.Vector3( 0, 1000, - 1000 );
 			var screenSpacePosition = new THREE.Vector3();
 
 			var mouseX = 0, mouseY = 0;
@@ -64,7 +62,7 @@
 			var windowHalfX = window.innerWidth / 2;
 			var windowHalfY = window.innerHeight / 2;
 
-			var postprocessing = { enabled : true };
+			var postprocessing = { enabled: true };
 
 			var orbitRadius = 200;
 
@@ -98,7 +96,7 @@
 				loader.load( 'models/obj/tree.obj', function ( object ) {
 
 					object.material = materialScene;
-					object.position.set( 0, -150, -150 );
+					object.position.set( 0, - 150, - 150 );
 					object.scale.multiplyScalar( 400 );
 					scene.add( object );
 
@@ -179,7 +177,7 @@
 
 				postprocessing.scene = new THREE.Scene();
 
-				postprocessing.camera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2,  window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
+				postprocessing.camera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, - 10000, 10000 );
 				postprocessing.camera.position.z = 100;
 
 				postprocessing.scene.add( postprocessing.camera );
@@ -255,7 +253,7 @@
 					new THREE.PlaneBufferGeometry( window.innerWidth, window.innerHeight ),
 					postprocessing.materialGodraysGenerate
 				);
-				postprocessing.quad.position.z = -9900;
+				postprocessing.quad.position.z = - 9900;
 				postprocessing.scene.add( postprocessing.quad );
 
 			}
@@ -344,7 +342,7 @@
 					postprocessing.godrayMaskUniforms[ "tInput" ].value = postprocessing.rtTextureDepth.texture;
 
 					postprocessing.scene.overrideMaterial = postprocessing.materialGodraysDepthMask;
-					renderer.render( postprocessing.scene, postprocessing.camera, postprocessing.rtTextureDepthMask  );
+					renderer.render( postprocessing.scene, postprocessing.camera, postprocessing.rtTextureDepthMask );
 
 					// -- Render god-rays --
 
@@ -364,7 +362,7 @@
 					// pass 1 - render into first ping-pong target
 
 					var pass = 1.0;
-					var stepLen = filterLen * Math.pow( TAPS_PER_PASS, -pass );
+					var stepLen = filterLen * Math.pow( TAPS_PER_PASS, - pass );
 
 					postprocessing.godrayGenUniforms[ "fStepSize" ].value = stepLen;
 					postprocessing.godrayGenUniforms[ "tInput" ].value = postprocessing.rtTextureDepthMask.texture;
@@ -376,27 +374,27 @@
 					// pass 2 - render into second ping-pong target
 
 					pass = 2.0;
-					stepLen = filterLen * Math.pow( TAPS_PER_PASS, -pass );
+					stepLen = filterLen * Math.pow( TAPS_PER_PASS, - pass );
 
 					postprocessing.godrayGenUniforms[ "fStepSize" ].value = stepLen;
 					postprocessing.godrayGenUniforms[ "tInput" ].value = postprocessing.rtTextureGodRays2.texture;
 
-					renderer.render( postprocessing.scene, postprocessing.camera, postprocessing.rtTextureGodRays1  );
+					renderer.render( postprocessing.scene, postprocessing.camera, postprocessing.rtTextureGodRays1 );
 
 					// pass 3 - 1st RT
 
 					pass = 3.0;
-					stepLen = filterLen * Math.pow( TAPS_PER_PASS, -pass );
+					stepLen = filterLen * Math.pow( TAPS_PER_PASS, - pass );
 
 					postprocessing.godrayGenUniforms[ "fStepSize" ].value = stepLen;
 					postprocessing.godrayGenUniforms[ "tInput" ].value = postprocessing.rtTextureGodRays1.texture;
 
-					renderer.render( postprocessing.scene, postprocessing.camera , postprocessing.rtTextureGodRays2  );
+					renderer.render( postprocessing.scene, postprocessing.camera, postprocessing.rtTextureGodRays2 );
 
 					// final pass - composite god-rays onto colors
 
-					postprocessing.godrayCombineUniforms["tColors"].value = postprocessing.rtTextureColors.texture;
-					postprocessing.godrayCombineUniforms["tGodRays"].value = postprocessing.rtTextureGodRays2.texture;
+					postprocessing.godrayCombineUniforms[ "tColors" ].value = postprocessing.rtTextureColors.texture;
+					postprocessing.godrayCombineUniforms[ "tGodRays" ].value = postprocessing.rtTextureGodRays2.texture;
 
 					postprocessing.scene.overrideMaterial = postprocessing.materialGodraysCombine;
 

examples/webgl_postprocessing_outline.html

@@ -126,13 +126,13 @@
 
 			var conf = new Configuration();
 
-			var controllerVisible = gui.addColor( conf, 'visibleEdgeColor' ).onChange( function ( value ) {
+			gui.addColor( conf, 'visibleEdgeColor' ).onChange( function ( value ) {
 
 				outlinePass.visibleEdgeColor.set( value );
 
 			} );
 
-			var controllerHidden = gui.addColor( conf, 'hiddenEdgeColor' ).onChange( function ( value ) {
+			gui.addColor( conf, 'hiddenEdgeColor' ).onChange( function ( value ) {
 
 				outlinePass.hiddenEdgeColor.set( value );
 

examples/webgl_postprocessing_procedural.html

@@ -81,10 +81,9 @@
 
 		<script>
 
-			var camera, postCamera, postScene, renderer;
+			var postCamera, postScene, renderer;
 			var postMaterial, noiseRandom1DMaterial, noiseRandom2DMaterial, noiseRandom3DMaterial, postQuad;
-			var gui, stats, texture;
-			var index = 0;
+			var stats;
 
 			var params = { procedure: 'noiseRandom3D' };
 
@@ -114,24 +113,23 @@
 
 				// Setup post processing stage
 				postCamera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
-				noiseRandom1DMaterial = new THREE.ShaderMaterial({
+				noiseRandom1DMaterial = new THREE.ShaderMaterial( {
 					vertexShader: document.querySelector( '#procedural-vert' ).textContent.trim(),
 					fragmentShader: document.querySelector( '#noiseRandom1D-frag' ).textContent.trim()
-				});
-				noiseRandom2DMaterial = new THREE.ShaderMaterial({
+				} );
+				noiseRandom2DMaterial = new THREE.ShaderMaterial( {
 					vertexShader: document.querySelector( '#procedural-vert' ).textContent.trim(),
 					fragmentShader: document.querySelector( '#noiseRandom2D-frag' ).textContent.trim()
-				});
-				noiseRandom3DMaterial = new THREE.ShaderMaterial({
+				} );
+				noiseRandom3DMaterial = new THREE.ShaderMaterial( {
 					vertexShader: document.querySelector( '#procedural-vert' ).textContent.trim(),
 					fragmentShader: document.querySelector( '#noiseRandom3D-frag' ).textContent.trim()
-				});
+				} );
 				postMaterial = noiseRandom3DMaterial;
 				var postPlane = new THREE.PlaneBufferGeometry( 2, 2 );
 				postQuad = new THREE.Mesh( postPlane, postMaterial );
 				postScene = new THREE.Scene();
-				postScene.add(postQuad);
-
+				postScene.add( postQuad );
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
@@ -153,8 +151,6 @@
 
 				requestAnimationFrame( animate );
 
-				index ++;
-
 				switch ( params.procedure ) {
 
 					case 'noiseRandom1D': postMaterial = noiseRandom1DMaterial; break;
@@ -165,7 +161,6 @@
 
 				postQuad.material = postMaterial;
 
-
 				// render post FX
 				renderer.render( postScene, postCamera );
 

examples/webgl_postprocessing_rgb_halftone.html

@@ -23,9 +23,7 @@
 				padding: 2px;
 			}
 
-			.info a {
-				color: #00ffff;
-			}
+			a { color: #00ffff; }
 		</style>
 	</head>
 	<body>
@@ -103,12 +101,12 @@
 
 				"void main() {",
 
-					"vUV = uv;",
-					"vNormal = vec3( normal );",
-					"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
+				"vUV = uv;",
+				"vNormal = vec3( normal );",
+				"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
 
 				"}"
-			].join("\n"),
+			].join( "\n" ),
 
 			fragmentShader: [
 				"varying vec2 vUV;",
@@ -116,11 +114,11 @@
 
 				"void main() {",
 
-					"vec4 c = vec4( abs( vNormal ) + vec3( vUV, 0.0 ), 0.0 );",
-					"gl_FragColor = c;",
+				"vec4 c = vec4( abs( vNormal ) + vec3( vUV, 0.0 ), 0.0 );",
+				"gl_FragColor = c;",
 
 				"}"
-			].join("\n")
+			].join( "\n" )
 		} );
 
 		for ( var i = 0; i < 50; ++ i ) {

examples/webgl_postprocessing_sao.html

@@ -15,9 +15,7 @@
 				font-weight: bold;
 			}
 
-			a {
-				color:#00ff78;
-			}
+			a { color:#00ff78; }
 
 			#info {
 				color: #fff;
@@ -62,24 +60,8 @@
 
 			var container, stats;
 			var camera, scene, renderer;
-			var depthMaterial, saoMaterial, saoModulateMaterial, normalMaterial, vBlurMaterial, hBlurMaterial, copyMaterial;
-			var depthRenderTarget, normalRenderTarget, saoRenderTarget, beautyRenderTarget, blurIntermediateRenderTarget;
-            var composer, renderPass, saoPass, copyPass;
+			var composer, renderPass, saoPass;
 			var group;
-			var params = {
-				output: 0,
-				saoBias: 0.5,
-				saoIntensity: 0.25,
-				saoScale: 1,
-				saoKernelRadius: 100,
-				saoMinResolution: 0,
-				saoBlur: true,
-				saoBlurRadius: 12,
-				saoBlurStdDev: 6,
-				saoBlurDepthCutoff: 0.01
-			};
-			var supportsDepthTextureExtension = false;
-			var isWebGL2 = false;
 
 			init();
 			animate();
@@ -109,20 +91,20 @@
 
 				var light = new THREE.PointLight( 0xddffdd, 0.8 );
 				light.position.z = 70;
-				light.position.y = -70;
-				light.position.x = -70;
+				light.position.y = - 70;
+				light.position.x = - 70;
 				scene.add( light );
 
 				var light2 = new THREE.PointLight( 0xffdddd, 0.8 );
 				light2.position.z = 70;
-				light2.position.x = -70;
+				light2.position.x = - 70;
 				light2.position.y = 70;
 				scene.add( light2 );
 
 				var light3 = new THREE.PointLight( 0xddddff, 0.8 );
 				light3.position.z = 70;
 				light3.position.x = 70;
-				light3.position.y = -70;
+				light3.position.y = - 70;
 				scene.add( light3 );
 
 				var light3 = new THREE.AmbientLight( 0xffffff, 0.05 );
@@ -168,7 +150,11 @@
 					'SAO': THREE.SAOPass.OUTPUT.SAO,
 					'Depth': THREE.SAOPass.OUTPUT.Depth,
 					'Normal': THREE.SAOPass.OUTPUT.Normal
-				} ).onChange( function ( value ) { saoPass.params.output = parseInt( value ); } );
+				} ).onChange( function ( value ) {
+
+					saoPass.params.output = parseInt( value );
+
+				} );
 				gui.add( saoPass.params, 'saoBias', - 1, 1 );
 				gui.add( saoPass.params, 'saoIntensity', 0, 1 );
 				gui.add( saoPass.params, 'saoScale', 0, 10 );

examples/webgl_postprocessing_smaa.html

@@ -36,7 +36,7 @@
 			init();
 			animate();
 
-			function init( meshTexture ) {
+			function init() {
 
 				var container = document.getElementById( "container" );
 
@@ -95,7 +95,7 @@
 				renderer.setSize( width, height );
 
 				var pixelRatio = renderer.getPixelRatio();
-				var newWidth  = Math.floor( width * pixelRatio ) || 1;
+				var newWidth = Math.floor( width * pixelRatio ) || 1;
 				var newHeight = Math.floor( height * pixelRatio ) || 1;
 				composer.setSize( newWidth, newHeight );
 

examples/webgl_postprocessing_sobel.html

@@ -140,7 +140,7 @@
 
 			function onWindowResize() {
 
-				camera.aspect =  window.innerWidth / window.innerHeight;
+				camera.aspect = window.innerWidth / window.innerHeight;
 				camera.updateProjectionMatrix();
 
 				renderer.setSize( window.innerWidth, window.innerHeight );

examples/webgl_postprocessing_ssaa.html

@@ -53,7 +53,7 @@
 		<script>
 
 			var camera, scene, renderer, composer, copyPass, ssaaRenderPass;
-			var gui, stats, texture;
+			var gui, stats;
 
 			var param = {
 				sampleLevel: 2
@@ -146,7 +146,7 @@
 				renderer.setSize( width, height );
 
 				var pixelRatio = renderer.getPixelRatio();
-				var newWidth  = Math.floor( width / pixelRatio ) || 1;
+				var newWidth = Math.floor( width / pixelRatio ) || 1;
 				var newHeight = Math.floor( height / pixelRatio ) || 1;
 				composer.setSize( newWidth, newHeight );
 

examples/webgl_postprocessing_ssaa_unbiased.html

@@ -55,7 +55,7 @@
 			var scene, renderer, composer, copyPass;
 			var cameraP, ssaaRenderPassP;
 			var cameraO, ssaaRenderPassO;
-			var gui, stats, texture;
+			var gui, stats;
 
 			var params = {
 				sampleLevel: 4,
@@ -134,20 +134,20 @@
 
 				var light = new THREE.PointLight( 0xddffdd, 1.0 );
 				light.position.z = 70;
-				light.position.y = -70;
-				light.position.x = -70;
+				light.position.y = - 70;
+				light.position.x = - 70;
 				scene.add( light );
 
 				var light2 = new THREE.PointLight( 0xffdddd, 1.0 );
 				light2.position.z = 70;
-				light2.position.x = -70;
+				light2.position.x = - 70;
 				light2.position.y = 70;
 				scene.add( light2 );
 
 				var light3 = new THREE.PointLight( 0xddddff, 1.0 );
 				light3.position.z = 70;
 				light3.position.x = 70;
-				light3.position.y = -70;
+				light3.position.y = - 70;
 				scene.add( light3 );
 
 				var light3 = new THREE.AmbientLight( 0xffffff, 0.05 );
@@ -207,7 +207,7 @@
 				renderer.setSize( width, height );
 
 				var pixelRatio = renderer.getPixelRatio();
-				var newWidth  = Math.floor( width / pixelRatio ) || 1;
+				var newWidth = Math.floor( width / pixelRatio ) || 1;
 				var newHeight = Math.floor( height / pixelRatio ) || 1;
 				composer.setSize( newWidth, newHeight );
 
@@ -219,7 +219,8 @@
 
 				stats.begin();
 
-				if( params.autoRotate ) {
+				if ( params.autoRotate ) {
+
 					for ( var i = 0; i < scene.children.length; i ++ ) {
 
 						var child = scene.children[ i ];
@@ -228,15 +229,18 @@
 						child.rotation.y += 0.01;
 
 					}
+
 				}
 
 				var newColor = ssaaRenderPassP.clearColor;
-				switch( params.clearColor ) {
+				switch ( params.clearColor ) {
+
 					case 'blue': newColor = 0x0000ff; break;
 					case 'red': newColor = 0xff0000; break;
 					case 'green': newColor = 0x00ff00; break;
 					case 'white': newColor = 0xffffff; break;
 					case 'black': newColor = 0x000000; break;
+
 				}
 				ssaaRenderPassP.clearColor = ssaaRenderPassO.clearColor = newColor;
 				ssaaRenderPassP.clearAlpha = ssaaRenderPassO.clearAlpha = params.clearAlpha;
@@ -248,7 +252,7 @@
 				ssaaRenderPassO.enabled = ( params.camera === 'orthographic' );
 
 				ssaaRenderPassP.renderToScreen = ssaaRenderPassO.renderToScreen = params.renderToScreen;
-				copyPass.enabled = !params.renderToScreen;
+				copyPass.enabled = ! params.renderToScreen;
 
 				composer.render();
 

examples/webgl_postprocessing_ssao.html

@@ -22,9 +22,7 @@ Spiral sampling http://web.archive.org/web/20120421191837/http://www.cgafaq.info
 				font-weight: bold;
 			}
 
-			a {
-				color:#00ff78;
-			}
+			a { color:#00ff78; }
 
 			#info {
 				color: #fff;
@@ -127,10 +125,26 @@ Spiral sampling http://web.archive.org/web/20120421191837/http://www.cgafaq.info
 				var gui = new dat.GUI();
 				gui.add( postprocessing, 'enabled' );
 
-				gui.add( postprocessing, 'onlyAO', false ).onChange( function( value ) { ssaoPass.onlyAO = value; } );
-				gui.add( postprocessing, 'radius' ).min( 0 ).max( 64 ).onChange( function( value ) { ssaoPass.radius = value; } );
-				gui.add( postprocessing, 'aoClamp' ).min( 0 ).max( 1 ).onChange( function( value ) { ssaoPass.aoClamp = value; } );
-				gui.add( postprocessing, 'lumInfluence' ).min( 0 ).max( 1 ).onChange( function( value ) { ssaoPass.lumInfluence = value; } );
+				gui.add( postprocessing, 'onlyAO', false ).onChange( function ( value ) {
+
+					ssaoPass.onlyAO = value;
+
+				} );
+				gui.add( postprocessing, 'radius' ).min( 0 ).max( 64 ).onChange( function ( value ) {
+
+					ssaoPass.radius = value;
+
+				} );
+				gui.add( postprocessing, 'aoClamp' ).min( 0 ).max( 1 ).onChange( function ( value ) {
+
+					ssaoPass.aoClamp = value;
+
+				} );
+				gui.add( postprocessing, 'lumInfluence' ).min( 0 ).max( 1 ).onChange( function ( value ) {
+
+					ssaoPass.lumInfluence = value;
+
+				} );
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
@@ -152,7 +166,7 @@ Spiral sampling http://web.archive.org/web/20120421191837/http://www.cgafaq.info
 				ssaoPass.setSize( width, height );
 
 				var pixelRatio = renderer.getPixelRatio();
-				var newWidth  = Math.floor( width / pixelRatio ) || 1;
+				var newWidth = Math.floor( width / pixelRatio ) || 1;
 				var newHeight = Math.floor( height / pixelRatio ) || 1;
 				effectComposer.setSize( newWidth, newHeight );
 

examples/webgl_postprocessing_taa.html

@@ -55,7 +55,7 @@
 		<script>
 
 			var camera, scene, renderer, composer, copyPass, taaRenderPass, renderPass;
-			var gui, stats, texture;
+			var gui, stats;
 			var index = 0;
 
 			var param = { TAAEnabled: "1", TAASampleLevel: 0 };
@@ -74,9 +74,9 @@
 				gui.add( param, 'TAAEnabled', {
 					'Disabled': '0',
 					'Enabled': '1'
-				} ).onFinishChange( function() {
+				} ).onFinishChange( function () {
 
-					if( taaRenderPass ) {
+					if ( taaRenderPass ) {
 
 						taaRenderPass.enabled = ( param.TAAEnabled === "1" );
 						renderPass.enabled = ( param.TAAEnabled !== "1" );
@@ -92,10 +92,12 @@
 					'Level 3: 8 Samples': 3,
 					'Level 4: 16 Samples': 4,
 					'Level 5: 32 Samples': 5
-				} ).onFinishChange( function() {
+				} ).onFinishChange( function () {
+
+					if ( taaRenderPass ) {
 
-					if( taaRenderPass ) {
 						taaRenderPass.sampleLevel = param.TAASampleLevel;
+
 					}
 
 				} );
@@ -173,7 +175,7 @@
 				renderer.setSize( width, height );
 
 				var pixelRatio = renderer.getPixelRatio();
-				var newWidth  = Math.floor( width / pixelRatio ) || 1;
+				var newWidth = Math.floor( width / pixelRatio ) || 1;
 				var newHeight = Math.floor( height / pixelRatio ) || 1;
 				composer.setSize( newWidth, newHeight );
 
@@ -185,7 +187,8 @@
 
 				index ++;
 
-				if( Math.round( index / 200 ) % 2 === 0 ) {
+				if ( Math.round( index / 200 ) % 2 === 0 ) {
+
 					for ( var i = 0; i < scene.children.length; i ++ ) {
 
 						var child = scene.children[ i ];
@@ -194,10 +197,12 @@
 						child.rotation.y += 0.01;
 
 					}
-					if( taaRenderPass ) taaRenderPass.accumulate = false;
-				}
-				else {
-					if( taaRenderPass ) taaRenderPass.accumulate = true;
+					if ( taaRenderPass ) taaRenderPass.accumulate = false;
+
+				} else {
+
+					if ( taaRenderPass ) taaRenderPass.accumulate = true;
+
 				}
 
 				composer.render();

examples/webgl_raycast_texture.html

@@ -30,13 +30,9 @@
 				padding: 5px;
 			}
 
-			.control {
-				margin-bottom: 3px;
-			}
+			.control { margin-bottom: 3px; }
 
-			input {
-				width: 50px;
-			}
+			input { width: 50px; }
 		</style>
 	</head>
 	<body>
@@ -88,7 +84,7 @@
 
 				var that = this;
 				this._background = document.createElement( "img" );
-				this._background.addEventListener( "load", function ( event ) {
+				this._background.addEventListener( "load", function () {
 
 					that._canvas.width = that._background.naturalWidth;
 					that._canvas.height = that._background.naturalHeight;

examples/webgl_raymarching_reflect.html

@@ -266,6 +266,8 @@
 			var geometry, material, mesh;
 			var stats;
 
+			var canvas = document.querySelector( '#canvas' );
+
 			var config = {
 				saveImage: function () {
 

examples/webgl_rtt.html

@@ -22,9 +22,7 @@
 				padding: 5px;
 			}
 
-			a {
-				color: #ffffff;
-			}
+			a { color: #ffffff; }
 
 		</style>
 	</head>
@@ -114,7 +112,7 @@
 				camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.z = 100;
 
-				cameraRTT = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
+				cameraRTT = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, - 10000, 10000 );
 				cameraRTT.position.z = 100;
 
 				//
@@ -128,7 +126,7 @@
 				sceneRTT.add( light );
 
 				light = new THREE.DirectionalLight( 0xffaaaa, 1.5 );
-				light.position.set( 0, 0, -1 ).normalize();
+				light.position.set( 0, 0, - 1 ).normalize();
 				sceneRTT.add( light );
 
 				rtTexture = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, { minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter, format: THREE.RGBFormat } );
@@ -154,7 +152,7 @@
 				var plane = new THREE.PlaneBufferGeometry( window.innerWidth, window.innerHeight );
 
 				quad = new THREE.Mesh( plane, material );
-				quad.position.z = -100;
+				quad.position.z = - 100;
 				sceneRTT.add( quad );
 
 				var geometry = new THREE.TorusBufferGeometry( 100, 25, 15, 30 );
@@ -173,16 +171,16 @@
 				sceneRTT.add( zmesh2 );
 
 				quad = new THREE.Mesh( plane, materialScreen );
-				quad.position.z = -100;
+				quad.position.z = - 100;
 				sceneScreen.add( quad );
 
 				var n = 5,
 					geometry = new THREE.SphereBufferGeometry( 10, 64, 32 ),
 					material2 = new THREE.MeshBasicMaterial( { color: 0xffffff, map: rtTexture.texture } );
 
-				for( var j = 0; j < n; j ++ ) {
+				for ( var j = 0; j < n; j ++ ) {
 
-					for( var i = 0; i < n; i ++ ) {
+					for ( var i = 0; i < n; i ++ ) {
 
 						var mesh = new THREE.Mesh( geometry, material2 );
 
@@ -248,7 +246,7 @@
 
 				if ( material.uniforms.time.value > 1 || material.uniforms.time.value < 0 ) {
 
-					delta *= -1;
+					delta *= - 1;
 
 				}
 

examples/webgl_sandbox.html

@@ -24,9 +24,7 @@
 				z-index:1000;
 			}
 
-			a {
-				color: #ffffff;
-			}
+			a { color: #ffffff; }
 
 		</style>
 	</head>
@@ -48,8 +46,6 @@
 
 			var camera, scene, renderer;
 
-			var mesh, zmesh, lightMesh, geometry;
-
 			var mouseX = 0, mouseY = 0;
 
 			var windowHalfX = window.innerWidth / 2;
@@ -123,7 +119,7 @@
 
 				}
 
-				renderer = new THREE.WebGLRenderer( { antialias : true } );
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
@@ -172,9 +168,9 @@
 					y = x == 0 ? y + 1 : y;
 					p = Math.floor( x ^ y );
 
-					image.data[ i ] = ~~ p * r;
-					image.data[ i + 1 ] = ~~ p * g;
-					image.data[ i + 2 ] = ~~ p * b;
+					image.data[ i ] = ~ ~ p * r;
+					image.data[ i + 1 ] = ~ ~ p * g;
+					image.data[ i + 2 ] = ~ ~ p * b;
 					image.data[ i + 3 ] = 255;
 
 				}
@@ -185,7 +181,7 @@
 
 			}
 
-			function onDocumentMouseMove(event) {
+			function onDocumentMouseMove( event ) {
 
 				mouseX = ( event.clientX - windowHalfX ) * 10;
 				mouseY = ( event.clientY - windowHalfY ) * 10;

examples/webgl_shader.html

@@ -23,10 +23,7 @@
 				padding: 5px;
 			}
 
-			a {
-
-				color: #ffffff;
-			}
+			a { color: #ffffff; }
 
 		</style>
 	</head>
@@ -143,7 +140,7 @@
 
 			}
 
-			function onWindowResize( event ) {
+			function onWindowResize() {
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 

examples/webgl_shader2.html

@@ -208,7 +208,7 @@
 					[ 'fragment_shader4', uniforms1 ]
 				];
 
-				for( var i = 0; i < params.length; i++ ) {
+				for ( var i = 0; i < params.length; i ++ ) {
 
 					var material = new THREE.ShaderMaterial( {
 
@@ -216,7 +216,7 @@
 						vertexShader: document.getElementById( 'vertexShader' ).textContent,
 						fragmentShader: document.getElementById( params[ i ][ 0 ] ).textContent
 
-						} );
+					} );
 
 					var mesh = new THREE.Mesh( geometry, material );
 					mesh.position.x = i - ( params.length - 1 ) / 2;
@@ -238,7 +238,7 @@
 
 			}
 
-			function onWindowResize( event ) {
+			function onWindowResize() {
 
 				camera.aspect = window.innerWidth / window.innerHeight;
 				camera.updateProjectionMatrix();
@@ -269,8 +269,8 @@
 
 					var object = scene.children[ i ];
 
-					object.rotation.y += delta * 0.5 * ( i % 2 ? 1 : -1 );
-					object.rotation.x += delta * 0.5 * ( i % 2 ? -1 : 1 );
+					object.rotation.y += delta * 0.5 * ( i % 2 ? 1 : - 1 );
+					object.rotation.x += delta * 0.5 * ( i % 2 ? - 1 : 1 );
 
 				}
 

examples/webgl_shader_lava.html

@@ -23,10 +23,7 @@
 				padding: 5px;
 			}
 
-			a {
-
-				color: #ffffff;
-			}
+			a { color: #ffffff; }
 
 			#webglmessage a { color:#da0 }
 		</style>
@@ -202,7 +199,7 @@
 
 			}
 
-			function onWindowResize( event ) {
+			function onWindowResize() {
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 

examples/webgl_shaders_ocean.html

@@ -90,13 +90,15 @@
 						textureWidth: 512,
 						textureHeight: 512,
 						waterNormals: new THREE.TextureLoader().load( 'textures/waternormals.jpg', function ( texture ) {
+
 							texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
-						}),
+
+						} ),
 						alpha: 1.0,
 						sunDirection: light.position.clone().normalize(),
 						sunColor: 0xffffff,
 						waterColor: 0x001e0f,
-						distortionScale:  3.7,
+						distortionScale: 3.7,
 						fog: scene.fog !== undefined
 					}
 				);

examples/webgl_shaders_ocean2.html

@@ -16,12 +16,11 @@
 				top: 10px;
 				width: 100%;
 			}
-			a {
-				color: #09f;
-			}
-			#type-status {
-				font-weight: bold;
-			}
+
+			a { color: #09f; }
+
+			#type-status { font-weight: bold; }
+
 		</style>
 	</head>
 	<body>

examples/webgl_shaders_sky.html

@@ -27,9 +27,7 @@
 
 			}
 
-			a {
-				color: #fff;
-			}
+			a { color: #fff; }
 
 		</style>
 	</head>
@@ -51,15 +49,12 @@
 
 		<script>
 
-
 			if ( WEBGL.isWebGLAvailable() === false ) {
 
 				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
 
 			}
 
-			var container;
-
 			var camera, controls, scene, renderer;
 
 			var sky, sunSphere;