Fixed some lgtm.com alerts.

examples/canvas_ascii_effect.html

@@ -30,6 +30,7 @@
 			var container, stats;
 
 			var camera, controls, scene, renderer;
+			var effect;
 
 			var sphere, plane;
 

examples/canvas_geometry_birds.html

@@ -209,16 +209,15 @@
 
 				this.alignment = function ( boids ) {
 
-					var boid, velSum = new THREE.Vector3(),
-					count = 0;
+					var count = 0;
+					var velSum = new THREE.Vector3();
 
 					for ( var i = 0, il = boids.length; i < il; i++ ) {
 
 						if ( Math.random() > 0.6 ) continue;
 
-						boid = boids[ i ];
-
-						distance = boid.position.distanceTo( this.position );
+						var boid = boids[ i ];
+						var distance = boid.position.distanceTo( this.position );
 
 						if ( distance > 0 && distance <= _neighborhoodRadius ) {
 
@@ -249,17 +248,16 @@
 
 				this.cohesion = function ( boids ) {
 
-					var boid, distance,
-					posSum = new THREE.Vector3(),
-					steer = new THREE.Vector3(),
-					count = 0;
+					var count = 0;
+					var posSum = new THREE.Vector3();
+					var steer = new THREE.Vector3();
 
 					for ( var i = 0, il = boids.length; i < il; i ++ ) {
 
 						if ( Math.random() > 0.6 ) continue;
 
-						boid = boids[ i ];
-						distance = boid.position.distanceTo( this.position );
+						var boid = boids[ i ];
+						var distance = boid.position.distanceTo( this.position );
 
 						if ( distance > 0 && distance <= _neighborhoodRadius ) {
 
@@ -292,16 +290,15 @@
 
 				this.separation = function ( boids ) {
 
-					var boid, distance,
-					posSum = new THREE.Vector3(),
-					repulse = new THREE.Vector3();
+					var posSum = new THREE.Vector3();
+					var repulse = new THREE.Vector3();
 
 					for ( var i = 0, il = boids.length; i < il; i ++ ) {
 
 						if ( Math.random() > 0.6 ) continue;
 
-						boid = boids[ i ];
-						distance = boid.position.distanceTo( this.position );
+						var boid = boids[ i ];
+						var distance = boid.position.distanceTo( this.position );
 
 						if ( distance > 0 && distance <= _neighborhoodRadius ) {
 
@@ -432,7 +429,7 @@
 					bird = birds[ i ];
 					bird.position.copy( boids[ i ].position );
 
-					color = bird.material.color;
+					var color = bird.material.color;
 					color.r = color.g = color.b = ( 500 - bird.position.z ) / 1000;
 
 					bird.rotation.y = Math.atan2( - boid.velocity.z, boid.velocity.x );

examples/canvas_lines_colors_2d.html

@@ -86,7 +86,7 @@
 				container.appendChild( renderer.domElement );
 
 				var geometry3 = new THREE.Geometry(),
-					points = hilbert2D( new THREE.Vector3( 0,0,0 ), 400.0, 4, 0, 1, 2, 3, 4, 5, 6, 7 ),
+					points = hilbert2D( new THREE.Vector3( 0,0,0 ), 400.0, 4 ),
 					colors3 = [];
 
 				for ( i = 0; i < points.length; i ++ ) {

examples/canvas_materials.html

@@ -131,19 +131,6 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 
-				var debugCanvas = document.createElement( 'canvas' );
-				debugCanvas.width = 512;
-				debugCanvas.height = 512;
-				debugCanvas.style.position = 'absolute';
-				debugCanvas.style.top = '0px';
-				debugCanvas.style.left = '0px';
-
-				container.appendChild( debugCanvas );
-
-				debugContext = debugCanvas.getContext( '2d' );
-				debugContext.setTransform( 1, 0, 0, 1, 256, 256 );
-				debugContext.strokeStyle = '#000000';
-
 				stats = new Stats();
 				container.appendChild(stats.dom);
 

examples/canvas_materials_video.html

@@ -138,12 +138,12 @@
 
 					for ( var iy = 0; iy < amounty; iy++ ) {
 
-						particle = new THREE.Sprite( material );
-						particle.position.x = ix * separation - ( ( amountx * separation ) / 2 );
-						particle.position.y = -153;
-						particle.position.z = iy * separation - ( ( amounty * separation ) / 2 );
-						particle.scale.x = particle.scale.y = 2;
-						scene.add( particle );
+						var sprite = new THREE.Sprite( material );
+						sprite.position.x = ix * separation - ( ( amountx * separation ) / 2 );
+						sprite.position.y = -153;
+						sprite.position.z = iy * separation - ( ( amounty * separation ) / 2 );
+						sprite.scale.setScalar( 2 );
+						scene.add( sprite );
 
 					}
 

examples/canvas_performance.html

@@ -52,8 +52,8 @@
 
 				// Spheres
 
-				geometry = new THREE.SphereGeometry( 100, 26, 18 );
-				material = new THREE.MeshLambertMaterial( { color: 0xffffff, overdraw: 0.5 } );
+				var geometry = new THREE.SphereGeometry( 100, 26, 18 );
+				var material = new THREE.MeshLambertMaterial( { color: 0xffffff, overdraw: 0.5 } );
 
 				for ( var i = 0; i < 20; i ++ ) {
 

examples/canvas_sandbox.html

@@ -17,6 +17,7 @@
 
 		<script src="../build/three.js"></script>
 
+		<script src="js/controls/OrbitControls.js"></script>
 		<script src="js/renderers/Projector.js"></script>
 		<script src="js/renderers/CanvasRenderer.js"></script>
 
@@ -26,31 +27,8 @@
 
 			var container, stats;
 
-			var camera, scene, renderer, objects;
-			var pointLight;
-
-			var sphere;
-
-			var targetRotation = 0;
-			var targetRotationOnMouseDown = 0;
-
-			var mouseX = 0;
-			var mouseXOnMouseDown = 0;
-
-			var windowHalfX = window.innerWidth / 2;
-			var windowHalfY = window.innerHeight / 2;
-
-			var moveForward = false;
-			var moveBackwards = false;
-			var moveLeft = false;
-			var moveRight = false;
-			var moveUp = false;
-			var moveDown = false;
-
-			var targetMoveLeft = false;
-			var targetMoveRight = false;
-
-			var debugContext;
+			var camera, scene, renderer;
+			var controls, group;
 
 			init();
 			animate();
@@ -62,10 +40,10 @@
 
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.set( 0, 150, 400 );
-				camera.target = new THREE.Vector3( 0, 150, 0 );
 
-				scene = new THREE.Scene();
+				var controls = new THREE.OrbitControls( camera );
 
+				scene = new THREE.Scene();
 
 				// Grid
 
@@ -74,18 +52,19 @@
 
 				// Spheres
 
-				objects = [];
+				group = new THREE.Group();
+				scene.add( group );
 
-				geometry = new THREE.IcosahedronGeometry( 100, 1 );
+				var geometry = new THREE.IcosahedronGeometry( 100, 1 );
 
 				var envMap = new THREE.TextureLoader().load( 'textures/metal.jpg' );
 				envMap.mapping = THREE.SphericalReflectionMapping;
 
-				material = new THREE.MeshBasicMaterial( { envMap: envMap, overdraw: 0.5 } );
+				var material = new THREE.MeshBasicMaterial( { envMap: envMap, overdraw: 0.5 } );
 
 				for ( var i = 0; i < 10; i ++ ) {
 
-					sphere = new THREE.Mesh( geometry, material );
+					var sphere = new THREE.Mesh( geometry, material );
 
 					sphere.position.x = Math.random() * 1000 - 500;
 					sphere.position.y = Math.random() * 1000 - 500;
@@ -97,52 +76,19 @@
 
 					sphere.scale.x = sphere.scale.y = sphere.scale.z = Math.random() + 0.5;
 
-					objects.push( sphere );
-
-					scene.add( sphere );
+					group.add( sphere );
 
 				}
 
-				// Lights
-
-				var ambientLight = new THREE.AmbientLight( Math.random() * 0x202020 );
-				scene.add( ambientLight );
-
-				var directionalLight = new THREE.DirectionalLight( Math.random() * 0xffffff );
-				directionalLight.position.x = Math.random() - 0.5;
-				directionalLight.position.y = Math.random() - 0.5;
-				directionalLight.position.z = Math.random() - 0.5;
-				directionalLight.position.normalize();
-				scene.add( directionalLight );
-
-				pointLight = new THREE.PointLight( 0xff0000, 1 );
-				scene.add( pointLight );
-
 				renderer = new THREE.CanvasRenderer();
 				renderer.setClearColor( 0xf0f0f0 );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 
-				var debugCanvas = document.createElement( 'canvas' );
-				debugCanvas.width = 512;
-				debugCanvas.height = 512;
-				debugCanvas.style.position = 'absolute';
-				debugCanvas.style.top = '0px';
-				debugCanvas.style.left = '0px';
-
-				container.appendChild( debugCanvas );
-
-				debugContext = debugCanvas.getContext( '2d' );
-				debugContext.setTransform( 1, 0, 0, 1, 256, 256 );
-				debugContext.strokeStyle = '#000000';
-
 				stats = new Stats();
 				container.appendChild(stats.dom);
 
-				document.addEventListener( 'keydown', onDocumentKeyDown, false );
-				document.addEventListener( 'keyup', onDocumentKeyUp, false );
-
 				//
 
 				window.addEventListener( 'resize', onWindowResize, false );
@@ -151,9 +97,6 @@
 
 			function onWindowResize() {
 
-				windowHalfX = window.innerWidth / 2;
-				windowHalfY = window.innerHeight / 2;
-
 				camera.aspect = window.innerWidth / window.innerHeight;
 				camera.updateProjectionMatrix();
 
@@ -161,40 +104,6 @@
 
 			}
 
-			function onDocumentKeyDown( event ) {
-
-				switch ( event.keyCode ) {
-
-					case 38: moveForward = true; break; // up
-					case 40: moveBackwards = true; break; // down
-					case 37: moveLeft = true; break; // left
-					case 39: moveRight = true; break; // right
-					case 87: moveUp = true; break; // w
-					case 83: moveDown = true; break; // s
-					case 65: targetMoveLeft = true; break; // a
-					case 68: targetMoveRight = true; break; // d
-
-				}
-
-			}
-
-			function onDocumentKeyUp( event ) {
-
-				switch ( event.keyCode ) {
-
-					case 38: moveForward = false; break; // up
-					case 40: moveBackwards = false; break; // down
-					case 37: moveLeft = false; break; // left
-					case 39: moveRight = false; break; // right
-					case 87: moveUp = false; break; // w
-					case 83: moveDown = false; break; // s
-					case 65: targetMoveLeft = false; break; // a
-					case 68: targetMoveRight = false; break; // d
-
-				}
-
-			}
-
 			//
 
 			function animate() {
@@ -208,54 +117,16 @@
 
 			function render() {
 
-				if ( moveForward ) camera.position.z -= 10;
-				if ( moveBackwards ) camera.position.z += 10;
-
-				if ( moveLeft ) camera.position.x -= 10;
-				if ( moveRight ) camera.position.x += 10;
-
-				if ( moveUp ) camera.position.y += 10;
-				if ( moveDown ) camera.position.y -= 10;
+				for ( var i = 0, l = group.children.length; i < l; i++ ) {
 
-				if ( targetMoveLeft ) camera.target.x -= 10;
-				if ( targetMoveRight ) camera.target.x += 10;
-
-				camera.lookAt( camera.target );
-
-				debugContext.clearRect( -256, -256, 512, 512 );
-
-				debugContext.beginPath();
-
-				// center
-				debugContext.moveTo( -10, 0 );
-				debugContext.lineTo( 10, 0 );
-				debugContext.moveTo( 0, -10 );
-				debugContext.lineTo( 0, 10 );
-
-				// camera
-
-				debugContext.moveTo( camera.position.x * 0.1, camera.position.z * 0.1 );
-				debugContext.lineTo( camera.target.x * 0.1, camera.target.z * 0.1 );
-				debugContext.rect( camera.position.x * 0.1 - 5, camera.position.z * 0.1 - 5, 10, 10 );
-				debugContext.rect( camera.target.x * 0.1 - 5, camera.target.z * 0.1 - 5, 10, 10 );
-				debugContext.rect( - 50, - 50, 100, 100 );
-
-				for ( var i = 0, l = objects.length; i < l; i++ ) {
-
-					var object = objects[ i ];
+					var object = group.children[ i ];
 
 					object.rotation.x += 0.01;
 					object.rotation.y += 0.005;
 					object.position.y = Math.sin( object.rotation.x ) * 200;
 
-					debugContext.rect( object.position.x * 0.1 - 5, object.position.z * 0.1 - 5, 10, 10 );
-
 				}
 
-
-				debugContext.closePath();
-				debugContext.stroke();
-
 				renderer.render( scene, camera );
 
 			}

examples/css3d_youtube.html

@@ -30,6 +30,7 @@
 		<script>
 
 			var camera, scene, renderer;
+			var controls;
 
 			var Element = function ( id, x, y, z, ry ) {
 

examples/files.js

@@ -152,13 +152,13 @@ var files = {
 		"webgl_materials_skin",
 		"webgl_materials_standard",
 		"webgl_materials_texture_anisotropy",
+		"webgl_materials_texture_canvas",
 		"webgl_materials_texture_compressed",
 		"webgl_materials_texture_filters",
 		"webgl_materials_texture_hdr",
 		"webgl_materials_texture_manualmipmap",
 		"webgl_materials_texture_pvrtc",
 		"webgl_materials_texture_tga",
-		"webgl_materials_texture_canvas",
 		"webgl_materials_transparency",
 		"webgl_materials_variations_basic",
 		"webgl_materials_variations_lambert",
@@ -194,11 +194,11 @@ var files = {
 		"webgl_performance",
 		"webgl_performance_doublesided",
 		"webgl_performance_static",
-		"webgl_physics_terrain",
-		"webgl_physics_rope",
 		"webgl_physics_cloth",
-		"webgl_physics_volume",
 		"webgl_physics_convex_break",
+		"webgl_physics_rope",
+		"webgl_physics_terrain",
+		"webgl_physics_volume",
 		"webgl_points_billboards",
 		"webgl_points_billboards_colors",
 		"webgl_points_dynamic",

examples/js/Cloth.js

@@ -286,7 +286,7 @@ function simulate( time ) {
 		for ( particles = cloth.particles, i = 0, il = particles.length; i < il; i ++ ) {
 
 			particle = particles[ i ];
-			pos = particle.position;
+			var pos = particle.position;
 			diff.subVectors( pos, ballPosition );
 			if ( diff.length() < ballSize ) {
 

examples/js/GPUParticleSystem.js

@@ -330,7 +330,7 @@ THREE.GPUParticleContainer = function( maxParticles, particleSystem ) {
 
 		if ( this.DPR !== undefined ) size *= this.DPR;
 
-		i = this.PARTICLE_CURSOR;
+		var i = this.PARTICLE_CURSOR;
 
 		// position
 

examples/js/Mirror.js

@@ -171,8 +171,7 @@ THREE.Mirror = function ( width, height, options ) {
 		q.w = ( 1.0 + projectionMatrix.elements[ 10 ] ) / projectionMatrix.elements[ 14 ];
 
 		// Calculate the scaled plane vector
-		var c = new THREE.Vector4();
-		c = clipPlane.multiplyScalar( 2.0 / clipPlane.dot( q ) );
+		var c = clipPlane.multiplyScalar( 2.0 / clipPlane.dot( q ) );
 
 		// Replacing the third row of the projection matrix
 		projectionMatrix.elements[ 2 ] = c.x;

examples/js/TimelinerController.js

@@ -221,7 +221,7 @@ THREE.TimelinerController.prototype = {
 		for ( var i = 0, n = names.length; i !== n; ++ i ) {
 
 			var name = names[ i ],
-				track = tracks[ name ];
+				track = tracks[ name ],
 				data = channels[ name ];
 
 			this._setArray( track.times, data.times );

examples/js/controls/EditorControls.js

@@ -263,7 +263,7 @@ THREE.EditorControls = function ( object, domElement ) {
 			case 2:
 				touches[ 0 ].set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY, 0 );
 				touches[ 1 ].set( event.touches[ 1 ].pageX, event.touches[ 1 ].pageY, 0 );
-				distance = touches[ 0 ].distanceTo( touches[ 1 ] );
+				var distance = touches[ 0 ].distanceTo( touches[ 1 ] );
 				scope.zoom( new THREE.Vector3( 0, 0, prevDistance - distance ) );
 				prevDistance = distance;
 

examples/js/crossfade/scenes.js

@@ -86,11 +86,12 @@ function Scene ( type, numObjects, cameraZ, fov, rotationSpeed, clearColor ) {
 	this.scene.add( light );
 
 	this.rotationSpeed = rotationSpeed;
-	defaultMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff, shading: THREE.FlatShading, vertexColors: THREE.VertexColors } );
+
+	var defaultMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff, shading: THREE.FlatShading, vertexColors: THREE.VertexColors } );
 	this.mesh = new THREE.Mesh( generateGeometry( type, numObjects ), defaultMaterial );
 	this.scene.add( this.mesh );
 
-	renderTargetParameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat, stencilBuffer: false };
+	var renderTargetParameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat, stencilBuffer: false };
 	this.fbo = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, renderTargetParameters );
 
 	this.render = function( delta, rtt ) {

examples/js/crossfade/transition.js

@@ -5,8 +5,11 @@ function Transition ( sceneA, sceneB ) {
 	this.cameraOrtho = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, - 10, 10 );
 
 	this.textures = [];
+
+	var loader = new THREE.TextureLoader();
+
 	for ( var i = 0; i < 6; i ++ )
-		this.textures[ i ] = new THREE.TextureLoader().load( 'textures/transition/transition' + ( i + 1 ) + '.png' );
+		this.textures[ i ] = loader.load( 'textures/transition/transition' + ( i + 1 ) + '.png' );
 
 	this.quadmaterial = new THREE.ShaderMaterial( {
 
@@ -79,7 +82,7 @@ function Transition ( sceneA, sceneB ) {
 
 	} );
 
-	quadgeometry = new THREE.PlaneBufferGeometry( window.innerWidth, window.innerHeight );
+	var quadgeometry = new THREE.PlaneBufferGeometry( window.innerWidth, window.innerHeight );
 
 	this.quad = new THREE.Mesh( quadgeometry, this.quadmaterial );
 	this.scene.add( this.quad );

examples/js/geometries/hilbert2D.js

@@ -15,7 +15,7 @@
  * @param v2         Corner index +X, +Z.
  * @param v3         Corner index +X, -Z.
  */
-function hilbert2D ( center, size, iterations, v0, v1, v2, v3 ) {
+function hilbert2D( center, size, iterations, v0, v1, v2, v3 ) {
 
 	// Default Vars
 	var center     = undefined !== center ? center : new THREE.Vector3( 0, 0, 0 ),

examples/js/loaders/3MFLoader.js

@@ -28,7 +28,6 @@ THREE.ThreeMFLoader.prototype = {
 
 		function loadDocument( data ) {
 
-			var view = new DataView( data );
 			var zip = null;
 			var file = null;
 
@@ -92,7 +91,7 @@ THREE.ThreeMFLoader.prototype = {
 			for ( var i = 0; i < modelPartNames.length; i++ ) {
 
 				var modelPart = modelPartNames[ i ];
-				view = new DataView( zip.file( modelPart ).asArrayBuffer() );
+				var view = new DataView( zip.file( modelPart ).asArrayBuffer() );
 
 				if ( TextDecoder === undefined ) {
 
@@ -267,7 +266,7 @@ THREE.ThreeMFLoader.prototype = {
 				}
 
 				if ( pid ) {
-				  
+
 					triangleProperty[ 'pid' ] = pid;
 
 				}
@@ -540,7 +539,7 @@ THREE.ThreeMFLoader.prototype = {
 			var modelsKeys = Object.keys( modelsData );
 
 			for ( var i = 0; i < modelsKeys.length; i++ ) {
-			  
+
 				var modelsKey = modelsKeys[ i ];
 				var modelData = modelsData[ modelsKey ];
 				var modelXml = modelData[ 'xml' ];

examples/js/loaders/AWDLoader.js

@@ -52,16 +52,16 @@
 
 	}
 
-	AWDProperties = function() {};
+	function AWDProperties() {}
 
 	AWDProperties.prototype = {
-		set : function( key, value ) {
+		set: function( key, value ) {
 
 			this[ key ] = value;
 
 		},
 
-		get : function( key, fallback ) {
+		get: function( key, fallback ) {
 
 			if ( this.hasOwnProperty( key ) )
 				return this[ key ];

examples/js/loaders/AssimpLoader.js

@@ -656,7 +656,7 @@
 				geometry.addAttribute( 'color', new THREE.BufferAttribute( this.mColorBuffer, 4 ) );
 			if ( this.mTexCoordsBuffers[ 0 ] && this.mTexCoordsBuffers[ 0 ].length > 0 )
 				geometry.addAttribute( 'uv', new THREE.BufferAttribute( new Float32Array( this.mTexCoordsBuffers[ 0 ] ), 2 ) );
-			if ( this.mTexCoordsBuffers[ 1 ] && this.mTexCoordsBuffers[ 1 ] && this.mTextureCoords[ 1 ].length > 0 )
+			if ( this.mTexCoordsBuffers[ 1 ] && this.mTexCoordsBuffers[ 1 ].length > 0 )
 				geometry.addAttribute( 'uv1', new THREE.BufferAttribute( new Float32Array( this.mTexCoordsBuffers[ 1 ] ), 2 ) );
 			if ( this.mTangentBuffer && this.mTangentBuffer.length > 0 )
 				geometry.addAttribute( 'tangents', new THREE.BufferAttribute( this.mTangentBuffer, 3 ) );
@@ -2306,6 +2306,8 @@
 
 	}
 
+	var shortened, compressed;
+
 	function InternReadFile( pFiledata, url ) {
 
 		var pScene = new aiScene();

examples/js/loaders/BVHLoader.js

@@ -84,7 +84,7 @@ THREE.BVHLoader.prototype = {
 
 				tokens = nextLine( lines ).split( /[\s]+/ );
 
-				readFrameData( tokens, i * frameTime, root, list );
+				readFrameData( tokens, i * frameTime, root );
 
 			}
 

examples/js/loaders/FBXLoader.js

@@ -102,7 +102,6 @@
 
 					self.manager.itemError( url );
 					throw new Error( 'FBXLoader: Unknown format.' );
-					return;
 
 				}
 
@@ -110,7 +109,6 @@
 
 					self.manager.itemError( url );
 					throw new Error( 'FBXLoader: FBX version not supported for file at ' + url + ', FileVersion: ' + getFbxVersion( FBXText ) );
-					return;
 
 				}
 

examples/js/loaders/MMDLoader.js

@@ -312,10 +312,9 @@ THREE.MMDLoader.prototype.pourVmdIntoCamera = function ( camera, vmd, name ) {
 				var stride = values.length / times.length;
 				var interpolateStride = ( stride === 3 ) ? 12 : 4;  // 3: Vector3, others: Quaternion or Number
 
-				var aheadIndex = 2;
 				var index = 1;
 
-				for ( aheadIndex = 2, endIndex = times.length; aheadIndex < endIndex; aheadIndex ++ ) {
+				for ( var aheadIndex = 2, endIndex = times.length; aheadIndex < endIndex; aheadIndex ++ ) {
 
 					for ( var i = 0; i < stride; i ++ ) {
 

examples/js/loaders/OBJLoader.js

@@ -10,11 +10,11 @@ THREE.OBJLoader = function ( manager ) {
 
 	this.regexp = {
 		// v float float float
-		vertex_pattern           : /^v\s+([\d|\.|\+|\-|e|E]+)\s+([\d|\.|\+|\-|e|E]+)\s+([\d|\.|\+|\-|e|E]+)/,
+		vertex_pattern           : /^v\s+([\d\.\+\-eE]+)\s+([\d\.\+\-eE]+)\s+([\d\.\+\-eE]+)/,
 		// vn float float float
-		normal_pattern           : /^vn\s+([\d|\.|\+|\-|e|E]+)\s+([\d|\.|\+|\-|e|E]+)\s+([\d|\.|\+|\-|e|E]+)/,
+		normal_pattern           : /^vn\s+([\d\.\+\-eE]+)\s+([\d\.\+\-eE]+)\s+([\d\.\+\-eE]+)/,
 		// vt float float
-		uv_pattern               : /^vt\s+([\d|\.|\+|\-|e|E]+)\s+([\d|\.|\+|\-|e|E]+)/,
+		uv_pattern               : /^vt\s+([\d\.\+\-eE]+)\s+([\d\.\+\-eE]+)/,
 		// f vertex vertex vertex
 		face_vertex              : /^f\s+(-?\d+)\s+(-?\d+)\s+(-?\d+)(?:\s+(-?\d+))?/,
 		// f vertex/uv vertex/uv vertex/uv

examples/js/loaders/VRMLLoader.js

@@ -374,7 +374,7 @@ THREE.VRMLLoader.prototype = {
 
 					while ( null !== ( parts = float3_pattern.exec( line ) ) ) {
 
-						color = {
+						var color = {
 							r: parseFloat( parts[ 1 ] ),
 							g: parseFloat( parts[ 2 ] ),
 							b: parseFloat( parts[ 3 ] )
@@ -415,7 +415,7 @@ THREE.VRMLLoader.prototype = {
 							};
 
 							break;
-							
+
 						case 'location':
 						case 'direction':
 						case 'translation':
@@ -436,7 +436,7 @@ THREE.VRMLLoader.prototype = {
 
 							break;
 
-						case 'intensity':				
+						case 'intensity':
 						case 'cutOffAngle':
 						case 'radius':
 						case 'topRadius':
@@ -472,7 +472,7 @@ THREE.VRMLLoader.prototype = {
 							};
 
 							break;
-							
+
 						case 'on':
 						case 'ccw':
 						case 'solid':
@@ -629,66 +629,60 @@ THREE.VRMLLoader.prototype = {
 				var object = parent;
 
 				if(data.string.indexOf("AmbientLight")>-1 && data.nodeType=='PointLight'){
-					//wenn im Namen "AmbientLight" vorkommt und es ein PointLight ist, 
+					//wenn im Namen "AmbientLight" vorkommt und es ein PointLight ist,
 					//diesen Typ in 'AmbientLight' ändern
-					data.nodeType='AmbientLight';	
+					data.nodeType='AmbientLight';
 				}
-				
-				l_visible=data.on;
-				if(l_visible==undefined)l_visible=true;
-				l_intensity=data.intensity;
-				if(l_intensity==undefined)l_intensity=true;
-				if(data.color!=undefined)
-					l_color= new THREE.Color(data.color.r, data.color.g,data.color.b );
-					else
-					l_color= new THREE.Color(0, 0,0);
-				
-				
-				
+
+				var l_visible = data.on !== undefined ? data.on : true;
+				var l_intensity = data.intensity !== undefined ? data.intensity : 1;
+				var l_color = new THREE.Color();
+				if ( data.color ) l_color.copy( data.color );
+
 				if('AmbientLight' === data.nodeType){
-					object=new THREE.AmbientLight( 
-								l_color.getHex(), 
+					object=new THREE.AmbientLight(
+								l_color.getHex(),
 								l_intensity
 								);
 					object.visible=l_visible;
-					
+
 					parent.add( object );
-					
+
 				}
 				else
 				if('PointLight' === data.nodeType){
-						l_distance =0;	//0="unendlich" ...1000
-						l_decay=0;		//-1.. ?
-						
+						var l_distance =0;	//0="unendlich" ...1000
+						var l_decay=0;		//-1.. ?
+
 						if(data.radius!=undefined && data.radius<1000){
 							//l_radius=data.radius;
 							l_distance=data.radius;
 							l_decay=1;
 						}
-						object=new THREE.PointLight( 
-								l_color.getHex(), 
-								l_intensity, 
+						object=new THREE.PointLight(
+								l_color.getHex(),
+								l_intensity,
 								l_distance);
 						object.visible=l_visible;
-						
+
 						parent.add( object );
 				}
 				else
-				if('SpotLight' === data.nodeType){						
-						l_intensity=1;
-						l_distance =0;//0="unendlich"=1000
-						l_angle=Math.PI/3;
-						l_penumbra=0.0;//0..1
-						l_decay=0;//-1.. ?
-						l_visible=true;
-						
+				if('SpotLight' === data.nodeType){
+						var l_intensity=1;
+						var l_distance =0;//0="unendlich"=1000
+						var l_angle=Math.PI/3;
+						var l_penumbra=0.0;//0..1
+						var l_decay=0;//-1.. ?
+						var l_visible=true;
+
 						if(data.radius!=undefined && data.radius<1000){
 							//l_radius=data.radius;
 							l_distance=data.radius;
 							l_decay=1;
 						}
 						if(data.cutOffAngle!=undefined)l_angle=data.cutOffAngle;
-						
+
 						object = new THREE.SpotLight(
 									l_color.getHex(),
 									l_intensity,
@@ -697,7 +691,7 @@ THREE.VRMLLoader.prototype = {
 									l_penumbra,
 									l_decay
 									);
-						object.visible=l_visible;						
+						object.visible=l_visible;
 						parent.add( object );
 						/*
 						var lightHelper = new THREE.SpotLightHelper( object );
@@ -705,8 +699,8 @@ THREE.VRMLLoader.prototype = {
 						lightHelper.update();
 						*/
 				}
-				else				
-				
+				else
+
 				if ( 'Transform' === data.nodeType || 'Group' === data.nodeType ) {
 
 					object = new THREE.Object3D();

examples/js/loaders/WWOBJLoader2.js

@@ -25,7 +25,7 @@ THREE.OBJLoader2.WWOBJLoader2 = (function () {
 
 	WWOBJLoader2.prototype._init = function () {
 		console.log( "Using THREE.OBJLoader2.WWOBJLoader2 version: " + WWOBJLOADER2_VERSION );
-		
+
 		// check worker support first
 		if ( window.Worker === undefined ) throw "This browser does not support web workers!";
 		if ( window.Blob === undefined  ) throw "This browser does not support Blob!";
@@ -304,7 +304,6 @@ THREE.OBJLoader2.WWOBJLoader2 = (function () {
 
 				var refPercentComplete = 0;
 				var percentComplete = 0;
-				var output;
 				var onLoad = function ( objAsArrayBuffer ) {
 
 					scope._announceProgress( 'Running web worker!' );
@@ -323,7 +322,7 @@ THREE.OBJLoader2.WWOBJLoader2 = (function () {
 					if ( percentComplete > refPercentComplete ) {
 
 						refPercentComplete = percentComplete;
-						output = 'Download of "' + scope.fileObj + '": ' + percentComplete + '%';
+						var output = 'Download of "' + scope.fileObj + '": ' + percentComplete + '%';
 						console.log( output );
 						scope._announceProgress( output );
 
@@ -331,7 +330,7 @@ THREE.OBJLoader2.WWOBJLoader2 = (function () {
 				};
 
 				var onError = function ( event ) {
-					output = 'Error occurred while downloading "' + scope.fileObj + '"';
+					var output = 'Error occurred while downloading "' + scope.fileObj + '"';
 					console.error( output + ': ' + event );
 					scope._announceProgress( output );
 					scope._finalize( 'error' );
@@ -356,7 +355,7 @@ THREE.OBJLoader2.WWOBJLoader2 = (function () {
 			if ( Validator.isValid( this.fileMtl ) ) {
 
 				var onError = function ( event ) {
-					output = 'Error occurred while downloading "' + scope.fileMtl + '"';
+					var output = 'Error occurred while downloading "' + scope.fileMtl + '"';
 					console.error( output + ': ' + event );
 					scope._announceProgress( output );
 					scope._finalize( 'error' );

examples/js/loaders/XLoader.js

@@ -1308,14 +1308,14 @@ THREE.XLoader.prototype = {
 					scope.loadingXdata.FrameInfo_Raw[nowFrameName].Materials[sk].skinning = true;
 
 				}
-				mesh = new THREE.SkinnedMesh(bufferGeometry.fromGeometry(scope.loadingXdata.FrameInfo_Raw[nowFrameName].Geometry), new THREE.MultiMaterial(scope.loadingXdata.FrameInfo_Raw[nowFrameName].Materials));
+				mesh = new THREE.SkinnedMesh(bufferGeometry.fromGeometry(scope.loadingXdata.FrameInfo_Raw[nowFrameName].Geometry), scope.loadingXdata.FrameInfo_Raw[nowFrameName].Materials);
 				var skeleton = new THREE.Skeleton(putBones /*, BoneInverse*/);
 				mesh.add(putBones[0]);
 				mesh.bind(skeleton);
 
 			} else {
 
-				mesh = new THREE.Mesh(bufferGeometry.fromGeometry(scope.loadingXdata.FrameInfo_Raw[nowFrameName].Geometry), new THREE.MultiMaterial(scope.loadingXdata.FrameInfo_Raw[nowFrameName].Materials));
+				mesh = new THREE.Mesh(bufferGeometry.fromGeometry(scope.loadingXdata.FrameInfo_Raw[nowFrameName].Geometry), scope.loadingXdata.FrameInfo_Raw[nowFrameName].Materials);
 
 			}
 			mesh.name = nowFrameName;
@@ -1503,7 +1503,7 @@ THREE.XLoader.XAnimationObj.prototype = {
 		for (var i = 0; i < XAnimationInfo.keyFrames.length; i++) {
 
 			var keyframe = {};
-			keyframe.time = XAnimationInfo.keyFrames[i].time * scope.fps;
+			keyframe.time = XAnimationInfo.keyFrames[i].time * this.fps;
 			keyframe.matrix = XAnimationInfo.keyFrames[i].matrix;
 			keyframe.pos = new THREE.Vector3().setFromMatrixPosition(keyframe.matrix);
 			keyframe.rot = new THREE.Quaternion().setFromRotationMatrix(keyframe.matrix);

examples/js/math/Lut.js

@@ -158,10 +158,9 @@ THREE.Lut.prototype = {
 
 		this.legend.texture = new THREE.Texture( this.legend.canvas );
 
-		imageData = this.legend.ctx.getImageData( 0, 0, 1, this.n );
+		var imageData = this.legend.ctx.getImageData( 0, 0, 1, this.n );
 
-		data = imageData.data;
-		len = data.length;
+		var data = imageData.data;
 
 		this.map = THREE.ColorMapKeywords[ this.mapname ];
 

examples/js/modifiers/BufferSubdivisionModifier.js

@@ -173,21 +173,19 @@ function convertGeometryToIndexedBuffer( geometry ) {
 	var indexArray = new TypedArrayHelper( geometry.faces.length, 0, THREE.Face3, Uint32Array, 3, [ 'a', 'b', 'c' ] );
 	var uvArray = new TypedArrayHelper( geometry.faceVertexUvs[0].length * 3 * 3, 0, THREE.Vector2, Float32Array, 2, [ 'x', 'y' ] );
 
-	var i, il;
-
-	for ( i = 0, il = geometry.vertices.length; i < il; i++ ) {
+	for ( var i = 0, il = geometry.vertices.length; i < il; i++ ) {
 
 		vertArray.push_element( geometry.vertices[ i ] );
 
 	}
 
-	for ( i = 0, il = geometry.faces.length; i < il; i++ ) {
+	for ( var i = 0, il = geometry.faces.length; i < il; i++ ) {
 
 		indexArray.push_element( geometry.faces[ i ] );
 
 	}
 
-	for ( i = 0, il = geometry.faceVertexUvs[ 0 ].length; i < il; i++ ) {
+	for ( var i = 0, il = geometry.faceVertexUvs[ 0 ].length; i < il; i++ ) {
 
 		uvArray.push_element( geometry.faceVertexUvs[ 0 ][ i ][ 0 ] );
 		uvArray.push_element( geometry.faceVertexUvs[ 0 ][ i ][ 1 ] );
@@ -222,11 +220,10 @@ function compute_vertex_normals( geometry ) {
 	newNormals.length = oldVertices.length;
 	oldFaces.from_existing( geometry.index.array );
 	var a, b, c;
-	var i, j, jl;
 	var my_weight;
 	var full_weights = [ 0.0, 0.0, 0.0 ];
 
-	for ( i = 0, il = oldFaces.length; i < il; i++ ) {
+	for ( var i = 0, il = oldFaces.length; i < il; i++ ) {
 
 		oldFaces.index_to_register( i, 0 );
 
@@ -248,7 +245,7 @@ function compute_vertex_normals( geometry ) {
 	var tmpx, tmpy, tmpz;
 	var t_len;
 
-	for ( i = 0, il = oldFaces.length; i < il; i++ ) {
+	for ( var i = 0, il = oldFaces.length; i < il; i++ ) {
 
 		oldFaces.index_to_register( i, 0 );
 		oldVertices.index_to_register( oldFaces.register[ 0 ].a, 0 );
@@ -718,40 +715,29 @@ var edge_type = function ( a, b ) {
 
 
 			/*
-
-
-				0___________________C___________________2
-				 \                 /\                  /
-				  \              /   \      F4        /
-				   \     F2    /       \             /
-				    \        /            \         /
-				     \     /                \      /
-				      \  /         F1         \   /
-				       \/_______________________\/
-				      A \                       / B
-				         \       F3            /
-				          \                   /
-				           \                 /
-				            \               /
-				             \             /
-				              \           /
-				               \         /
-				                   \/
-				                    1
-
-
-			Draw orders:
-			F1: ABC x3,x4,x5
-			F2: 0AC x0,x3,x5
-			F3: 1BA x1,x4,x3
-			F4: 2CB x2,x5,x4
-
-			0: x0
-			1: x1
-			2: x2
-			A: x3
-			B: x4
-			C: x5
+				0________C_______2
+				 \      /\      /
+				  \ F2 /  \ F4 /
+				   \  / F1 \  /
+				    \/______\/
+				   A \      / B
+				      \ F3 /
+				       \  /
+				        \/
+				         1
+
+				Draw orders:
+				F1: ABC x3,x4,x5
+				F2: 0AC x0,x3,x5
+				F3: 1BA x1,x4,x3
+				F4: 2CB x2,x5,x4
+
+				0: x0
+				1: x1
+				2: x2
+				A: x3
+				B: x4
+				C: x5
 			*/
 
 			if ( doUvs === true ) {
@@ -760,9 +746,9 @@ var edge_type = function ( a, b ) {
 				oldUvs.index_to_register( ( i * 3 ) + 1, 1 );
 				oldUvs.index_to_register( ( i * 3 ) + 2, 2 );
 
-				x0 = oldUvs.register[ 0 ]; //uv[0];
-				x1 = oldUvs.register[ 1 ]; //uv[1];
-				x2 = oldUvs.register[ 2 ]; //uv[2];
+				var x0 = oldUvs.register[ 0 ]; // uv[0];
+				var x1 = oldUvs.register[ 1 ]; // uv[1];
+				var x2 = oldUvs.register[ 2 ]; // uv[2];
 
 				x3.set( midpoint( x0.x, x1.x ), midpoint( x0.y, x1.y ) );
 				x4.set( midpoint( x1.x, x2.x ), midpoint( x1.y, x2.y ) );

examples/js/utils/GeometryUtils.js

@@ -206,8 +206,7 @@ THREE.GeometryUtils = {
 			vB.set( vertices[ i * 9 + 3 ], vertices[ i * 9 + 4 ], vertices[ i * 9 + 5 ] );
 			vC.set( vertices[ i * 9 + 6 ], vertices[ i * 9 + 7 ], vertices[ i * 9 + 8 ] );
 
-			area = THREE.GeometryUtils.triangleArea( vA, vB, vC );
-			totalArea += area;
+			totalArea += THREE.GeometryUtils.triangleArea( vA, vB, vC );
 
 			cumulativeAreas.push( totalArea );
 

examples/js/vr/PaintViveController.js

@@ -119,19 +119,17 @@ THREE.PaintViveController = function ( id ) {
 
 	function resizeTriangleGeometry(geometry, ratio) {
 
+		var x = 0, y = 0;
+		var fullWidth = 0.75, fullHeight = 1.5;
+		var angle = Math.atan( ( fullWidth / 2 ) / fullHeight );
 
-
-		var x = 0, y =0;
-		var fullWidth = 0.75; fullHeight = 1.5;
-		var angle = Math.atan((fullWidth/2)/fullHeight);
-
-		var bottomY = y - fullHeight/2;
+		var bottomY = y - fullHeight / 2;
 		var height = fullHeight * ratio;
-		var width = (Math.tan(angle) * height) * 2;
+		var width = ( Math.tan( angle ) * height ) * 2;
 
-		geometry.vertices[0].set( x, bottomY, 0);
-		geometry.vertices[1].set( x + width/2, bottomY + height, 0 );
-		geometry.vertices[2].set( x - width/2, bottomY + height, 0  );
+		geometry.vertices[ 0 ].set( x, bottomY, 0 );
+		geometry.vertices[ 1 ].set( x + width / 2, bottomY + height, 0 );
+		geometry.vertices[ 2 ].set( x - width / 2, bottomY + height, 0 );
 
 		geometry.verticesNeedUpdate = true;
 

examples/misc_controls_fly.html

@@ -77,6 +77,8 @@
 			var geometry, meshPlanet, meshClouds, meshMoon;
 			var dirLight, pointLight, ambientLight;
 
+			var composer;
+
 			var textureLoader = new THREE.TextureLoader();
 
 			var d, dPlanet, dMoon, dMoonVec = new THREE.Vector3();
@@ -201,9 +203,7 @@
 					stars.rotation.x = Math.random() * 6;
 					stars.rotation.y = Math.random() * 6;
 					stars.rotation.z = Math.random() * 6;
-
-					s = i * 10;
-					stars.scale.set( s, s, s );
+					stars.scale.setScalar( i * 10 );
 
 					stars.matrixAutoUpdate = false;
 					stars.updateMatrix();

examples/misc_controls_orbit.html

@@ -98,15 +98,15 @@
 
 				// lights
 
-				light = new THREE.DirectionalLight( 0xffffff );
+				var light = new THREE.DirectionalLight( 0xffffff );
 				light.position.set( 1, 1, 1 );
 				scene.add( light );
 
-				light = new THREE.DirectionalLight( 0x002288 );
+				var light = new THREE.DirectionalLight( 0x002288 );
 				light.position.set( -1, -1, -1 );
 				scene.add( light );
 
-				light = new THREE.AmbientLight( 0x222222 );
+				var light = new THREE.AmbientLight( 0x222222 );
 				scene.add( light );
 
 				//

examples/misc_controls_trackball.html

@@ -102,15 +102,15 @@
 
 				// lights
 
-				light = new THREE.DirectionalLight( 0xffffff );
+				var light = new THREE.DirectionalLight( 0xffffff );
 				light.position.set( 1, 1, 1 );
 				scene.add( light );
 
-				light = new THREE.DirectionalLight( 0x002288 );
+				var light = new THREE.DirectionalLight( 0x002288 );
 				light.position.set( -1, -1, -1 );
 				scene.add( light );
 
-				light = new THREE.AmbientLight( 0x222222 );
+				var light = new THREE.AmbientLight( 0x222222 );
 				scene.add( light );
 
 

examples/misc_sound.html

@@ -58,8 +58,7 @@
 			var camera, controls, scene, renderer;
 			var light, pointLight;
 
-			var mesh;
-			var material_sphere1, material_sphere2;
+			var material1, material2, material3;
 
 			var analyser1, analyser2, analyser3;
 
@@ -87,15 +86,15 @@
 
 				var sphere = new THREE.SphereGeometry( 20, 32, 16 );
 
-				material_sphere1 = new THREE.MeshPhongMaterial( { color: 0xffaa00, shading: THREE.FlatShading, shininess: 0 } );
-				material_sphere2 = new THREE.MeshPhongMaterial( { color: 0xff2200, shading: THREE.FlatShading, shininess: 0 } );
-				material_sphere3 = new THREE.MeshPhongMaterial( { color: 0x6622aa, shading: THREE.FlatShading, shininess: 0 } );
+				material1 = new THREE.MeshPhongMaterial( { color: 0xffaa00, shading: THREE.FlatShading, shininess: 0 } );
+				material2 = new THREE.MeshPhongMaterial( { color: 0xff2200, shading: THREE.FlatShading, shininess: 0 } );
+				material3 = new THREE.MeshPhongMaterial( { color: 0x6622aa, shading: THREE.FlatShading, shininess: 0 } );
 
 				// sound spheres
 
 				var audioLoader = new THREE.AudioLoader();
 
-				var mesh1 = new THREE.Mesh( sphere, material_sphere1 );
+				var mesh1 = new THREE.Mesh( sphere, material1 );
 				mesh1.position.set( -250, 30, 0 );
 				scene.add( mesh1 );
 
@@ -109,7 +108,7 @@
 
 				//
 
-				var mesh2 = new THREE.Mesh( sphere, material_sphere2 );
+				var mesh2 = new THREE.Mesh( sphere, material2 );
 				mesh2.position.set( 250, 30, 0 );
 				scene.add( mesh2 );
 
@@ -124,7 +123,7 @@
 				//
 
 
-				var mesh3 = new THREE.Mesh( sphere, material_sphere3 );
+				var mesh3 = new THREE.Mesh( sphere, material3 );
 				mesh3.position.set( 0, 30, -250 );
 				scene.add( mesh3 );
 
@@ -251,9 +250,9 @@
 
 				controls.update( delta );
 
-				material_sphere1.emissive.b = analyser1.getAverageFrequency() / 256;
-				material_sphere2.emissive.b = analyser2.getAverageFrequency() / 256;
-				material_sphere3.emissive.b = analyser3.getAverageFrequency() / 256;
+				material1.emissive.b = analyser1.getAverageFrequency() / 256;
+				material2.emissive.b = analyser2.getAverageFrequency() / 256;
+				material3.emissive.b = analyser3.getAverageFrequency() / 256;
 
 				renderer.render( scene, camera );
 

examples/raytracing_sandbox.html

@@ -26,8 +26,7 @@
 			var container, info;
 
 			var camera, controls, scene, renderer;
-
-			var torus, cube, objects = [];
+			var group;
 
 			init();
 			render();
@@ -132,43 +131,39 @@
 				glassMaterialSmooth.reflectivity = 0.25;
 				glassMaterialSmooth.refractionRatio = 0.6;
 
+				//
+
+				group = new THREE.Group();
+				scene.add( group );
+
 				// geometries
 
-				var torusGeometry = new THREE.TorusKnotGeometry( 150 );
 				var sphereGeometry = new THREE.SphereGeometry( 100, 16, 8 );
 				var planeGeometry = new THREE.BoxGeometry( 600, 5, 600 );
 				var boxGeometry = new THREE.BoxGeometry( 100, 100, 100 );
 
-				// TorusKnot
-
-				//torus = new THREE.Mesh( torusGeometry, phongMaterial );
-				//scene.add( torus );
-
 				// Sphere
 
-				sphere = new THREE.Mesh( sphereGeometry, phongMaterial );
+				var sphere = new THREE.Mesh( sphereGeometry, phongMaterial );
 				sphere.scale.multiplyScalar( 0.5 );
 				sphere.position.set( - 50, - 250 + 5, - 50 );
-				scene.add( sphere );
-				objects.push ( sphere );
+				group.add( sphere );
 
-				sphere2 = new THREE.Mesh( sphereGeometry, mirrorMaterialSmooth );
+				var sphere2 = new THREE.Mesh( sphereGeometry, mirrorMaterialSmooth );
 				sphere2.scale.multiplyScalar( 0.5 );
 				sphere2.position.set( 175, - 250 + 5, - 150 );
-				scene.add( sphere2 );
-				objects.push ( sphere2 );
+				group.add( sphere2 );
 
 				// Box
 
-				box = new THREE.Mesh( boxGeometry, mirrorMaterialFlat );
+				var box = new THREE.Mesh( boxGeometry, mirrorMaterialFlat );
 				box.position.set( - 175, - 250 + 2.5, - 150 );
 				box.rotation.y = 0.5;
-				scene.add( box );
-				objects.push ( box );
+				group.add( box );
 
 				// Glass
 
-				glass = new THREE.Mesh( sphereGeometry, glassMaterialSmooth );
+				var glass = new THREE.Mesh( sphereGeometry, glassMaterialSmooth );
 				glass.scale.multiplyScalar( 0.5 );
 				glass.position.set( 75, - 250 + 5, - 75 );
 				glass.rotation.y = 0.5;
@@ -176,24 +171,24 @@
 
 				// bottom
 
-				plane = new THREE.Mesh( planeGeometry, phongMaterialBoxBottom );
+				var plane = new THREE.Mesh( planeGeometry, phongMaterialBoxBottom );
 				plane.position.set( 0, - 300 + 2.5, - 300 );
 				scene.add( plane );
 
 				// top
 
-				plane = new THREE.Mesh( planeGeometry, phongMaterialBox );
+				var plane = new THREE.Mesh( planeGeometry, phongMaterialBox );
 				plane.position.set( 0, 300 - 2.5, - 300 );
 				scene.add( plane );
 
 				// back
 
-				plane = new THREE.Mesh( planeGeometry, phongMaterialBox );
+				var plane = new THREE.Mesh( planeGeometry, phongMaterialBox );
 				plane.rotation.x = 1.57;
 				plane.position.set( 0, 0, - 300 );
 				scene.add( plane );
 
-				plane = new THREE.Mesh( planeGeometry, mirrorMaterialFlatDark );
+				var plane = new THREE.Mesh( planeGeometry, mirrorMaterialFlatDark );
 				plane.rotation.x = 1.57;
 				plane.position.set( 0, 0, - 300 + 10 );
 				plane.scale.multiplyScalar( 0.85 );
@@ -201,14 +196,14 @@
 
 				// left
 
-				plane = new THREE.Mesh( planeGeometry, phongMaterialBoxLeft );
+				var plane = new THREE.Mesh( planeGeometry, phongMaterialBoxLeft );
 				plane.rotation.z = 1.57;
 				plane.position.set( - 300, 0, - 300 );
 				scene.add( plane );
 
 				// right
 
-				plane = new THREE.Mesh( planeGeometry, phongMaterialBoxRight );
+				var plane = new THREE.Mesh( planeGeometry, phongMaterialBoxRight );
 				plane.rotation.z = 1.57;
 				plane.position.set( 300, 0, - 300 );
 				scene.add( plane );
@@ -296,7 +291,7 @@
 
 			function rearrange() {
 
-				objects.forEach( function( o ) {
+				group.children.forEach( function( o ) {
 
 					o.position.y += ( Math.random() - 0.5 ) * 100;
 					o.position.x += ( Math.random() - 0.5 ) * 400;

examples/software_lines_sphere.html

@@ -82,10 +82,10 @@
 				scene = new THREE.Scene();
 
 				var i, line, vertex1, vertex2, material, p,
-				parameters = [ [ 0.25, 0xff7700, 1, 2 ], [ 0.5, 0xff9900, 1, 1 ], 
+				parameters = [ [ 0.25, 0xff7700, 1, 2 ], [ 0.5, 0xff9900, 1, 1 ],
 						[ 0.75, 0xffaa00, 0.75, 1 ], [ 1, 0xffaa00, 0.5, 1 ],
 						[ 1.25, 0x000833, 0.8, 1 ], [ 3.0, 0xaaaaaa, 0.75, 2 ],
-						[ 3.5, 0xffffff, 0.5, 1 ], [ 4.5, 0xffffff, 0.25, 1 ], 
+						[ 3.5, 0xffffff, 0.5, 1 ], [ 4.5, 0xffffff, 0.25, 1 ],
 						[ 5.5, 0xffffff, 0.125, 1 ] ];
 
 				var geometry = createGeometry();
@@ -121,7 +121,7 @@
 
 				var geometry = new THREE.Geometry();
 
-				for ( i = 0; i < 1500; i ++ ) {
+				for ( var i = 0; i < 1500; i ++ ) {
 
 					var vertex1 = new THREE.Vector3();
 					vertex1.x = Math.random() * 2 - 1;
@@ -130,7 +130,7 @@
 					vertex1.normalize();
 					vertex1.multiplyScalar( r );
 
-					vertex2 = vertex1.clone();
+					var vertex2 = vertex1.clone();
 					vertex2.multiplyScalar( Math.random() * 0.09 + 1 );
 
 					geometry.vertices.push( vertex1 );

examples/software_sandbox.html

@@ -103,24 +103,24 @@
 				// Line
 				var points = hilbert3D( new THREE.Vector3( 0,0,0 ), 200.0, 1, 0, 1, 2, 3, 4, 5, 6, 7 );
 				var spline = new THREE.CatmullRomCurve3( points );
-				var n_sub = 6, colors = [], line;
-				var lineGeometry = new THREE.Geometry();
+				var n_sub = 6, colors = [];
 
-				for ( i = 0; i < points.length * n_sub; i ++ ) {
+				var lineGeometry = new THREE.Geometry();
+				var vertices = lineGeometry.vertices;
 
-					index = i / ( points.length * n_sub );
-					position = spline.getPoint( index );
+				for ( var i = 0; i < points.length * n_sub; i ++ ) {
 
-					lineGeometry.vertices[ i ] = new THREE.Vector3( position.x, position.y, position.z );
+					var index = i / ( points.length * n_sub );
 
+					vertices[ i ] = spline.getPoint( index );
 					colors[ i ] = new THREE.Color( 0x88aaff );
 
 				}
 
 				lineGeometry.colors = colors;
 
-				material = new THREE.LineBasicMaterial( { opacity: 1, linewidth: 3, vertexColors: THREE.VertexColors } );
-				line = new THREE.Line( lineGeometry, material );
+				var material = new THREE.LineBasicMaterial( { opacity: 1, linewidth: 3, vertexColors: THREE.VertexColors } );
+				var line = new THREE.Line( lineGeometry, material );
 				line.scale.set( 0.5, 0.5, 0.5 );
 				line.position.set( 0, -200, 0);
 				scene.add( line );

examples/webgl_animation_cloth.html

@@ -318,8 +318,11 @@
 
 				var time = Date.now();
 
-				windStrength = Math.cos( time / 7000 ) * 20 + 40;
-				windForce.set( Math.sin( time / 2000 ), Math.cos( time / 3000 ), Math.sin( time / 1000 ) ).normalize().multiplyScalar( windStrength );
+				var windStrength = Math.cos( time / 7000 ) * 20 + 40;
+				
+				windForce.set( Math.sin( time / 2000 ), Math.cos( time / 3000 ), Math.sin( time / 1000 ) )
+				windForce.normalize()
+				windForce.multiplyScalar( windStrength );
 
 				simulate( time );
 				render();

examples/webgl_camera_logarithmicdepthbuffer.html

@@ -100,7 +100,7 @@
 			var zoompos = -100, minzoomspeed = .015;
 			var zoomspeed = minzoomspeed;
 
-			var container, stats;
+			var container, border, stats;
 			var objects = {};
 
 			// Generate a number of text labels, from 1µm in size up to 100,000,000 light years

examples/webgl_clipping_intersection.html

@@ -22,7 +22,9 @@
 		<script>
 
 			var camera, scene, renderer;
-			var group;
+			var group, mode;
+
+			var stats;
 
 			init();
 			animate();

examples/webgl_decals.html

@@ -167,6 +167,8 @@
 
 			function onTouchMove( event ) {
 
+				var x, y;
+
 				if ( event.changedTouches ) {
 
 					x = event.changedTouches[ 0 ].pageX;

examples/webgl_geometry_colors_lookuptable.html

@@ -33,7 +33,6 @@
 
 	<body>
 
-
 		<div id="info"><a href="http://threejs.org" target="_blank">three.js</a> webgl - lookuptable - vertex color values from a range of data values.<br />
 		press A: change color map, press S: change numberOfColors, press D: toggle Legend on/off, press F: change Legend layout<br />
 		</div>
@@ -183,7 +182,7 @@
 
 						var colorValue = geometry.attributes.pressure.array[ i ];
 
-						color = lut.getColor( colorValue );
+						var color = lut.getColor( colorValue );
 
 						if ( color == undefined ) {
 
@@ -217,13 +216,13 @@
 
 					if ( legendLayout ) {
 
+						var legend;
+
 						if ( legendLayout == 'horizontal' ) {
 
 							legend = lut.setLegendOn( { 'layout':'horizontal', 'position': { 'x': 21, 'y': 6, 'z': 5 } } );
 
-						}
-
-						else {
+						} else {
 
 							legend = lut.setLegendOn();
 

examples/webgl_geometry_convex.html

@@ -61,7 +61,7 @@
 
 				// controls
 
-				controls = new THREE.OrbitControls( camera, renderer.domElement );
+				var controls = new THREE.OrbitControls( camera, renderer.domElement );
 				controls.minDistance = 20;
 				controls.maxDistance = 50;
 				controls.maxPolarAngle = Math.PI / 2;
@@ -117,12 +117,12 @@
 
 				var meshGeometry = new THREE.ConvexBufferGeometry( pointsGeometry.vertices );
 
-				mesh = new THREE.Mesh( meshGeometry, meshMaterial );
+				var mesh = new THREE.Mesh( meshGeometry, meshMaterial );
 				mesh.material.side = THREE.BackSide; // back faces
 				mesh.renderOrder = 0;
 				group.add( mesh );
 
-				mesh = new THREE.Mesh( meshGeometry, meshMaterial.clone() );
+				var mesh = new THREE.Mesh( meshGeometry, meshMaterial.clone() );
 				mesh.material.side = THREE.FrontSide; // front faces
 				mesh.renderOrder = 1;
 				group.add( mesh );

examples/webgl_geometry_extrude_shapes2.html

@@ -1,529 +1,512 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-<title>three.js webgl - geometry - extrude shapes from geodata</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 {
-	font-family: Monospace;
-	background-color: #f0f0f0;
-	margin: 0px;
-	overflow: hidden;
-}
-</style>
-</head>
-
-<body>
-<canvas id="debug" style="position:absolute; left:100px"></canvas>
-
-
-
-<script>
-'use strict';
-</script>
-
-
-
-<script type="text/javascript" src="../build/three.js"></script>
-<script src="js/libs/stats.min.js"></script>
-
-
-
-<script>
-// From d3-threeD.js
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this file,
- * You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-function d3threeD(exports) {
+	<head>
+		<title>three.js webgl - geometry - extrude shapes from geodata</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 {
+			font-family: Monospace;
+			background-color: #f0f0f0;
+			margin: 0px;
+			overflow: hidden;
+		}
+		</style>
+	</head>
+
+	<body>
+
+		<script type="text/javascript" src="../build/three.js"></script>
+		<script src="js/libs/stats.min.js"></script>
+
+		<script>
+			// From d3-threeD.js
+			/* This Source Code Form is subject to the terms of the Mozilla Public
+			 * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+			 * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+			function d3threeD(exports) {
+
+				const DEGS_TO_RADS = Math.PI / 180, UNIT_SIZE = 100;
+
+				const DIGIT_0 = 48, DIGIT_9 = 57, COMMA = 44, SPACE = 32, PERIOD = 46, MINUS = 45;
+
+				exports.transformSVGPath =
+				function transformSVGPath(pathStr) {
+					var path = new THREE.ShapePath();
+
+					var idx = 1, len = pathStr.length, activeCmd,
+						x = 0, y = 0, nx = 0, ny = 0, firstX = null, firstY = null,
+						x1 = 0, x2 = 0, y1 = 0, y2 = 0,
+						rx = 0, ry = 0, xar = 0, laf = 0, sf = 0, cx, cy;
+
+					function eatNum() {
+						var sidx, c, isFloat = false, s;
+						// eat delims
+						while (idx < len) {
+							c = pathStr.charCodeAt(idx);
+							if (c !== COMMA && c !== SPACE)
+								break;
+							idx++;
+						}
+						if (c === MINUS)
+							sidx = idx++;
+						else
+							sidx = idx;
+						// eat number
+						while (idx < len) {
+							c = pathStr.charCodeAt(idx);
+							if (DIGIT_0 <= c && c <= DIGIT_9) {
+								idx++;
+								continue;
+							}
+							else if (c === PERIOD) {
+								idx++;
+								isFloat = true;
+								continue;
+							}
+
+							s = pathStr.substring(sidx, idx);
+							return isFloat ? parseFloat(s) : parseInt(s);
+						}
+
+						s = pathStr.substring(sidx);
+						return isFloat ? parseFloat(s) : parseInt(s);
+					}
+
+					function nextIsNum() {
+						var c;
+						// do permanently eat any delims...
+						while (idx < len) {
+							c = pathStr.charCodeAt(idx);
+							if (c !== COMMA && c !== SPACE)
+								break;
+							idx++;
+						}
+						c = pathStr.charCodeAt(idx);
+						return (c === MINUS || (DIGIT_0 <= c && c <= DIGIT_9));
+					}
+
+					var canRepeat;
+					activeCmd = pathStr[0];
+					while (idx <= len) {
+						canRepeat = true;
+						switch (activeCmd) {
+							// moveto commands, become lineto's if repeated
+							case 'M':
+								x = eatNum();
+								y = eatNum();
+								path.moveTo(x, y);
+								activeCmd = 'L';
+								firstX = x;
+								firstY = y;
+								break;
+							case 'm':
+								x += eatNum();
+								y += eatNum();
+								path.moveTo(x, y);
+								activeCmd = 'l';
+								firstX = x;
+								firstY = y;
+								break;
+							case 'Z':
+							case 'z':
+								canRepeat = false;
+								if (x !== firstX || y !== firstY)
+									path.lineTo(firstX, firstY);
+								break;
+							// - lines!
+							case 'L':
+							case 'H':
+							case 'V':
+								nx = (activeCmd === 'V') ? x : eatNum();
+								ny = (activeCmd === 'H') ? y : eatNum();
+								path.lineTo(nx, ny);
+								x = nx;
+								y = ny;
+								break;
+							case 'l':
+							case 'h':
+							case 'v':
+								nx = (activeCmd === 'v') ? x : (x + eatNum());
+								ny = (activeCmd === 'h') ? y : (y + eatNum());
+								path.lineTo(nx, ny);
+								x = nx;
+								y = ny;
+								break;
+							// - cubic bezier
+							case 'C':
+								x1 = eatNum(); y1 = eatNum();
+							case 'S':
+								if (activeCmd === 'S') {
+									x1 = 2 * x - x2; y1 = 2 * y - y2;
+								}
+								x2 = eatNum();
+								y2 = eatNum();
+								nx = eatNum();
+								ny = eatNum();
+								path.bezierCurveTo(x1, y1, x2, y2, nx, ny);
+								x = nx; y = ny;
+								break;
+							case 'c':
+								x1 = x + eatNum();
+								y1 = y + eatNum();
+							case 's':
+								if (activeCmd === 's') {
+									x1 = 2 * x - x2;
+									y1 = 2 * y - y2;
+								}
+								x2 = x + eatNum();
+								y2 = y + eatNum();
+								nx = x + eatNum();
+								ny = y + eatNum();
+								path.bezierCurveTo(x1, y1, x2, y2, nx, ny);
+								x = nx; y = ny;
+								break;
+							// - quadratic bezier
+							case 'Q':
+								x1 = eatNum(); y1 = eatNum();
+							case 'T':
+								if (activeCmd === 'T') {
+									x1 = 2 * x - x1;
+									y1 = 2 * y - y1;
+								}
+								nx = eatNum();
+								ny = eatNum();
+								path.quadraticCurveTo(x1, y1, nx, ny);
+								x = nx;
+								y = ny;
+								break;
+							case 'q':
+								x1 = x + eatNum();
+								y1 = y + eatNum();
+							case 't':
+								if (activeCmd === 't') {
+									x1 = 2 * x - x1;
+									y1 = 2 * y - y1;
+								}
+								nx = x + eatNum();
+								ny = y + eatNum();
+								path.quadraticCurveTo(x1, y1, nx, ny);
+								x = nx; y = ny;
+								break;
+							// - elliptical arc
+							case 'A':
+								rx = eatNum();
+								ry = eatNum();
+								xar = eatNum() * DEGS_TO_RADS;
+								laf = eatNum();
+								sf = eatNum();
+								nx = eatNum();
+								ny = eatNum();
+								if (rx !== ry) {
+									console.warn("Forcing elliptical arc to be a circular one :(",
+										rx, ry);
+								}
+								// SVG implementation notes does all the math for us! woo!
+								// http://www.w3.org/TR/SVG/implnote.html#ArcImplementationNotes
+								// step1, using x1 as x1'
+								x1 = Math.cos(xar) * (x - nx) / 2 + Math.sin(xar) * (y - ny) / 2;
+								y1 = -Math.sin(xar) * (x - nx) / 2 + Math.cos(xar) * (y - ny) / 2;
+								// step 2, using x2 as cx'
+								var norm = Math.sqrt(
+									 (rx*rx * ry*ry - rx*rx * y1*y1 - ry*ry * x1*x1) /
+									 (rx*rx * y1*y1 + ry*ry * x1*x1));
+								if (laf === sf)
+									norm = -norm;
+								x2 = norm * rx * y1 / ry;
+								y2 = norm * -ry * x1 / rx;
+								// step 3
+								cx = Math.cos(xar) * x2 - Math.sin(xar) * y2 + (x + nx) / 2;
+								cy = Math.sin(xar) * x2 + Math.cos(xar) * y2 + (y + ny) / 2;
+
+								var u = new THREE.Vector2(1, 0),
+									v = new THREE.Vector2((x1 - x2) / rx,
+									                      (y1 - y2) / ry);
+								var startAng = Math.acos(u.dot(v) / u.length() / v.length());
+								if (u.x * v.y - u.y * v.x < 0)
+									startAng = -startAng;
+
+								// we can reuse 'v' from start angle as our 'u' for delta angle
+								u.x = (-x1 - x2) / rx;
+								u.y = (-y1 - y2) / ry;
+
+								var deltaAng = Math.acos(v.dot(u) / v.length() / u.length());
+								// This normalization ends up making our curves fail to triangulate...
+								if (v.x * u.y - v.y * u.x < 0)
+									deltaAng = -deltaAng;
+								if (!sf && deltaAng > 0)
+									deltaAng -= Math.PI * 2;
+								if (sf && deltaAng < 0)
+									deltaAng += Math.PI * 2;
+
+								path.absarc(cx, cy, rx, startAng, startAng + deltaAng, sf);
+								x = nx;
+								y = ny;
+								break;
+							default:
+								throw new Error("weird path command: " + activeCmd);
+						}
+						// just reissue the command
+						if (canRepeat && nextIsNum())
+							continue;
+						activeCmd = pathStr[idx++];
+					}
+
+					return path;
+				}
 
-const DEGS_TO_RADS = Math.PI / 180, UNIT_SIZE = 100;
+			}
 
-const DIGIT_0 = 48, DIGIT_9 = 57, COMMA = 44, SPACE = 32, PERIOD = 46, MINUS = 45;
+			var $d3g = {};
+			d3threeD($d3g);
+
+			/// Part from g0v/twgeojson
+			/// Graphic Engine and Geo Data Init Functions
+
+			var addGeoObject = function( group, svgObject ) {
+				var i,j, len, len1;
+				var path, mesh, color, material, amount, simpleShapes, simpleShape, shape3d, x, toAdd, results = [];
+				var thePaths = svgObject.paths;
+				var theAmounts = svgObject.amounts;
+				var theColors = svgObject.colors;
+				var theCenter = svgObject.center;
+
+				len = thePaths.length;
+				for (i = 0; i < len; ++i) {
+					path = $d3g.transformSVGPath( thePaths[i] );
+					color = new THREE.Color( theColors[i] );
+					material = new THREE.MeshLambertMaterial({
+						color: color,
+						emissive: color
+					});
+					amount = theAmounts[i];
+					simpleShapes = path.toShapes(true);
+					len1 = simpleShapes.length;
+					for (j = 0; j < len1; ++j) {
+						simpleShape = simpleShapes[j];
+						shape3d = simpleShape.extrude({
+							amount: amount,
+							bevelEnabled: false
+						});
+						mesh = new THREE.Mesh(shape3d, material);
+						mesh.rotation.x = Math.PI;
+						mesh.translateZ( - amount - 1);
+						mesh.translateX( - theCenter.x);
+						mesh.translateY( - theCenter.y);
+						group.add(mesh);
+					}
+				}
+			};
 
-exports.transformSVGPath =
-function transformSVGPath(pathStr) {
-	var path = new THREE.ShapePath();
+			// Main
 
-	var idx = 1, len = pathStr.length, activeCmd,
-		x = 0, y = 0, nx = 0, ny = 0, firstX = null, firstY = null,
-		x1 = 0, x2 = 0, y1 = 0, y2 = 0,
-		rx = 0, ry = 0, xar = 0, laf = 0, sf = 0, cx, cy;
+			var renderer, stats;
+			var scene, camera, group;
 
-	function eatNum() {
-		var sidx, c, isFloat = false, s;
-		// eat delims
-		while (idx < len) {
-			c = pathStr.charCodeAt(idx);
-			if (c !== COMMA && c !== SPACE)
-				break;
-			idx++;
-		}
-		if (c === MINUS)
-			sidx = idx++;
-		else
-			sidx = idx;
-		// eat number
-		while (idx < len) {
-			c = pathStr.charCodeAt(idx);
-			if (DIGIT_0 <= c && c <= DIGIT_9) {
-				idx++;
-				continue;
-			}
-			else if (c === PERIOD) {
-				idx++;
-				isFloat = true;
-				continue;
-			}
-
-			s = pathStr.substring(sidx, idx);
-			return isFloat ? parseFloat(s) : parseInt(s);
-		}
-
-		s = pathStr.substring(sidx);
-		return isFloat ? parseFloat(s) : parseInt(s);
-	}
-
-	function nextIsNum() {
-		var c;
-		// do permanently eat any delims...
-		while (idx < len) {
-			c = pathStr.charCodeAt(idx);
-			if (c !== COMMA && c !== SPACE)
-				break;
-			idx++;
-		}
-		c = pathStr.charCodeAt(idx);
-		return (c === MINUS || (DIGIT_0 <= c && c <= DIGIT_9));
-	}
-
-	var canRepeat;
-	activeCmd = pathStr[0];
-	while (idx <= len) {
-		canRepeat = true;
-		switch (activeCmd) {
-			// moveto commands, become lineto's if repeated
-			case 'M':
-				x = eatNum();
-				y = eatNum();
-				path.moveTo(x, y);
-				activeCmd = 'L';
-				firstX = x;
-				firstY = y;
-				break;
-			case 'm':
-				x += eatNum();
-				y += eatNum();
-				path.moveTo(x, y);
-				activeCmd = 'l';
-				firstX = x;
-				firstY = y;
-				break;
-			case 'Z':
-			case 'z':
-				canRepeat = false;
-				if (x !== firstX || y !== firstY)
-					path.lineTo(firstX, firstY);
-				break;
-			// - lines!
-			case 'L':
-			case 'H':
-			case 'V':
-				nx = (activeCmd === 'V') ? x : eatNum();
-				ny = (activeCmd === 'H') ? y : eatNum();
-				path.lineTo(nx, ny);
-				x = nx;
-				y = ny;
-				break;
-			case 'l':
-			case 'h':
-			case 'v':
-				nx = (activeCmd === 'v') ? x : (x + eatNum());
-				ny = (activeCmd === 'h') ? y : (y + eatNum());
-				path.lineTo(nx, ny);
-				x = nx;
-				y = ny;
-				break;
-			// - cubic bezier
-			case 'C':
-				x1 = eatNum(); y1 = eatNum();
-			case 'S':
-				if (activeCmd === 'S') {
-					x1 = 2 * x - x2; y1 = 2 * y - y2;
-				}
-				x2 = eatNum();
-				y2 = eatNum();
-				nx = eatNum();
-				ny = eatNum();
-				path.bezierCurveTo(x1, y1, x2, y2, nx, ny);
-				x = nx; y = ny;
-				break;
-			case 'c':
-				x1 = x + eatNum();
-				y1 = y + eatNum();
-			case 's':
-				if (activeCmd === 's') {
-					x1 = 2 * x - x2;
-					y1 = 2 * y - y2;
-				}
-				x2 = x + eatNum();
-				y2 = y + eatNum();
-				nx = x + eatNum();
-				ny = y + eatNum();
-				path.bezierCurveTo(x1, y1, x2, y2, nx, ny);
-				x = nx; y = ny;
-				break;
-			// - quadratic bezier
-			case 'Q':
-				x1 = eatNum(); y1 = eatNum();
-			case 'T':
-				if (activeCmd === 'T') {
-					x1 = 2 * x - x1;
-					y1 = 2 * y - y1;
-				}
-				nx = eatNum();
-				ny = eatNum();
-				path.quadraticCurveTo(x1, y1, nx, ny);
-				x = nx;
-				y = ny;
-				break;
-			case 'q':
-				x1 = x + eatNum();
-				y1 = y + eatNum();
-			case 't':
-				if (activeCmd === 't') {
-					x1 = 2 * x - x1;
-					y1 = 2 * y - y1;
-				}
-				nx = x + eatNum();
-				ny = y + eatNum();
-				path.quadraticCurveTo(x1, y1, nx, ny);
-				x = nx; y = ny;
-				break;
-			// - elliptical arc
-			case 'A':
-				rx = eatNum();
-				ry = eatNum();
-				xar = eatNum() * DEGS_TO_RADS;
-				laf = eatNum();
-				sf = eatNum();
-				nx = eatNum();
-				ny = eatNum();
-				if (rx !== ry) {
-					console.warn("Forcing elliptical arc to be a circular one :(",
-						rx, ry);
-				}
-				// SVG implementation notes does all the math for us! woo!
-				// http://www.w3.org/TR/SVG/implnote.html#ArcImplementationNotes
-				// step1, using x1 as x1'
-				x1 = Math.cos(xar) * (x - nx) / 2 + Math.sin(xar) * (y - ny) / 2;
-				y1 = -Math.sin(xar) * (x - nx) / 2 + Math.cos(xar) * (y - ny) / 2;
-				// step 2, using x2 as cx'
-				var norm = Math.sqrt(
-					 (rx*rx * ry*ry - rx*rx * y1*y1 - ry*ry * x1*x1) /
-					 (rx*rx * y1*y1 + ry*ry * x1*x1));
-				if (laf === sf)
-					norm = -norm;
-				x2 = norm * rx * y1 / ry;
-				y2 = norm * -ry * x1 / rx;
-				// step 3
-				cx = Math.cos(xar) * x2 - Math.sin(xar) * y2 + (x + nx) / 2;
-				cy = Math.sin(xar) * x2 + Math.cos(xar) * y2 + (y + ny) / 2;
-
-				var u = new THREE.Vector2(1, 0),
-					v = new THREE.Vector2((x1 - x2) / rx,
-					                      (y1 - y2) / ry);
-				var startAng = Math.acos(u.dot(v) / u.length() / v.length());
-				if (u.x * v.y - u.y * v.x < 0)
-					startAng = -startAng;
-
-				// we can reuse 'v' from start angle as our 'u' for delta angle
-				u.x = (-x1 - x2) / rx;
-				u.y = (-y1 - y2) / ry;
-
-				var deltaAng = Math.acos(v.dot(u) / v.length() / u.length());
-				// This normalization ends up making our curves fail to triangulate...
-				if (v.x * u.y - v.y * u.x < 0)
-					deltaAng = -deltaAng;
-				if (!sf && deltaAng > 0)
-					deltaAng -= Math.PI * 2;
-				if (sf && deltaAng < 0)
-					deltaAng += Math.PI * 2;
-
-				path.absarc(cx, cy, rx, startAng, startAng + deltaAng, sf);
-				x = nx;
-				y = ny;
-				break;
-			default:
-				throw new Error("weird path command: " + activeCmd);
-		}
-		// just reissue the command
-		if (canRepeat && nextIsNum())
-			continue;
-		activeCmd = pathStr[idx++];
-	}
-
-	return path;
-}
-}
-
-var $d3g = {};
-d3threeD($d3g);
-</script>
-
-
-
-<script>
-/// Part from g0v/twgeojson
-/// Graphic Engine and Geo Data Init Functions
-
-var addGeoObject = function( group, svgObject ) {
-	var i,j, len, len1;
-	var path, mesh, color, material, amount, simpleShapes, simpleShape, shape3d, x, toAdd, results = [];
-	var thePaths = svgObject.paths;
-	var theAmounts = svgObject.amounts;
-	var theColors = svgObject.colors;
-	var theCenter = svgObject.center;
-
-	len = thePaths.length;
-	for (i = 0; i < len; ++i) {
-		path = $d3g.transformSVGPath( thePaths[i] );
-		color = new THREE.Color( theColors[i] );
-		material = new THREE.MeshLambertMaterial({
-			color: color,
-			emissive: color
-		});
-		amount = theAmounts[i];
-		simpleShapes = path.toShapes(true);
-		len1 = simpleShapes.length;
-		for (j = 0; j < len1; ++j) {
-			simpleShape = simpleShapes[j];
-			shape3d = simpleShape.extrude({
-				amount: amount,
-				bevelEnabled: false
-			});
-			mesh = new THREE.Mesh(shape3d, material);
-			mesh.rotation.x = Math.PI;
-			mesh.translateZ( - amount - 1);
-			mesh.translateX( - theCenter.x);
-			mesh.translateY( - theCenter.y);
-			group.add(mesh);
-		}
-	}
-};
-
-var init3d = function(){
-
-	/// Global : renderer
-	renderer = new THREE.WebGLRenderer( { antialias: true } );
-	renderer.setClearColor( 0xb0b0b0 );
-	renderer.setPixelRatio( window.devicePixelRatio );
-	renderer.setSize( window.innerWidth, window.innerHeight );
-
-	/// Global : scene
-	scene = new THREE.Scene();
-
-	/// Global : camera
-	camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
-	camera.position.set( 0, 0, 200 );
-
-	/// Global : group
-	group = new THREE.Group();
-	scene.add( group );
-
-	/// direct light
-	var light = new THREE.DirectionalLight( 0x404040 );
-	light.position.set( 0.75, 0.75, 1.0 ).normalize();
-	scene.add( light );
+			var targetRotation = 0;
+			var targetRotationOnMouseDown = 0;
 
-	/// ambient light
-	var ambientLight = new THREE.AmbientLight(0x404040);
-	scene.add( ambientLight );
-
-	/// backgroup grids
-	var helper = new THREE.GridHelper( 160, 10 );
-	helper.rotation.x = Math.PI / 2;
-	group.add( helper );
+			var mouseX = 0;
+			var mouseXOnMouseDown = 0;
 
-	var obj = initSVGObject();
-	addGeoObject( group, obj );
-};
+			var windowHalfX = window.innerWidth / 2;
+			var windowHalfY = window.innerHeight / 2;
 
-var initSVGObject = function() {
-	var obj = {};
+			var container = document.createElement( 'div' );
+			document.body.appendChild( container );
 
-	/// The geo data from Taipei City, Keelung City, Taipei County in SVG form
-	obj.paths = [
-		/// Taipei City
-		"M366.2182,108.9780 L368.0329,110.3682 L367.5922,112.4411 L369.9258,116.0311 L368.9827,117.3543 " +
-		"L371.5686,119.8491 L370.5599,121.7206 L372.9314,124.8009 L368.8889,126.7603 L369.2695,130.7622 " +
-		"L366.1499,130.3388 L363.4698,128.1161 L362.9256,125.6018 L360.8153,126.4025 L360.2968,124.3588 " +
-		"L361.9519,121.1623 L360.4475,118.7162 L358.1163,117.8678 L358.7094,115.7577 L361.6243,112.4576 Z",
-		/// Keelung City
-		"M380.2689,113.3850 L383.5604,114.2370 L383.7404,114.2386 L385.4082,115.6247 L384.9725,117.4631 " +
-		"L381.6681,117.9439 L383.0209,121.0914 L379.4649,122.7061 L373.4987,118.8487 L372.0980,114.7589 " +
-		"L377.9716,112.0707 Z",
-		/// Taipei County
-		"M359.4486,155.6690 L357.0422,152.7420 L355.1688,148.0173 L357.1186,145.8045 L354.1323,141.2242 " +
-		"L351.1807,141.6609 L348.9387,140.5372 L349.5415,137.8396 L347.5174,136.1694 L347.6299,129.2327 " +
-		"L351.4192,128.8067 L354.2518,125.3113 L352.5805,121.8038 L349.3190,120.9429 L344.3277,116.7676 " +
-		"L350.9772,115.1221 L354.5759,112.5371 L354.5667,110.6949 L357.4098,105.7489 L362.3963,101.8443 " +
-		"L364.4415,101.0819 L364.5314,101.0828 L364.6209,101.1230 L364.7698,101.2029 L368.1221,101.5115 " +
-		"L371.7216,104.1338 L372.2958,106.7261 L375.5949,109.6971 L377.0415,108.8875 L377.0737,108.6526 " +
-		"L377.4037,108.6165 L376.8840,109.7091 L376.7323,109.9037 L377.9416,112.0705 L371.7970,114.8736 " +
-		"L374.0935,119.4031 L380.7848,122.7963 L382.6529,121.9897 L381.5792,117.8256 L385.0339,117.3069 " +
-		"L385.4082,115.6247 L388.7014,116.3969 L389.8697,116.6024 L390.0206,116.4860 L391.0396,116.6118 " +
-		"L394.6665,116.9929 L394.4694,119.2255 L394.3172,119.4987 L395.3792,121.8977 L395.2728,124.0526 " +
-		"L397.2123,125.6350 L401.1709,126.2516 L401.2612,126.2130 L401.4086,126.6060 L400.1992,127.7733 " +
-		"L399.7769,128.0446 L399.6247,128.3179 L398.1779,129.0521 L394.2418,129.2969 L388.7324,130.9385 " +
-		"L389.2782,134.0003 L383.7237,137.0111 L381.7445,139.9336 L379.7001,139.9546 L376.1539,143.0580 " +
-		"L371.3022,144.1094 L368.6009,146.5914 L368.7361,151.1399 L363.6153,154.4980 " +
-		/// Taipei County hole.
-		"M363.4600,128.3904 L366.6300,130.3829 L369.3732,129.3913 L369.5603,125.6695 L374.3989,125.1677 " +
-		"L370.8412,123.6440 L371.0684,118.8252 L369.0431,117.3157 L369.6882,115.7936 L367.8578,112.8749 " +
-		"L368.1217,110.4867 L366.5152,109.2554 L361.9554,112.3435 L358.1163,117.8678 L361.7218,120.2192 " +
-		"L360.7261,126.3232 L362.8064,125.5221 Z"];
+			var info = document.createElement( 'div' );
+			info.style.position = 'absolute';
+			info.style.top = '10px';
+			info.style.width = '100%';
+			info.style.textAlign = 'center';
+			info.innerHTML = 'Shapes Extrusion via Geo Data<br/>Drag to spin';
+			container.appendChild( info );
 
-	obj.amounts = [ 19, 20, 21 ];
-	obj.colors =  [ 0xC07000, 0xC08000, 0xC0A000 ];
-	obj.center = { x:365, y:125 };
+			init();
 
-	return obj;
-};
-</script>
+			container.appendChild( renderer.domElement );
 
+			stats = new Stats();
+			container.appendChild( stats.dom );
 
+			document.addEventListener( 'mousedown', onDocumentMouseDown, false );
+			document.addEventListener( 'touchstart', onDocumentTouchStart, false );
+			document.addEventListener( 'touchmove', onDocumentTouchMove, false );
+			window.addEventListener( 'resize', onWindowResize, false );
 
-<script>
-	/// Events from extrude shapes example
+			animate();
 
-	function onWindowResize() {
+			//
 
-		windowHalfX = window.innerWidth / 2;
-		windowHalfY = window.innerHeight / 2;
+			function init() {
 
-		camera.aspect = window.innerWidth / window.innerHeight;
-		camera.updateProjectionMatrix();
+				/// Global : renderer
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer.setClearColor( 0xb0b0b0 );
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
-		renderer.setSize( window.innerWidth, window.innerHeight );
-	}
+				/// Global : scene
+				scene = new THREE.Scene();
 
-	function onDocumentMouseDown( event ) {
+				/// Global : camera
+				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera.position.set( 0, 0, 200 );
 
-		event.preventDefault();
+				/// Global : group
+				group = new THREE.Group();
+				scene.add( group );
 
-		document.addEventListener( 'mousemove', onDocumentMouseMove, false );
-		document.addEventListener( 'mouseup', onDocumentMouseUp, false );
-		document.addEventListener( 'mouseout', onDocumentMouseOut, false );
+				/// direct light
+				var light = new THREE.DirectionalLight( 0x404040 );
+				light.position.set( 0.75, 0.75, 1.0 ).normalize();
+				scene.add( light );
 
-		mouseXOnMouseDown = event.clientX - windowHalfX;
-		targetRotationOnMouseDown = targetRotation;
-	}
+				/// ambient light
+				var ambientLight = new THREE.AmbientLight(0x404040);
+				scene.add( ambientLight );
 
-	function onDocumentMouseMove( event ) {
+				/// backgroup grids
+				var helper = new THREE.GridHelper( 160, 10 );
+				helper.rotation.x = Math.PI / 2;
+				group.add( helper );
 
-		mouseX = event.clientX - windowHalfX;
+				var obj = initSVGObject();
 
-		targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;
-	}
+				addGeoObject( group, obj );
 
-	function onDocumentMouseUp( event ) {
+			}
 
-		document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
-		document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
-		document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
-	}
+			function initSVGObject() {
+
+				var obj = {};
+
+				/// The geo data from Taipei City, Keelung City, Taipei County in SVG form
+				obj.paths = [
+					/// Taipei City
+					"M366.2182,108.9780 L368.0329,110.3682 L367.5922,112.4411 L369.9258,116.0311 L368.9827,117.3543 " +
+					"L371.5686,119.8491 L370.5599,121.7206 L372.9314,124.8009 L368.8889,126.7603 L369.2695,130.7622 " +
+					"L366.1499,130.3388 L363.4698,128.1161 L362.9256,125.6018 L360.8153,126.4025 L360.2968,124.3588 " +
+					"L361.9519,121.1623 L360.4475,118.7162 L358.1163,117.8678 L358.7094,115.7577 L361.6243,112.4576 Z",
+					/// Keelung City
+					"M380.2689,113.3850 L383.5604,114.2370 L383.7404,114.2386 L385.4082,115.6247 L384.9725,117.4631 " +
+					"L381.6681,117.9439 L383.0209,121.0914 L379.4649,122.7061 L373.4987,118.8487 L372.0980,114.7589 " +
+					"L377.9716,112.0707 Z",
+					/// Taipei County
+					"M359.4486,155.6690 L357.0422,152.7420 L355.1688,148.0173 L357.1186,145.8045 L354.1323,141.2242 " +
+					"L351.1807,141.6609 L348.9387,140.5372 L349.5415,137.8396 L347.5174,136.1694 L347.6299,129.2327 " +
+					"L351.4192,128.8067 L354.2518,125.3113 L352.5805,121.8038 L349.3190,120.9429 L344.3277,116.7676 " +
+					"L350.9772,115.1221 L354.5759,112.5371 L354.5667,110.6949 L357.4098,105.7489 L362.3963,101.8443 " +
+					"L364.4415,101.0819 L364.5314,101.0828 L364.6209,101.1230 L364.7698,101.2029 L368.1221,101.5115 " +
+					"L371.7216,104.1338 L372.2958,106.7261 L375.5949,109.6971 L377.0415,108.8875 L377.0737,108.6526 " +
+					"L377.4037,108.6165 L376.8840,109.7091 L376.7323,109.9037 L377.9416,112.0705 L371.7970,114.8736 " +
+					"L374.0935,119.4031 L380.7848,122.7963 L382.6529,121.9897 L381.5792,117.8256 L385.0339,117.3069 " +
+					"L385.4082,115.6247 L388.7014,116.3969 L389.8697,116.6024 L390.0206,116.4860 L391.0396,116.6118 " +
+					"L394.6665,116.9929 L394.4694,119.2255 L394.3172,119.4987 L395.3792,121.8977 L395.2728,124.0526 " +
+					"L397.2123,125.6350 L401.1709,126.2516 L401.2612,126.2130 L401.4086,126.6060 L400.1992,127.7733 " +
+					"L399.7769,128.0446 L399.6247,128.3179 L398.1779,129.0521 L394.2418,129.2969 L388.7324,130.9385 " +
+					"L389.2782,134.0003 L383.7237,137.0111 L381.7445,139.9336 L379.7001,139.9546 L376.1539,143.0580 " +
+					"L371.3022,144.1094 L368.6009,146.5914 L368.7361,151.1399 L363.6153,154.4980 " +
+					/// Taipei County hole.
+					"M363.4600,128.3904 L366.6300,130.3829 L369.3732,129.3913 L369.5603,125.6695 L374.3989,125.1677 " +
+					"L370.8412,123.6440 L371.0684,118.8252 L369.0431,117.3157 L369.6882,115.7936 L367.8578,112.8749 " +
+					"L368.1217,110.4867 L366.5152,109.2554 L361.9554,112.3435 L358.1163,117.8678 L361.7218,120.2192 " +
+					"L360.7261,126.3232 L362.8064,125.5221 Z"];
+
+				obj.amounts = [ 19, 20, 21 ];
+				obj.colors =  [ 0xC07000, 0xC08000, 0xC0A000 ];
+				obj.center = { x:365, y:125 };
+
+				return obj;
 
-	function onDocumentMouseOut( event ) {
+			}
 
-		document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
-		document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
-		document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
-	}
+			/// Events from extrude shapes example
 
-	function onDocumentTouchStart( event ) {
+			function onWindowResize() {
 
-		if ( event.touches.length == 1 ) {
+				windowHalfX = window.innerWidth / 2;
+				windowHalfY = window.innerHeight / 2;
 
-			event.preventDefault();
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
 
-			mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
-			targetRotationOnMouseDown = targetRotation;
-		}
-	}
+				renderer.setSize( window.innerWidth, window.innerHeight );
+			}
 
-	function onDocumentTouchMove( event ) {
+			function onDocumentMouseDown( event ) {
 
-		if ( event.touches.length == 1 ) {
+				event.preventDefault();
 
-			event.preventDefault();
+				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
+				document.addEventListener( 'mouseup', onDocumentMouseUp, false );
+				document.addEventListener( 'mouseout', onDocumentMouseOut, false );
 
-			mouseX = event.touches[ 0 ].pageX - windowHalfX;
-			targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;
-		}
-	}
+				mouseXOnMouseDown = event.clientX - windowHalfX;
+				targetRotationOnMouseDown = targetRotation;
+			}
 
-	function animate() {
+			function onDocumentMouseMove( event ) {
 
-		/// compatibility : http://caniuse.com/requestanimationframe
-		requestAnimationFrame( animate );
+				mouseX = event.clientX - windowHalfX;
 
-		render();
-		stats.update();
-	}
+				targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;
+			}
 
-	function render() {
+			function onDocumentMouseUp( event ) {
 
-		group.rotation.y += ( targetRotation - group.rotation.y ) * 0.05;
-		renderer.render( scene, camera );
-	}
-</script>
+				document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
+				document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
+				document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
+			}
 
+			function onDocumentMouseOut( event ) {
 
+				document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
+				document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
+				document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
+			}
 
-<script>
-	/// Main
+			function onDocumentTouchStart( event ) {
 
-	var renderer, stats;
-	var scene, camera, group;
+				if ( event.touches.length == 1 ) {
 
-	var targetRotation = 0;
-	var targetRotationOnMouseDown = 0;
+					event.preventDefault();
 
-	var mouseX = 0;
-	var mouseXOnMouseDown = 0;
+					mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
+					targetRotationOnMouseDown = targetRotation;
+				}
+			}
 
-	var windowHalfX = window.innerWidth / 2;
-	var windowHalfY = window.innerHeight / 2;
+			function onDocumentTouchMove( event ) {
 
-	var container = document.createElement( 'div' );
-	document.body.appendChild( container );
+				if ( event.touches.length == 1 ) {
 
-	var info = document.createElement( 'div' );
-	info.style.position = 'absolute';
-	info.style.top = '10px';
-	info.style.width = '100%';
-	info.style.textAlign = 'center';
-	info.innerHTML = 'Shapes Extrusion via Geo Data<br/>Drag to spin';
-	container.appendChild( info );
+					event.preventDefault();
 
-	init3d();
+					mouseX = event.touches[ 0 ].pageX - windowHalfX;
+					targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;
+				}
+			}
 
-	container.appendChild( renderer.domElement );
+			function animate() {
 
-	stats = new Stats();
-	container.appendChild( stats.dom );
+				/// compatibility : http://caniuse.com/requestanimationframe
+				requestAnimationFrame( animate );
 
-	document.addEventListener( 'mousedown', onDocumentMouseDown, false );
-	document.addEventListener( 'touchstart', onDocumentTouchStart, false );
-	document.addEventListener( 'touchmove', onDocumentTouchMove, false );
-	window.addEventListener( 'resize', onWindowResize, false );
+				render();
+				stats.update();
+			}
 
-	animate();
-</script>
+			function render() {
 
+				group.rotation.y += ( targetRotation - group.rotation.y ) * 0.05;
+				renderer.render( scene, camera );
+			}
 
+		</script>
 
-</body>
+	</body>
 </html>

examples/webgl_geometry_extrude_splines.html

@@ -123,7 +123,7 @@
 
 			}
 
-			extrudePath = splines[ params.spline ];
+			var extrudePath = splines[ params.spline ];
 
 			tubeGeometry = new THREE.TubeBufferGeometry( extrudePath, params.extrusionSegments, 2, params.radiusSegments, params.closed );
 

examples/webgl_geometry_nurbs.html

@@ -31,7 +31,6 @@
 		<script src="js/curves/NURBSUtils.js"></script>
 		<script src="js/libs/stats.min.js"></script>
 
-
 		<script>
 
 			var container, stats;
@@ -155,9 +154,11 @@
 				map.wrapS = map.wrapT = THREE.RepeatWrapping;
 				map.anisotropy = 16;
 
-				getSurfacePoint = function(u, v) {
+				function getSurfacePoint(u, v) {
+
 					return nurbsSurface.getPoint(u, v);
-				};
+
+				}
 
 				var geometry = new THREE.ParametricBufferGeometry( getSurfacePoint, 20, 20 );
 				var material = new THREE.MeshLambertMaterial( { map: map, side: THREE.DoubleSide } );

examples/webgl_geometry_spline_editor.html

@@ -42,6 +42,7 @@
 			String.prototype.format = function () {
 
 				var str = this;
+
 				for ( var i = 0; i < arguments.length; i ++ ) {
 
 					str = str.replace( '{' + i + '}', arguments[ i ] );
@@ -59,6 +60,7 @@
 			var options;
 
 			var geometry = new THREE.BoxGeometry( 20, 20, 20 );
+			var transformControl;
 
 			var ARC_SEGMENTS = 200;
 			var splineMesh;
@@ -142,13 +144,24 @@
 				gui.open();
 
 				// Controls
-				controls = new THREE.OrbitControls( camera, renderer.domElement );
+				var controls = new THREE.OrbitControls( camera, renderer.domElement );
 				controls.damping = 0.2;
 				controls.addEventListener( 'change', render );
 
+				controls.addEventListener( 'start', function() {
+
+					cancelHideTransorm();
+
+				} );
+
+				controls.addEventListener( 'end', function() {
+
+					delayHideTransform();
+
+				} );
+
 				transformControl = new THREE.TransformControls( camera, renderer.domElement );
 				transformControl.addEventListener( 'change', render );
-
 				scene.add( transformControl );
 
 				// Hiding transform situation is a little in a mess :()
@@ -191,19 +204,6 @@
 
 				} );
 
-
-				controls.addEventListener( 'start', function() {
-
-					cancelHideTransorm();
-
-				} );
-
-				controls.addEventListener( 'end', function() {
-
-					delayHideTransform();
-
-				} );
-
 				var hiding;
 
 				function delayHideTransform() {
@@ -234,14 +234,15 @@
 				 * Curves
 				 *********/
 
-				var i;
-				for ( i = 0; i < splinePointsLength; i ++ ) {
+				for ( var i = 0; i < splinePointsLength; i ++ ) {
 
 					addSplineObject( positions[ i ] );
 
 				}
+
 				positions = [];
-				for ( i = 0; i < splinePointsLength; i ++ ) {
+
+				for ( var i = 0; i < splinePointsLength; i ++ ) {
 
 					positions.push( splineHelperObjects[ i ].position );
 
@@ -255,10 +256,7 @@
 
 				}
 
-				var curve;
-
-
-				curve = new THREE.CatmullRomCurve3( positions );
+				var curve = new THREE.CatmullRomCurve3( positions );
 				curve.type = 'catmullrom';
 				curve.mesh = new THREE.Line( geometry.clone(), new THREE.LineBasicMaterial( {
 					color: 0xff0000,
@@ -304,10 +302,9 @@
 
 			function addSplineObject( position ) {
 
-				var object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( {
-					color: Math.random() * 0xffffff
-					} ) );
-				object.material.ambient = object.material.color;
+				var material = new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } );
+				var object = new THREE.Mesh( geometry, material );
+
 				if ( position ) {
 
 					object.position.copy( position );
@@ -331,8 +328,8 @@
 			function addPoint() {
 
 				splinePointsLength ++;
-				positions.push( addSplineObject()
-								.position );
+
+				positions.push( addSplineObject().position );
 
 				updateSplineOutline();
 
@@ -355,8 +352,6 @@
 
 			function updateSplineOutline() {
 
-				var p;
-
 				for ( var k in splines ) {
 
 					var spline = splines[ k ];
@@ -365,7 +360,7 @@
 
 					for ( var i = 0; i < ARC_SEGMENTS; i ++ ) {
 
-						p = splineMesh.geometry.vertices[ i ];
+						var p = splineMesh.geometry.vertices[ i ];
 						p.copy( spline.getPoint( i /  ( ARC_SEGMENTS - 1 ) ) );
 
 					}
@@ -379,11 +374,11 @@
 
 			function exportSpline() {
 
-				var p;
 				var strplace = [];
-				for ( i = 0; i < splinePointsLength; i ++ ) {
 
-					p = splineHelperObjects[ i ].position;
+				for ( var i = 0; i < splinePointsLength; i ++ ) {
+
+					var p = splineHelperObjects[ i ].position;
 					strplace.push( 'new THREE.Vector3({0}, {1}, {2})'.format( p.x, p.y, p.z ) )
 
 				}
@@ -408,7 +403,7 @@
 
 				}
 
-				for ( i = 0; i < positions.length; i ++ ) {
+				for ( var i = 0; i < positions.length; i ++ ) {
 
 					positions[ i ].copy( new_positions[ i ] );
 

examples/webgl_geometry_teapot.html

@@ -81,7 +81,7 @@
 
 			function init() {
 
-				container = document.createElement( 'div' );
+				var container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
 				var canvasWidth = window.innerWidth;

examples/webgl_geometry_terrain.html

@@ -77,7 +77,7 @@
 				controls.movementSpeed = 1000;
 				controls.lookSpeed = 0.1;
 
-				data = generateHeight( worldWidth, worldDepth );
+				var data = generateHeight( worldWidth, worldDepth );
 
 				camera.position.y = data[ worldHalfWidth + worldHalfDepth * worldWidth ] * 10 + 500;
 

examples/webgl_geometry_terrain_fog.html

@@ -79,7 +79,7 @@
 				scene = new THREE.Scene();
 				scene.fog = new THREE.FogExp2( 0xefd1b5, 0.0025 );
 
-				data = generateHeight( worldWidth, worldDepth );
+				var data = generateHeight( worldWidth, worldDepth );
 
 				camera.position.y = data[ worldHalfWidth + worldHalfDepth * worldWidth ] * 10 + 500;
 

examples/webgl_geometry_terrain_raycast.html

@@ -82,7 +82,7 @@
 				controls.target.set( 0.0, 100.0, 0.0 );
 				controls.userPanSpeed = 100;
 
-				data = generateHeight( worldWidth, worldDepth );
+				var data = generateHeight( worldWidth, worldDepth );
 
 				controls.target.y = data[ worldHalfWidth + worldHalfDepth * worldWidth ] + 500;
 				camera.position.y =  controls.target.y + 2000;

examples/webgl_gpgpu_birds.html

@@ -582,7 +582,7 @@
 
 				});
 
-				birdMesh = new THREE.Mesh( geometry, material );
+				var birdMesh = new THREE.Mesh( geometry, material );
 				birdMesh.rotation.y = Math.PI / 2;
 				birdMesh.matrixAutoUpdate = false;
 				birdMesh.updateMatrix();

examples/webgl_gpu_particle_system.html

@@ -48,6 +48,8 @@
 			controls, container, gui = new dat.GUI( { width: 350 } ),
 			options, spawnerOptions, particleSystem;
 
+		var stats;
+
 		init();
 		animate();
 
@@ -148,6 +150,7 @@
 			controls.update();
 
 			var delta = clock.getDelta() * spawnerOptions.timeScale;
+
 			tick += delta;
 
 			if ( tick < 0 ) tick = 0;
@@ -172,6 +175,7 @@
 			particleSystem.update( tick );
 
 			render();
+
 			stats.update();
 
 		}

examples/webgl_hdr.html

@@ -190,7 +190,7 @@
 
 			function render() {
 
-				delta = clock.getDelta() * 5;
+				var delta = clock.getDelta() * 5;
 
 				if ( materialHDR.uniforms.exposure.value > 0 || materialHDR.uniforms.exposure.value < 1 ) {
 

examples/webgl_interactive_points.html

@@ -95,7 +95,7 @@
 
 			function init() {
 
-				container = document.getElementById( 'container' );
+				var container = document.getElementById( 'container' );
 
 				scene = new THREE.Scene();
 

examples/webgl_interactive_voxelpainter.html

@@ -59,7 +59,7 @@
 
 				// roll-over helpers
 
-				rollOverGeo = new THREE.BoxGeometry( 50, 50, 50 );
+				var rollOverGeo = new THREE.BoxGeometry( 50, 50, 50 );
 				rollOverMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000, opacity: 0.5, transparent: true } );
 				rollOverMesh = new THREE.Mesh( rollOverGeo, rollOverMaterial );
 				scene.add( rollOverMesh );

examples/webgl_lensflares.html

@@ -51,6 +51,7 @@
 			var container, stats;
 
 			var camera, scene, renderer;
+			var controls;
 
 			var clock = new THREE.Clock();
 

examples/webgl_lights_physical.html

@@ -51,7 +51,7 @@
 			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
 			var camera, scene, renderer,
-			bulbLight, bulbMat, ambientLight,
+			bulbLight, bulbMat, hemiLight,
 			object, loader, stats;
 			var ballMat, cubeMat, floorMat;
 

examples/webgl_lights_pointlights2.html

@@ -49,14 +49,13 @@
 
 			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
-			var camera, scene, renderer, controls,
-			particle1, particle2, particle4, particle5, particle6,
-			light1, light2, light3, light4, light5, light6;
-
-			var FAR = 300;
+			var camera, scene, renderer, controls;
+			var light1, light2, light3, light4, light5, light6;
 
 			var clock = new THREE.Clock();
 
+			var stats;
+
 			init();
 			animate();
 
@@ -66,14 +65,14 @@
 
 				// CAMERA
 
-				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, FAR );
+				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 300 );
 				camera.position.set( 0, 15, 150 );
 				camera.lookAt( new THREE.Vector3() );
 
 				// SCENE
 
 				scene = new THREE.Scene();
-				scene.fog = new THREE.Fog( 0x040306, 10, FAR );
+				scene.fog = new THREE.Fog( 0x040306, 10, 300 );
 
 				// CONTROLS
 

examples/webgl_lines_sphere.html

@@ -138,7 +138,7 @@
 
 				var geometry = new THREE.Geometry();
 
-				for ( i = 0; i < 1500; i ++ ) {
+				for ( var i = 0; i < 1500; i ++ ) {
 
 					var vertex1 = new THREE.Vector3();
 					vertex1.x = Math.random() * 2 - 1;
@@ -147,7 +147,7 @@
 					vertex1.normalize();
 					vertex1.multiplyScalar( r );
 
-					vertex2 = vertex1.clone();
+					var vertex2 = vertex1.clone();
 					vertex2.multiplyScalar( Math.random() * 0.09 + 1 );
 
 					geometry.vertices.push( vertex1 );

examples/webgl_loader_ctm_materials.html

@@ -67,8 +67,6 @@
 
 			var textureCube;
 
-			var loader;
-
 			var mouseX = 0, mouseY = 0;
 
 			var windowHalfX = window.innerWidth / 2;
@@ -150,12 +148,11 @@
 
 				// new way via CTMLoader and separate parts
 
-				loaderCTM = new THREE.CTMLoader();
-
 				var position = new THREE.Vector3( -105, -78, -30 );
 				var scale = new THREE.Vector3( 30, 30, 30 );
 
-				loaderCTM.loadParts( "models/ctm/camaro/camaro.js", function( geometries, materials ) {
+				var loader = new THREE.CTMLoader();
+				loader.loadParts( "models/ctm/camaro/camaro.js", function( geometries, materials ) {
 
 					hackMaterials( materials );
 

examples/webgl_loader_gltf.html

@@ -450,7 +450,7 @@
 				var i, len = sceneList.length;
 
 				for (i = 0; i < len; i++) {
-					option = document.createElement("option");
+					var option = document.createElement("option");
 					option.text=sceneList[i].name;
 					elt.add(option);
 				}
@@ -502,14 +502,14 @@
 					elt.removeChild(elt.lastChild);
 				}
 
-				option = document.createElement("option");
+				var option = document.createElement("option");
 				option.text="[default]";
 				elt.add(option);
 
 				var i, len = cameraNames.length;
 
 				for (i = 0; i < len; i++) {
-					option = document.createElement("option");
+					var option = document.createElement("option");
 					option.text=cameraNames[i];
 					elt.add(option);
 				}

examples/webgl_loader_gltf2.html

@@ -442,7 +442,7 @@
 				var i, len = sceneList.length;
 
 				for (i = 0; i < len; i++) {
-					option = document.createElement("option");
+					var option = document.createElement("option");
 					option.text=sceneList[i].name;
 					elt.add(option);
 				}
@@ -494,14 +494,14 @@
 					elt.removeChild(elt.lastChild);
 				}
 
-				option = document.createElement("option");
+				var option = document.createElement("option");
 				option.text="[default]";
 				elt.add(option);
 
 				var i, len = cameraNames.length;
 
 				for (i = 0; i < len; i++) {
-					option = document.createElement("option");
+					var option = document.createElement("option");
 					option.text=cameraNames[i];
 					elt.add(option);
 				}

examples/webgl_loader_json_blender.html

@@ -77,7 +77,7 @@
 
 					for ( var i = 0; i < 729; i ++ ) {
 
-						mesh = new THREE.Mesh( geometry, materials );
+						var mesh = new THREE.Mesh( geometry, materials );
 
 						// random placement in a grid
 

examples/webgl_loader_md2.html

@@ -68,6 +68,8 @@
 
 			var clock = new THREE.Clock();
 
+			var stats;
+
 			init();
 			animate();
 

examples/webgl_loader_md2_control.html

@@ -54,7 +54,8 @@
 			var SCREEN_WIDTH = window.innerWidth;
 			var SCREEN_HEIGHT = window.innerHeight;
 
-			var container, camera, scene, renderer;
+			var container, stats;
+			var camera, scene, renderer;
 
 			var characters = [];
 			var nCharacters = 0;

examples/webgl_loader_mmd_pose.html

@@ -53,17 +53,10 @@
 			var container, stats;
 
 			var camera, scene, renderer, effect;
-			var helper;
+			var mesh, helper;
 
 			var vpds = [];
 
-			var ready = false;
-
-			var mouseX = 0, mouseY = 0;
-
-			var windowHalfX = window.innerWidth / 2;
-			var windowHalfY = window.innerHeight / 2;
-
 			var clock = new THREE.Clock();
 
 			init();
@@ -132,12 +125,12 @@
 				loader.loadModel( modelFile, function ( object ) {
 
 					mesh = object;
-
 					mesh.position.y = -10;
 
 					scene.add( mesh );
 
 					var vpdIndex = 0;
+
 					function loadVpd () {
 
 						var vpdFile = vpdFiles[ vpdIndex ];
@@ -154,8 +147,7 @@
 
 							} else {
 
-								initGui( mesh, vpds );
-								ready = true;
+								initGui();
 
 							}
 
@@ -166,8 +158,6 @@
 
 				}, onProgress, onError );
 
-				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
-
 				//
 
 				window.addEventListener( 'resize', onWindowResize, false );
@@ -283,14 +273,10 @@
 
 				}
 
-
 			}
 
 			function onWindowResize() {
 
-				windowHalfX = window.innerWidth / 2;
-				windowHalfY = window.innerHeight / 2;
-
 				camera.aspect = window.innerWidth / window.innerHeight;
 				camera.updateProjectionMatrix();
 
@@ -298,13 +284,6 @@
 
 			}
 
-			function onDocumentMouseMove( event ) {
-
-				mouseX = ( event.clientX - windowHalfX ) / 2;
-				mouseY = ( event.clientY - windowHalfY ) / 2;
-
-			}
-
 			//
 
 			function animate() {
@@ -315,12 +294,7 @@
 			}
 
 			function render() {
-/*
-				camera.position.x += ( - mouseX - camera.position.x ) * .05;
-				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
-				camera.lookAt( scene.position );
-*/
 				effect.render( scene, camera );
 
 			}

examples/webgl_loader_msgpack.html

@@ -131,16 +131,17 @@ https://github.com/creationix/msgpack-js-browser
 				container.appendChild( renderer.domElement );
 
 				var aspect = container.offsetWidth / container.offsetHeight;
+
 				camera = new THREE.PerspectiveCamera( 60, aspect, 0.01, 50 );
-				orbit = new THREE.OrbitControls( camera, container );
+				camera.position.set( 5, 5, 5 );
+				camera.updateProjectionMatrix();
+
+				var orbit = new THREE.OrbitControls( camera, container );
 				orbit.addEventListener( 'change', render );
-				camera.position.z = 5;
-				camera.position.x = 5;
-				camera.position.y = 5;
+
 				var target = new THREE.Vector3( 0, 1, 0 );
 				camera.lookAt( target );
 				orbit.target = target;
-				camera.updateProjectionMatrix();
 
 				window.addEventListener( 'resize', onWindowResize, false );
 

examples/webgl_loader_pdb.html

@@ -74,7 +74,7 @@
 
 		<script>
 
-			var camera, scene, renderer, labelsRenderer;
+			var camera, scene, renderer, labelRenderer;
 			var controls;
 
 			var root;

examples/webgl_loader_sea3d_sound.html

@@ -146,7 +146,7 @@
 
 				lightOutside = loader.getLight("Light1");
 
-				soundOutside = loader.getSound3D("Point001");
+				var soundOutside = loader.getSound3D("Point001");
 				soundOutsideAnalyser = new THREE.AudioAnalyser( soundOutside, 32 );
 
 				// sound asset 2 + area

examples/webgl_marchingcubes.html

@@ -183,7 +183,7 @@
 			renderer.autoClear = false;
 
 			var renderTargetParameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat, stencilBuffer: false };
-			renderTarget = new THREE.WebGLRenderTarget( SCREEN_WIDTH, SCREEN_HEIGHT, renderTargetParameters );
+			var renderTarget = new THREE.WebGLRenderTarget( SCREEN_WIDTH, SCREEN_HEIGHT, renderTargetParameters );
 
 			effectFXAA = new THREE.ShaderPass( THREE.FXAAShader );
 
@@ -199,8 +199,6 @@
 
 			effectFXAA.uniforms[ 'resolution' ].value.set( 1 / SCREEN_WIDTH, 1 / SCREEN_HEIGHT );
 
-			composer = new THREE.EffectComposer( renderer, renderTarget );
-
 			var renderModel = new THREE.RenderPass( scene, camera );
 
 			vblur.renderToScreen = true;
@@ -595,7 +593,7 @@
 
 				} else if ( current_material === "hatching2" ) {
 
-					u = effect.material.uniforms;
+					var u = effect.material.uniforms;
 
 					u.uLineColor1.value.setHSL( effectController.hue, effectController.saturation, effectController.lightness );
 					u.uLineColor2.value.setHSL( effectController.hue, effectController.saturation, effectController.lightness );

examples/webgl_materials_bumpmap.html

@@ -176,12 +176,9 @@
 
 			function onWindowResize( event ) {
 
-				SCREEN_WIDTH = window.innerWidth;
-				SCREEN_HEIGHT = window.innerHeight;
-
-				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
+				camera.aspect = window.innerWidth / window.innerHeight;
 				camera.updateProjectionMatrix();
 
 			}

examples/webgl_materials_bumpmap_skin.html

@@ -249,15 +249,11 @@
 
 			function onWindowResize( event ) {
 
-				SCREEN_WIDTH = window.innerWidth;
-				SCREEN_HEIGHT = window.innerHeight;
-
-				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
+				camera.aspect = window.innerWidth / window.innerHeight;
 				camera.updateProjectionMatrix();
 
-
 			}
 
 			function onDocumentMouseMove( event ) {

examples/webgl_materials_channels.html

@@ -209,7 +209,7 @@
 				var loader = new THREE.OBJLoader();
 				loader.load( "models/obj/ninja/ninjaHead_Low.obj", function ( group ) {
 
-					geometry = group.children[ 0 ].geometry;
+					var geometry = group.children[ 0 ].geometry;
 					geometry.attributes.uv2 = geometry.attributes.uv;
 					geometry.center();
 

examples/webgl_materials_cubemap_dynamic.html

@@ -120,7 +120,8 @@
 
 			var gallardo, veyron, currentCar;
 
-			var effectDirt, hblur, vblur, effectBloom, effectKeep, effectBlend, effectFXAA;
+			var composer, effectSave, effectBlend, effectFXAA, effectBloom;
+			var hblur, vblur;
 
 			var config = {
 				"veyron"	: { r: 0.5,	 model: null, backCam: new THREE.Vector3( 550, 100, -1000 ) },

examples/webgl_materials_displacementmap.html

@@ -225,7 +225,7 @@
 				var loader = new THREE.OBJLoader();
 				loader.load( "models/obj/ninja/ninjaHead_Low.obj", function ( group ) {
 
-					geometry = group.children[ 0 ].geometry;
+					var geometry = group.children[ 0 ].geometry;
 					geometry.attributes.uv2 = geometry.attributes.uv;
 					geometry.center();
 

examples/webgl_materials_lightmap.html

@@ -88,7 +88,7 @@
 
 				// CONTROLS
 
-				controls = new THREE.OrbitControls( camera );
+				var controls = new THREE.OrbitControls( camera );
 				controls.maxPolarAngle = 0.9 * Math.PI / 2;
 				controls.enableZoom = false;
 

examples/webgl_materials_normalmap.html

@@ -199,20 +199,20 @@
 
 			function onWindowResize( event ) {
 
-				SCREEN_WIDTH = window.innerWidth;
-				SCREEN_HEIGHT = window.innerHeight;
+				var width = window.innerWidth;
+				var height = window.innerHeight;
 
-				camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
+				camera.aspect = width / height;
 				camera.updateProjectionMatrix();
 
-				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
-				composer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
+				renderer.setSize( width, height );
+				composer.setSize( width, height );
 
-				effectFXAA.uniforms[ 'resolution' ].value.set( 1 / SCREEN_WIDTH, 1 / SCREEN_HEIGHT );
+				effectFXAA.uniforms[ 'resolution' ].value.set( 1 / width, 1 / height );
 
 			}
 
-			function onDocumentMouseMove(event) {
+			function onDocumentMouseMove( event ) {
 
 				mouseX = ( event.clientX - windowHalfX );
 				mouseY = ( event.clientY - windowHalfY );

examples/webgl_materials_skin.html

@@ -142,7 +142,7 @@
 				var parameters = { fragmentShader: shader.fragmentShader, vertexShader: shader.vertexShader, uniforms: uniforms, lights: true };
 				var parametersUV = { fragmentShader: shader.fragmentShader, vertexShader: shader.vertexShaderUV, uniforms: uniformsUV, lights: true };
 
-				material = new THREE.ShaderMaterial( parameters );
+				var material = new THREE.ShaderMaterial( parameters );
 				material.extensions.derivatives = true;
 
 				var materialUV = new THREE.ShaderMaterial( parametersUV );
@@ -151,7 +151,11 @@
 				// LOADER
 
 				loader = new THREE.JSONLoader();
-				loader.load(  "obj/leeperrysmith/LeePerrySmith.js", function( geometry ) { createScene( geometry, 100, material ) } );
+				loader.load(  "obj/leeperrysmith/LeePerrySmith.js", function( geometry ) {
+
+					createScene( geometry, 100, material );
+
+				} );
 
 				// RENDERER
 
@@ -206,10 +210,10 @@
 
 				//
 
-				composerScene = new THREE.EffectComposer( renderer, new THREE.WebGLRenderTarget( rtwidth, rtheight, pars ) );
-				composerScene.addPass( renderModelUV );
+				composer = new THREE.EffectComposer( renderer, new THREE.WebGLRenderTarget( rtwidth, rtheight, pars ) );
+				composer.addPass( renderModelUV );
 
-				renderScene = new THREE.TexturePass( composerScene.renderTarget2.texture );
+				var renderScene = new THREE.TexturePass( composer.renderTarget2.texture );
 
 				//
 
@@ -236,7 +240,7 @@
 
 				//
 
-				uniforms[ "tBlur1" ].value = composerScene.renderTarget2.texture;
+				uniforms[ "tBlur1" ].value = composer.renderTarget2.texture;
 				uniforms[ "tBlur2" ].value = composerUV1.renderTarget2.texture;
 				uniforms[ "tBlur3" ].value = composerUV2.renderTarget2.texture;
 				uniforms[ "tBlur4" ].value = composerUV3.renderTarget2.texture;
@@ -310,7 +314,7 @@
 
 				}
 
-				composerScene.render();
+				composer.render();
 
 				composerUV1.render();
 				composerUV2.render();

examples/webgl_materials_standard.html

@@ -126,7 +126,7 @@
 					material.metalness = 1;
 
 					material.map = loader.load( path + 'Cerberus_A.jpg' );
-					// roughness is in G channel, metalness is in B channel 
+					// roughness is in G channel, metalness is in B channel
 					material.metalnessMap = material.roughnessMap = loader.load( path + 'Cerberus_RM.jpg' );
 					material.normalMap = loader.load( path + 'Cerberus_N.jpg' );
 
@@ -168,7 +168,7 @@
 					var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker( pmremGenerator.cubeLods );
 					pmremCubeUVPacker.update( renderer );
 
-					hdrCubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;
+					var hdrCubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;
 
 					material.envMap = hdrCubeRenderTarget.texture;
 					material.needsUpdate = true;
@@ -192,12 +192,9 @@
 
 			function onWindowResize( event ) {
 
-				SCREEN_WIDTH = window.innerWidth;
-				SCREEN_HEIGHT = window.innerHeight;
-
-				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
+				camera.aspect = window.innerWidth / window.innerHeight;
 				camera.updateProjectionMatrix();
 
 			}

examples/webgl_materials_texture_canvas.html

@@ -46,14 +46,13 @@
 		<script src="../build/three.js"></script>
 
 		<script src="js/Detector.js"></script>
-		<script src="js/libs/stats.min.js"></script>
 
 		<script>
 
 			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
 			var camera, scene, renderer, mesh, material;
-			var drawStartPos = { x: 0, y: 0 };
+			var drawStartPos = new THREE.Vector2();
 
 			init();
 			setupCanvasDrawing();
@@ -62,15 +61,13 @@
 			function init() {
 
 				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 2000 );
-				camera.position.z = 400;
+				camera.position.z = 500;
 
 				scene = new THREE.Scene();
 
-				geometry = new THREE.BoxGeometry( 200, 200, 200 );
-
 				material = new THREE.MeshBasicMaterial();
 
-				mesh = new THREE.Mesh( geometry, material );
+				mesh = new THREE.Mesh( new THREE.BoxGeometry( 200, 200, 200 ), material );
 				scene.add( mesh );
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
@@ -78,13 +75,10 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
 
-				stats = new Stats();
-				document.body.appendChild( stats.dom );
-
 				window.addEventListener( 'resize', onWindowResize, false );
 
 			}
-			
+
 			// Sets up the drawing canvas and adds it as the material map.
 			function setupCanvasDrawing() {
 				// get canvas and context
@@ -106,7 +100,7 @@
 				// add canvas event listeners
 				drawingCanvas.addEventListener( 'mousedown', function( e ) {
 					paint = true;
-					drawStartPos = { x: e.offsetX, y: e.offsetY };
+					drawStartPos.set( e.offsetX, e.offsetY );
 				} );
 
 				drawingCanvas.addEventListener( 'mousemove', function( e ) {
@@ -118,7 +112,7 @@
 				drawingCanvas.addEventListener( 'mouseup', function( e ) {
 					paint = false;
 				} );
-				
+
 				drawingCanvas.addEventListener( 'mouseleave', function( e ) {
 					paint = false;
 				} );
@@ -132,7 +126,7 @@
 				drawContext.lineTo( x, y );
 				drawContext.stroke();
 				// reset drawing start position to current position.
-				drawStartPos = { x: x, y: y };
+				drawStartPos.set( x, y );
 				// need to flag the map as needing updating.
 				material.map.needsUpdate = true;
 
@@ -155,7 +149,6 @@
 				mesh.rotation.y += 0.01;
 
 				renderer.render( scene, camera );
-				stats.update();
 
 			}
 

examples/webgl_materials_texture_compressed.html

@@ -37,7 +37,6 @@
 		<script src="js/loaders/DDSLoader.js"></script>
 
 		<script src="js/Detector.js"></script>
-		<script src="js/libs/stats.min.js"></script>
 
 		<script>
 
@@ -56,7 +55,7 @@
 
 				scene = new THREE.Scene();
 
-				geometry = new THREE.BoxGeometry( 200, 200, 200 );
+				var geometry = new THREE.BoxGeometry( 200, 200, 200 );
 
 				/*
 				This is how compressed textures are supposed to be used:
@@ -143,13 +142,13 @@
 				scene.add( mesh );
 				meshes.push( mesh );
 
-				mesh = new THREE.Mesh( new THREE.BoxGeometry( 200, 200, 200 ), material5 );
+				mesh = new THREE.Mesh( geometry, material5 );
 				mesh.position.x = 200;
 				mesh.position.y = 200;
 				scene.add( mesh );
 				meshes.push( mesh );
 
-				mesh = new THREE.Mesh( new THREE.BoxGeometry( 200, 200, 200 ), material6 );
+				mesh = new THREE.Mesh( geometry, material6 );
 				mesh.position.x = 200;
 				mesh.position.y = -200;
 				scene.add( mesh );
@@ -173,9 +172,6 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
 
-				stats = new Stats();
-				document.body.appendChild( stats.dom );
-
 				window.addEventListener( 'resize', onWindowResize, false );
 
 			}
@@ -204,7 +200,6 @@
 				}
 
 				renderer.render( scene, camera );
-				stats.update();
 
 			}
 

examples/webgl_materials_texture_hdr.html

@@ -204,7 +204,7 @@
 
 			function render() {
 
-				delta = clock.getDelta() * 5;
+				var delta = clock.getDelta() * 5;
 
 				if ( materialHDR.uniforms.exposure.value > 0 || materialHDR.uniforms.exposure.value < 1 ) {
 

examples/webgl_materials_texture_manualmipmap.html

@@ -137,8 +137,8 @@
 				textureCanvas2.magFilter = THREE.NearestFilter;
 				textureCanvas2.minFilter = THREE.NearestMipMapNearestFilter;
 
-				materialCanvas1 = new THREE.MeshBasicMaterial( { map: textureCanvas1 } );
-				materialCanvas2 = new THREE.MeshBasicMaterial( { color: 0xffccaa, map: textureCanvas2 } );
+				var materialCanvas1 = new THREE.MeshBasicMaterial( { map: textureCanvas1 } );
+				var materialCanvas2 = new THREE.MeshBasicMaterial( { color: 0xffccaa, map: textureCanvas2 } );
 
 				var geometry = new THREE.PlaneBufferGeometry( 100, 100 );
 

examples/webgl_materials_texture_pvrtc.html

@@ -36,7 +36,6 @@
 		<script src="js/loaders/PVRLoader.js"></script>
 
 		<script src="js/Detector.js"></script>
-		<script src="js/libs/stats.min.js"></script>
 
 		<script>
 
@@ -55,29 +54,23 @@
 
 				scene = new THREE.Scene();
 
-				geometry = new THREE.BoxGeometry( 200, 200, 200 );
+				var geometry = new THREE.BoxGeometry( 200, 200, 200 );
 
+				//
 
-
-
-
-				/*
-
-				*/
-
-    			var onCube1Loaded = function(texture){
+					var onCube1Loaded = function(texture){
 					texture.magFilter = THREE.LinearFilter;
 					texture.minFilter = THREE.LinearFilter;
 					texture.mapping = THREE.CubeReflectionMapping;
 					material6.needsUpdate = true;
-    			};
-    			var onCube2Loaded = function(texture){
+					};
+					var onCube2Loaded = function(texture){
 					texture.magFilter = THREE.LinearFilter;
 					// texture.minFilter = THREE.LinearMipMapNearestFilter;
 					texture.minFilter = THREE.LinearFilter;
 					texture.mapping = THREE.CubeReflectionMapping;
 					material8.needsUpdate = true;
-    			};
+					};
 
 
 				var loader = new THREE.PVRLoader();
@@ -171,9 +164,6 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
 
-				stats = new Stats();
-				document.body.appendChild( stats.dom );
-
 				window.addEventListener( 'resize', onWindowResize, false );
 
 			}
@@ -202,7 +192,6 @@
 				}
 
 				renderer.render( scene, camera );
-				stats.update();
 
 			}
 

examples/webgl_materials_video.html

@@ -250,7 +250,7 @@
 
 				camera.lookAt( scene.position );
 
-				for ( i = 0; i < cube_count; i ++ ) {
+				for ( var i = 0; i < cube_count; i ++ ) {
 
 					material = materials[ i ];
 
@@ -261,7 +261,7 @@
 
 				if ( counter % 1000 > 200 ) {
 
-					for ( i = 0; i < cube_count; i ++ ) {
+					for ( var i = 0; i < cube_count; i ++ ) {
 
 						mesh = meshes[ i ];
 
@@ -278,7 +278,7 @@
 
 				if ( counter % 1000 === 0 ) {
 
-					for ( i = 0; i < cube_count; i ++ ) {
+					for ( var i = 0; i < cube_count; i ++ ) {
 
 						mesh = meshes[ i ];
 

examples/webgl_modifier_simplifier.html

@@ -102,7 +102,7 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				info = document.createElement( 'div' );
+				var info = document.createElement( 'div' );
 				info.style.position = 'absolute';
 				info.style.top = '10px';
 				info.style.width = '100%';

examples/webgl_morphtargets_human.html

@@ -53,22 +53,13 @@
 
 			var container;
 
-			var camera, scene;
-			var renderer;
-
-			var mesh;
-
-			var mouseX = 0, mouseY = 0;
-
-			var windowHalfX = window.innerWidth / 2;
-			var windowHalfY = window.innerHeight / 2;
+			var camera, scene, renderer;
+			var character, controls;
 
 			var clock = new THREE.Clock();
 
 			var gui, skinConfig, morphConfig;
 
-			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
-
 			init();
 			animate();
 
@@ -207,9 +198,6 @@
 
 			function onWindowResize() {
 
-				windowHalfX = window.innerWidth / 2;
-				windowHalfY = window.innerHeight / 2;
-
 				camera.aspect = window.innerWidth / window.innerHeight;
 				camera.updateProjectionMatrix();
 
@@ -217,13 +205,6 @@
 
 			}
 
-			function onDocumentMouseMove( event ) {
-
-				mouseX = ( event.clientX - windowHalfX ) * 10;
-				mouseY = ( event.clientY - windowHalfY ) * 10;
-
-			}
-
 			//
 
 			function animate() {

examples/webgl_multiple_views.html

@@ -111,14 +111,11 @@
 				for (var ii =  0; ii < views.length; ++ii ) {
 
 					var view = views[ii];
-					camera = new THREE.PerspectiveCamera( view.fov, window.innerWidth / window.innerHeight, 1, 10000 );
-					camera.position.x = view.eye[ 0 ];
-					camera.position.y = view.eye[ 1 ];
-					camera.position.z = view.eye[ 2 ];
-					camera.up.x = view.up[ 0 ];
-					camera.up.y = view.up[ 1 ];
-					camera.up.z = view.up[ 2 ];
+					var camera = new THREE.PerspectiveCamera( view.fov, window.innerWidth / window.innerHeight, 1, 10000 );
+					camera.position.fromArray( view.eye );
+					camera.up.fromArray( view.up );
 					view.camera = camera;
+
 				}
 
 				scene = new THREE.Scene();
@@ -273,8 +270,8 @@
 
 				for ( var ii = 0; ii < views.length; ++ii ) {
 
-					view = views[ii];
-					camera = view.camera;
+					var view = views[ii];
+					var camera = view.camera;
 
 					view.updateCamera( camera, scene, mouseX, mouseY );
 
@@ -291,6 +288,7 @@
 					camera.updateProjectionMatrix();
 
 					renderer.render( scene, camera );
+
 				}
 
 			}

examples/webgl_nearestneighbour.html

@@ -125,7 +125,7 @@
 				imagePreviewTexture.minFilter = THREE.LinearMipMapLinearFilter;
 				imagePreviewTexture.magFilter = THREE.LinearFilter;
 
-				pointShaderMaterial = new THREE.ShaderMaterial( {
+				var pointShaderMaterial = new THREE.ShaderMaterial( {
 					uniforms: {
 						tex1: { value: imagePreviewTexture },
 						zoom: { value: 9.0 }
@@ -208,7 +208,7 @@
 				_projScreenMatrix.multiplyMatrices( camera.projectionMatrix, camera.matrixWorldInverse );
 				_frustum.setFromMatrix( _projScreenMatrix );
 
-				for ( i = 0, il = imagePositionsInRange.length; i < il; i ++ ) {
+				for ( var i = 0, il = imagePositionsInRange.length; i < il; i ++ ) {
 					var object = imagePositionsInRange[i];
 					var objectPoint = new THREE.Vector3().fromArray( object[ 0 ].obj );
 

examples/webgl_physics_cloth.html

@@ -1,467 +1,461 @@
 <html lang="en">
-    <head>
-        <title>Ammo.js softbody cloth 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;
+	<head>
+		<title>Ammo.js softbody cloth 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;
+			}
 
-                background-color: #bfd1e5;
-                margin: 0px;
-                overflow: hidden;
-            }
+			#info {
+				position: absolute;
+				top: 0px; width: 100%;
+				padding: 5px;
+			}
 
-            #info {
-                position: absolute;
-                top: 0px; width: 100%;
-                padding: 5px;
-            }
+			a {
+				color: #a06851;
+			}
+		</style>
+	</head>
+	<body>
+		<div id="info">Ammo.js physics soft body cloth demo<br>Press Q or A to move the arm.</div>
+		<div id="container"><br /><br /><br /><br /><br />Loading...</div>
+
+		<script src="../build/three.js"></script>
+		<script src="js/libs/ammo.js"></script>
+		<script src="js/controls/OrbitControls.js"></script>
+		<script src="js/Detector.js"></script>
+		<script src="js/libs/stats.min.js"></script>
+
+		<script>
+
+			// Detects webgl
+			if ( ! Detector.webgl ) {
+					Detector.addGetWebGLMessage();
+					document.getElementById( 'container' ).innerHTML = "";
+			}
 
-            a {
+			// - Global variables -
 
-                color: #a06851;
-            }
+			// Graphics variables
+			var container, stats;
+			var camera, controls, scene, renderer;
+			var textureLoader;
+			var clock = new THREE.Clock();
 
-        </style>
-    </head>
-    <body>
-	<div id="info">Ammo.js physics soft body cloth demo<br>Press Q or A to move the arm.</div>
-        <div id="container"><br /><br /><br /><br /><br />Loading...</div>
+			// Physics variables
+			var gravityConstant = -9.8;
+			var physicsWorld;
+			var rigidBodies = [];
+			var margin = 0.05;
+			var hinge;
+			var cloth;
+			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/Detector.js"></script>
-	<script src="js/libs/stats.min.js"></script>
+			var time = 0;
+			var armMovement = 0;
 
-        <script>
+			// - Main code -
 
-		// Detects webgl
-		if ( ! Detector.webgl ) {
-		    Detector.addGetWebGLMessage();
-		    document.getElementById( 'container' ).innerHTML = "";
-		}
+			init();
+			animate();
 
-		// - Global variables -
 
-		// Graphics variables
-		var container, stats;
-		var camera, controls, scene, renderer;
-		var textureLoader;
-		var clock = new THREE.Clock();
+			// - Functions -
 
-		// Physics variables
-		var gravityConstant = -9.8;
-		var collisionConfiguration;
-		var dispatcher;
-		var broadphase;
-		var solver;
-		var physicsWorld;
-		var rigidBodies = [];
-		var margin = 0.05;
-		var hinge;
-		var cloth;
-		var transformAux1 = new Ammo.btTransform();
+			function init() {
 
-		var time = 0;
-		var armMovement = 0;
+				initGraphics();
 
-		// - Main code -
+				initPhysics();
 
-		init();
-		animate();
+				createObjects();
 
+				initInput();
 
-		// - Functions -
+			}
 
-		function init() {
+			function initGraphics() {
 
-			initGraphics();
+				container = document.getElementById( 'container' );
 
-			initPhysics();
+				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.2, 2000 );
 
-			createObjects();
+				scene = new THREE.Scene();
 
-			initInput();
+				camera.position.x = -12;
+				camera.position.y = 7;
+				camera.position.z =  4;
 
-		}
+				controls = new THREE.OrbitControls( camera );
+				controls.target.y = 2;
 
-		function initGraphics() {
+				renderer = new THREE.WebGLRenderer();
+						renderer.setClearColor( 0xbfd1e5 );
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.shadowMap.enabled = true;
 
-			container = document.getElementById( 'container' );
+				textureLoader = new THREE.TextureLoader();
 
-			camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.2, 2000 );
+				var ambientLight = new THREE.AmbientLight( 0x404040 );
+				scene.add( ambientLight );
 
-			scene = new THREE.Scene();
+				var light = new THREE.DirectionalLight( 0xffffff, 1 );
+				light.position.set( -7, 10, 15 );
+				light.castShadow = true;
+				var d = 10;
+				light.shadow.camera.left = -d;
+				light.shadow.camera.right = d;
+				light.shadow.camera.top = d;
+				light.shadow.camera.bottom = -d;
 
-			camera.position.x = -12;
-			camera.position.y = 7;
-			camera.position.z =  4;
+				light.shadow.camera.near = 2;
+				light.shadow.camera.far = 50;
 
-			controls = new THREE.OrbitControls( camera );
-			controls.target.y = 2;
+				light.shadow.mapSize.x = 1024;
+				light.shadow.mapSize.y = 1024;
 
-			renderer = new THREE.WebGLRenderer();
-					renderer.setClearColor( 0xbfd1e5 );
-			renderer.setPixelRatio( window.devicePixelRatio );
-			renderer.setSize( window.innerWidth, window.innerHeight );
-			renderer.shadowMap.enabled = true;
+				light.shadow.bias = -0.003;
+				scene.add( light );
 
-			textureLoader = new THREE.TextureLoader();
 
-			var ambientLight = new THREE.AmbientLight( 0x404040 );
-			scene.add( ambientLight );
+				container.innerHTML = "";
 
-			var light = new THREE.DirectionalLight( 0xffffff, 1 );
-			light.position.set( -7, 10, 15 );
-			light.castShadow = true;
-			var d = 10;
-			light.shadow.camera.left = -d;
-			light.shadow.camera.right = d;
-			light.shadow.camera.top = d;
-			light.shadow.camera.bottom = -d;
+				container.appendChild( renderer.domElement );
 
-			light.shadow.camera.near = 2;
-			light.shadow.camera.far = 50;
+				stats = new Stats();
+				stats.domElement.style.position = 'absolute';
+				stats.domElement.style.top = '0px';
+				container.appendChild( stats.domElement );
 
-			light.shadow.mapSize.x = 1024;
-			light.shadow.mapSize.y = 1024;
+				window.addEventListener( 'resize', onWindowResize, false );
 
-			light.shadow.bias = -0.003;
-			scene.add( light );
+			}
 
+			function initPhysics() {
 
-			container.innerHTML = "";
+				// Physics configuration
 
-			container.appendChild( renderer.domElement );
+				var collisionConfiguration = new Ammo.btSoftBodyRigidBodyCollisionConfiguration();
+				var dispatcher = new Ammo.btCollisionDispatcher( collisionConfiguration );
+				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.setGravity( new Ammo.btVector3( 0, gravityConstant, 0 ) );
+				physicsWorld.getWorldInfo().set_m_gravity( new Ammo.btVector3( 0, gravityConstant, 0 ) );
 
-			stats = new Stats();
-			stats.domElement.style.position = 'absolute';
-			stats.domElement.style.top = '0px';
-			container.appendChild( stats.domElement );
+			}
 
-			window.addEventListener( 'resize', onWindowResize, false );
+			function createObjects() {
+
+				var pos = new THREE.Vector3();
+				var quat = new THREE.Quaternion();
+
+				// Ground
+				pos.set( 0, - 0.5, 0 );
+				quat.set( 0, 0, 0, 1 );
+				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 ) {
+					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;
+				var brickLength = 1.2;
+				var brickDepth = 0.6;
+				var brickHeight = brickLength * 0.5;
+				var numBricksLength = 6;
+				var numBricksHeight = 8;
+				var z0 = - numBricksLength * brickLength * 0.5;
+				pos.set( 0, brickHeight * 0.5, z0 );
+				quat.set( 0, 0, 0, 1 );
+				for ( var j = 0; j < numBricksHeight; j ++ ) {
+
+					var oddRow = ( j % 2 ) == 1;
+
+					pos.z = z0;
+
+					if ( oddRow ) {
+						pos.z -= 0.25 * brickLength;
+					}
 
-		}
+					var nRow = oddRow? numBricksLength + 1 : numBricksLength;
+					for ( var i = 0; i < nRow; i ++ ) {
 
-		function initPhysics() {
+						var brickLengthCurrent = brickLength;
+						var brickMassCurrent = brickMass;
+						if ( oddRow && ( i == 0 || i == nRow - 1 ) ) {
+							brickLengthCurrent *= 0.5;
+							brickMassCurrent *= 0.5;
+						}
 
-			// Physics configuration
+						var brick = createParalellepiped( brickDepth, brickHeight, brickLengthCurrent, brickMassCurrent, pos, quat, createMaterial() );
+						brick.castShadow = true;
+						brick.receiveShadow = true;
 
-			collisionConfiguration = new Ammo.btSoftBodyRigidBodyCollisionConfiguration();
-			dispatcher = new Ammo.btCollisionDispatcher( collisionConfiguration );
-			broadphase = new Ammo.btDbvtBroadphase();
-			solver = new Ammo.btSequentialImpulseConstraintSolver();
-			softBodySolver = new Ammo.btDefaultSoftBodySolver();
-			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 ) );
+						if ( oddRow && ( i == 0 || i == nRow - 2 ) ) {
+							pos.z += 0.75 * brickLength;
+						}
+						else {
+							pos.z += brickLength;
+						}
 
-		}
+					}
+					pos.y += brickHeight;
+				}
 
-		function createObjects() {
+				// The cloth
+				// Cloth graphic object
+				var clothWidth = 4;
+				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 clothGeometry = new THREE.BufferGeometry();
+				var clothGeometry = new THREE.PlaneBufferGeometry( clothWidth, clothHeight, clothNumSegmentsZ, clothNumSegmentsY );
+				clothGeometry.rotateY( Math.PI * 0.5 );
+				clothGeometry.translate( clothPos.x, clothPos.y + clothHeight * 0.5, clothPos.z - clothWidth * 0.5 );
+				//var clothMaterial = new THREE.MeshLambertMaterial( { color: 0x0030A0, side: THREE.DoubleSide } );
+				var clothMaterial = new THREE.MeshLambertMaterial( { color: 0xFFFFFF, side: THREE.DoubleSide } );
+				cloth = new THREE.Mesh( clothGeometry, clothMaterial );
+				cloth.castShadow = true;
+				cloth.receiveShadow = true;
+				scene.add( cloth );
+				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
+				var softBodyHelpers = new Ammo.btSoftBodyHelpers();
+				var clothCorner00 = new Ammo.btVector3( clothPos.x, clothPos.y + clothHeight, clothPos.z );
+				var clothCorner01 = new Ammo.btVector3( clothPos.x, clothPos.y + clothHeight, clothPos.z - clothWidth );
+				var clothCorner10 = new Ammo.btVector3( clothPos.x, clothPos.y, clothPos.z );
+				var clothCorner11 = new Ammo.btVector3( clothPos.x, clothPos.y, clothPos.z - clothWidth );
+				var clothSoftBody = softBodyHelpers.CreatePatch( physicsWorld.getWorldInfo(), clothCorner00, clothCorner01, clothCorner10, clothCorner11, clothNumSegmentsZ + 1, clothNumSegmentsY + 1, 0, true );
+				var sbConfig = clothSoftBody.get_m_cfg();
+				sbConfig.set_viterations( 10 );
+				sbConfig.set_piterations( 10 );
+
+				clothSoftBody.setTotalMass( 0.9, false );
+				Ammo.castObject( clothSoftBody, Ammo.btCollisionObject ).getCollisionShape().setMargin( margin * 3 );
+				physicsWorld.addSoftBody( clothSoftBody, 1, -1 );
+				cloth.userData.physicsBody = clothSoftBody;
+				// Disable deactivation
+				clothSoftBody.setActivationState( 4 );
+
+				// The base
+				var armMass = 2;
+				var armLength = 3 + clothWidth;
+				var pylonHeight = clothPos.y + clothHeight;
+				var baseMaterial = new THREE.MeshPhongMaterial( { color: 0x606060 } );
+				pos.set( clothPos.x, 0.1, clothPos.z - armLength );
+				quat.set( 0, 0, 0, 1 );
+				var base = createParalellepiped( 1, 0.2, 1, 0, pos, quat, baseMaterial );
+				base.castShadow = true;
+				base.receiveShadow = true;
+				pos.set( clothPos.x, 0.5 * pylonHeight, clothPos.z - armLength );
+				var pylon = createParalellepiped( 0.4, pylonHeight, 0.4, 0, pos, quat, baseMaterial );
+				pylon.castShadow = true;
+				pylon.receiveShadow = true;
+				pos.set( clothPos.x, pylonHeight + 0.2, clothPos.z - 0.5 * armLength );
+				var arm = createParalellepiped( 0.4, 0.4, armLength + 0.4, armMass, pos, quat, baseMaterial );
+				arm.castShadow = true;
+				arm.receiveShadow = true;
+
+				// Glue the cloth to the arm
+				var influence = 0.5;
+				clothSoftBody.appendAnchor( 0, arm.userData.physicsBody, false, influence );
+				clothSoftBody.appendAnchor( clothNumSegmentsZ, arm.userData.physicsBody, false, influence );
+
+				// 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 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 );
 
-			var pos = new THREE.Vector3();
-			var quat = new THREE.Quaternion();
+			}
 
-			// Ground
-			pos.set( 0, - 0.5, 0 );
-			quat.set( 0, 0, 0, 1 );
-			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 ) {
-				texture.wrapS = THREE.RepeatWrapping;
-				texture.wrapT = THREE.RepeatWrapping;
-				texture.repeat.set( 40, 40 );
-				ground.material.map = texture;
-				ground.material.needsUpdate = true;
-			} );
+			function createParalellepiped( sx, sy, sz, mass, pos, quat, material ) {
 
-			// Wall
-			var brickMass = 0.5;
-			var brickLength = 1.2;
-			var brickDepth = 0.6;
-			var brickHeight = brickLength * 0.5;
-			var numBricksLength = 6;
-			var numBricksHeight = 8;
-			var z0 = - numBricksLength * brickLength * 0.5;
-			pos.set( 0, brickHeight * 0.5, z0 );
-			quat.set( 0, 0, 0, 1 );
-			for ( var j = 0; j < numBricksHeight; j ++ ) {
+				var threeObject = new THREE.Mesh( new THREE.BoxGeometry( sx, sy, sz, 1, 1, 1 ), material );
+				var shape = new Ammo.btBoxShape( new Ammo.btVector3( sx * 0.5, sy * 0.5, sz * 0.5 ) );
+				shape.setMargin( margin );
 
-				var oddRow = ( j % 2 ) == 1;
+				createRigidBody( threeObject, shape, mass, pos, quat );
 
-				pos.z = z0;
+				return threeObject;
 
-				if ( oddRow ) {
-					pos.z -= 0.25 * brickLength;
-				}
+			}
 
-				var nRow = oddRow? numBricksLength + 1 : numBricksLength;
-				for ( var i = 0; i < nRow; i ++ ) {
+			function createRigidBody( threeObject, physicsShape, mass, pos, quat ) {
 
-					var brickLengthCurrent = brickLength;
-					var brickMassCurrent = brickMass;
-					if ( oddRow && ( i == 0 || i == nRow - 1 ) ) {
-						brickLengthCurrent *= 0.5;
-						brickMassCurrent *= 0.5;
-					}
+				threeObject.position.copy( pos );
+				threeObject.quaternion.copy( quat );
 
-					var brick = createParalellepiped( brickDepth, brickHeight, brickLengthCurrent, brickMassCurrent, pos, quat, createMaterial() );
-					brick.castShadow = true;
-					brick.receiveShadow = true;
+				var transform = new Ammo.btTransform();
+				transform.setIdentity();
+				transform.setOrigin( new Ammo.btVector3( pos.x, pos.y, pos.z ) );
+				transform.setRotation( new Ammo.btQuaternion( quat.x, quat.y, quat.z, quat.w ) );
+				var motionState = new Ammo.btDefaultMotionState( transform );
 
-					if ( oddRow && ( i == 0 || i == nRow - 2 ) ) {
-						pos.z += 0.75 * brickLength;
-					}
-					else {
-						pos.z += brickLength;
-					}
+				var localInertia = new Ammo.btVector3( 0, 0, 0 );
+				physicsShape.calculateLocalInertia( mass, localInertia );
 
-				}
-				pos.y += brickHeight;
-			}
+				var rbInfo = new Ammo.btRigidBodyConstructionInfo( mass, motionState, physicsShape, localInertia );
+				var body = new Ammo.btRigidBody( rbInfo );
 
-			// The cloth
-			// Cloth graphic object
-			var clothWidth = 4;
-			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 clothGeometry = new THREE.BufferGeometry();
-			var clothGeometry = new THREE.PlaneBufferGeometry( clothWidth, clothHeight, clothNumSegmentsZ, clothNumSegmentsY );
-			clothGeometry.rotateY( Math.PI * 0.5 );
-			clothGeometry.translate( clothPos.x, clothPos.y + clothHeight * 0.5, clothPos.z - clothWidth * 0.5 );
-			//var clothMaterial = new THREE.MeshLambertMaterial( { color: 0x0030A0, side: THREE.DoubleSide } );
-			var clothMaterial = new THREE.MeshLambertMaterial( { color: 0xFFFFFF, side: THREE.DoubleSide } );
-			cloth = new THREE.Mesh( clothGeometry, clothMaterial );
-			cloth.castShadow = true;
-			cloth.receiveShadow = true;
-			scene.add( cloth );
-			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
-			var softBodyHelpers = new Ammo.btSoftBodyHelpers();
-			var clothCorner00 = new Ammo.btVector3( clothPos.x, clothPos.y + clothHeight, clothPos.z );
-			var clothCorner01 = new Ammo.btVector3( clothPos.x, clothPos.y + clothHeight, clothPos.z - clothWidth );
-			var clothCorner10 = new Ammo.btVector3( clothPos.x, clothPos.y, clothPos.z );
-			var clothCorner11 = new Ammo.btVector3( clothPos.x, clothPos.y, clothPos.z - clothWidth );
-			var clothSoftBody = softBodyHelpers.CreatePatch( physicsWorld.getWorldInfo(), clothCorner00, clothCorner01, clothCorner10, clothCorner11, clothNumSegmentsZ + 1, clothNumSegmentsY + 1, 0, true );
-			var sbConfig = clothSoftBody.get_m_cfg();
-			sbConfig.set_viterations( 10 );
-			sbConfig.set_piterations( 10 );
-
-			clothSoftBody.setTotalMass( 0.9, false );
-			Ammo.castObject( clothSoftBody, Ammo.btCollisionObject ).getCollisionShape().setMargin( margin * 3 );
-			physicsWorld.addSoftBody( clothSoftBody, 1, -1 );
-			cloth.userData.physicsBody = clothSoftBody;
-			// Disable deactivation
-			clothSoftBody.setActivationState( 4 );
-
-			// The base
-			var armMass = 2;
-			var armLength = 3 + clothWidth;
-			var pylonHeight = clothPos.y + clothHeight;
-			var baseMaterial = new THREE.MeshPhongMaterial( { color: 0x606060 } );
-			pos.set( clothPos.x, 0.1, clothPos.z - armLength );
-			quat.set( 0, 0, 0, 1 );
-			var base = createParalellepiped( 1, 0.2, 1, 0, pos, quat, baseMaterial );
-			base.castShadow = true;
-			base.receiveShadow = true;
-			pos.set( clothPos.x, 0.5 * pylonHeight, clothPos.z - armLength );
-			var pylon = createParalellepiped( 0.4, pylonHeight, 0.4, 0, pos, quat, baseMaterial );
-			pylon.castShadow = true;
-			pylon.receiveShadow = true;
-			pos.set( clothPos.x, pylonHeight + 0.2, clothPos.z - 0.5 * armLength );
-			var arm = createParalellepiped( 0.4, 0.4, armLength + 0.4, armMass, pos, quat, baseMaterial );
-			arm.castShadow = true;
-			arm.receiveShadow = true;
-
-			// Glue the cloth to the arm
-			var influence = 0.5;
-			clothSoftBody.appendAnchor( 0, arm.userData.physicsBody, false, influence );
-			clothSoftBody.appendAnchor( clothNumSegmentsZ, arm.userData.physicsBody, false, influence );
-
-			// 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 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 );
-
-		}
-
-		function createParalellepiped( sx, sy, sz, mass, pos, quat, material ) {
-
-			var threeObject = new THREE.Mesh( new THREE.BoxGeometry( sx, sy, sz, 1, 1, 1 ), material );
-			var shape = new Ammo.btBoxShape( new Ammo.btVector3( sx * 0.5, sy * 0.5, sz * 0.5 ) );
-			shape.setMargin( margin );
-
-			createRigidBody( threeObject, shape, mass, pos, quat );
-
-			return threeObject;
-
-		}
-
-		function createRigidBody( threeObject, physicsShape, mass, pos, quat ) {
-
-			threeObject.position.copy( pos );
-			threeObject.quaternion.copy( quat );
-
-			var transform = new Ammo.btTransform();
-			transform.setIdentity();
-			transform.setOrigin( new Ammo.btVector3( pos.x, pos.y, pos.z ) );
-			transform.setRotation( new Ammo.btQuaternion( quat.x, quat.y, quat.z, quat.w ) );
-			var motionState = new Ammo.btDefaultMotionState( transform );
-
-			var localInertia = new Ammo.btVector3( 0, 0, 0 );
-			physicsShape.calculateLocalInertia( mass, localInertia );
-
-			var rbInfo = new Ammo.btRigidBodyConstructionInfo( mass, motionState, physicsShape, localInertia );
-			var body = new Ammo.btRigidBody( rbInfo );
-
-			threeObject.userData.physicsBody = body;
-
-			scene.add( threeObject );
-
-			if ( mass > 0 ) {
-				rigidBodies.push( threeObject );
+				threeObject.userData.physicsBody = body;
 
-				// Disable deactivation
-				body.setActivationState( 4 );
-			}
+				scene.add( threeObject );
 
-			physicsWorld.addRigidBody( body );
+				if ( mass > 0 ) {
+					rigidBodies.push( threeObject );
 
-		}
+					// Disable deactivation
+					body.setActivationState( 4 );
+				}
 
-		function createRandomColor() {
-			return Math.floor( Math.random() * ( 1 << 24 ) );
-		}
+				physicsWorld.addRigidBody( body );
 
-		function createMaterial() {
-		    return new THREE.MeshPhongMaterial( { color: createRandomColor() } );
-		}
+			}
+
+			function createRandomColor() {
+				return Math.floor( Math.random() * ( 1 << 24 ) );
+			}
+
+			function createMaterial() {
+					return new THREE.MeshPhongMaterial( { color: createRandomColor() } );
+			}
 
-		function initInput() {
+			function initInput() {
 
-		    window.addEventListener( 'keydown', function( event ) {
+					window.addEventListener( 'keydown', function( event ) {
 
-			    switch ( event.keyCode ) {
-				    // Q
-				    case 81:
-					    armMovement = 1;
-				    break;
+						switch ( event.keyCode ) {
+							// Q
+							case 81:
+								armMovement = 1;
+							break;
 
-				    // A
-				    case 65:
-					    armMovement = - 1;
-				    break;
-			    }
+							// A
+							case 65:
+								armMovement = - 1;
+							break;
+						}
 
-		    }, false );
+					}, false );
 
-		    window.addEventListener( 'keyup', function( event ) {
+					window.addEventListener( 'keyup', function( event ) {
 
-			    armMovement = 0;
+						armMovement = 0;
 
-		    }, false );
+					}, false );
 
-		}
+			}
 
-		function onWindowResize() {
+			function onWindowResize() {
 
-			camera.aspect = window.innerWidth / window.innerHeight;
-			camera.updateProjectionMatrix();
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
 
-			renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
-		}
+			}
 
-		function animate() {
+			function animate() {
 
-			requestAnimationFrame( animate );
+				requestAnimationFrame( animate );
 
-			render();
-			stats.update();
+				render();
+				stats.update();
 
-		}
+			}
 
-		function render() {
+			function render() {
 
-			var deltaTime = clock.getDelta();
+				var deltaTime = clock.getDelta();
 
-			updatePhysics( deltaTime );
+				updatePhysics( deltaTime );
 
-			controls.update( deltaTime );
+				controls.update( deltaTime );
 
-			renderer.render( scene, camera );
+				renderer.render( scene, camera );
 
-			time += deltaTime;
+				time += deltaTime;
 
-		}
+			}
 
-		function updatePhysics( deltaTime ) {
+			function updatePhysics( deltaTime ) {
 
-			// Hinge control
-			hinge.enableAngularMotor( true, 0.8 * armMovement, 50 );
+				// Hinge control
+				hinge.enableAngularMotor( true, 0.8 * armMovement, 50 );
 
-			// Step world
-			physicsWorld.stepSimulation( deltaTime, 10 );
+				// Step world
+				physicsWorld.stepSimulation( deltaTime, 10 );
 
-			// Update cloth
-			var softBody = cloth.userData.physicsBody;
-			var clothPositions = cloth.geometry.attributes.position.array;
-			var numVerts = clothPositions.length / 3;
-			var nodes = softBody.get_m_nodes();
-			var indexFloat = 0;
-			for ( var i = 0; i < numVerts; i ++ ) {
+				// Update cloth
+				var softBody = cloth.userData.physicsBody;
+				var clothPositions = cloth.geometry.attributes.position.array;
+				var numVerts = clothPositions.length / 3;
+				var nodes = softBody.get_m_nodes();
+				var indexFloat = 0;
+				for ( var i = 0; i < numVerts; i ++ ) {
 
-				var node = nodes.at( i );
-				var nodePos = node.get_m_x();
-				clothPositions[ indexFloat++ ] = nodePos.x();
-				clothPositions[ indexFloat++ ] = nodePos.y();
-				clothPositions[ indexFloat++ ] = nodePos.z();
+					var node = nodes.at( i );
+					var nodePos = node.get_m_x();
+					clothPositions[ indexFloat++ ] = nodePos.x();
+					clothPositions[ indexFloat++ ] = nodePos.y();
+					clothPositions[ indexFloat++ ] = nodePos.z();
 
-			}
-			cloth.geometry.computeVertexNormals();
-			cloth.geometry.attributes.position.needsUpdate = true;
-			cloth.geometry.attributes.normal.needsUpdate = true;
-
-			// Update rigid bodies
-			for ( var i = 0, il = rigidBodies.length; i < il; i++ ) {
-				var objThree = rigidBodies[ 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() );
+				}
+				cloth.geometry.computeVertexNormals();
+				cloth.geometry.attributes.position.needsUpdate = true;
+				cloth.geometry.attributes.normal.needsUpdate = true;
+
+				// Update rigid bodies
+				for ( var i = 0, il = rigidBodies.length; i < il; i++ ) {
+					var objThree = rigidBodies[ 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_terrain.html

@@ -1,438 +1,438 @@
 <!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;
-            }
+		<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 {
+						a {
 
-                color: #a06851;
-            }
+								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>
+				</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/Detector.js"></script>
-	<script src="js/libs/stats.min.js"></script>
+				<script src="../build/three.js"></script>
+				<script src="js/libs/ammo.js"></script>
+				<script src="js/controls/OrbitControls.js"></script>
+				<script src="js/Detector.js"></script>
+				<script src="js/libs/stats.min.js"></script>
 
-        <script>
+				<script>
 
-		// Detects webgl
-		if ( ! Detector.webgl ) {
-			Detector.addGetWebGLMessage();
-			document.getElementById( 'container' ).innerHTML = "";
-		}
+					// Detects webgl
+					if ( ! Detector.webgl ) {
+						Detector.addGetWebGLMessage();
+						document.getElementById( 'container' ).innerHTML = "";
+					}
 
-		// - Global variables -
+					// - Global variables -
 
-		// 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;
+					// 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;
 
-		// Graphics variables
-		var container, stats;
-		var camera, controls, scene, renderer;
-		var terrainMesh, texture;
-		var clock = new THREE.Clock();
+					// Graphics variables
+					var container, stats;
+					var camera, controls, scene, renderer;
+					var terrainMesh, texture;
+					var clock = new THREE.Clock();
 
-		// Physics variables
-		var collisionConfiguration;
-		var dispatcher;
-		var broadphase;
-		var solver;
-		var physicsWorld;
-		var terrainBody;
-		var dynamicObjects = [];
-		var transformAux1 = new Ammo.btTransform();
+					// Physics variables
+					var collisionConfiguration;
+					var dispatcher;
+					var broadphase;
+					var solver;
+					var physicsWorld;
+					var terrainBody;
+					var dynamicObjects = [];
+					var transformAux1 = new Ammo.btTransform();
 
-		var heightData = null;
-		var ammoHeightData = null;
+					var heightData = null;
+					var ammoHeightData = null;
 
-		var time = 0;
-		var objectTimePeriod = 3;
-		var timeNextSpawn = time + objectTimePeriod;
-		var maxNumObjects = 30;
+					var time = 0;
+					var objectTimePeriod = 3;
+					var timeNextSpawn = time + objectTimePeriod;
+					var maxNumObjects = 30;
 
-		// - Main code -
-		init();
-		animate();
+					// - Main code -
+					init();
+					animate();
 
-		function init() {
+					function init() {
 
-			heightData = generateHeight( terrainWidth, terrainDepth, terrainMinHeight, terrainMaxHeight );
+						heightData = generateHeight( terrainWidth, terrainDepth, terrainMinHeight, terrainMaxHeight );
 
-			initGraphics();
+						initGraphics();
 
-			initPhysics();
+						initPhysics();
 
-		}
+					}
 
-		function initGraphics() {
+					function initGraphics() {
 
-			container = document.getElementById( 'container' );
+						container = document.getElementById( 'container' );
 
-			renderer = new THREE.WebGLRenderer();
-			renderer.setClearColor( 0xbfd1e5 );
-			renderer.shadowMap.enabled = true;
-			renderer.setPixelRatio( window.devicePixelRatio );
-			renderer.setSize( window.innerWidth, window.innerHeight );
+						renderer = new THREE.WebGLRenderer();
+						renderer.setClearColor( 0xbfd1e5 );
+						renderer.shadowMap.enabled = true;
+						renderer.setPixelRatio( window.devicePixelRatio );
+						renderer.setSize( window.innerWidth, window.innerHeight );
 
-			container.innerHTML = "";
+						container.innerHTML = "";
 
-			container.appendChild( renderer.domElement );
+						container.appendChild( renderer.domElement );
 
-			stats = new Stats();
-			stats.domElement.style.position = 'absolute';
-			stats.domElement.style.top = '0px';
-			container.appendChild( stats.domElement );
+						stats = new Stats();
+						stats.domElement.style.position = 'absolute';
+						stats.domElement.style.top = '0px';
+						container.appendChild( stats.domElement );
 
 
-			camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.2, 2000 );
+						camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.2, 2000 );
 
-			scene = new THREE.Scene();
+						scene = new THREE.Scene();
 
-			camera.position.y = heightData[ terrainHalfWidth + terrainHalfDepth * terrainWidth ] * ( terrainMaxHeight - terrainMinHeight ) + 5;
+						camera.position.y = heightData[ terrainHalfWidth + terrainHalfDepth * terrainWidth ] * ( terrainMaxHeight - terrainMinHeight ) + 5;
 
-			camera.position.z = terrainDepthExtents / 2;
-			camera.lookAt( new THREE.Vector3( 0, 0, 0 ) );
+						camera.position.z = terrainDepthExtents / 2;
+						camera.lookAt( new THREE.Vector3( 0, 0, 0 ) );
 
-			controls = new THREE.OrbitControls( camera );
+						controls = new THREE.OrbitControls( camera );
 
-			var geometry = new THREE.PlaneBufferGeometry( 100, 100, terrainWidth - 1, terrainDepth - 1 );
-			geometry.rotateX( -Math.PI / 2 );
+						var geometry = new THREE.PlaneBufferGeometry( 100, 100, terrainWidth - 1, terrainDepth - 1 );
+						geometry.rotateX( -Math.PI / 2 );
 
-			var vertices = geometry.attributes.position.array;
+						var vertices = geometry.attributes.position.array;
 
-			for ( var i = 0, j = 0, l = vertices.length; i < l; i++, j += 3 ) {
+						for ( var i = 0, j = 0, l = vertices.length; i < l; i++, j += 3 ) {
 
-				// j + 1 because it is the y component that we modify
-				vertices[ j + 1 ] = heightData[ i ];
+							// j + 1 because it is the y component that we modify
+							vertices[ j + 1 ] = heightData[ i ];
 
-			}
+						}
 
-			geometry.computeVertexNormals();
+						geometry.computeVertexNormals();
 
-			var groundMaterial = new THREE.MeshPhongMaterial( { color: 0xC7C7C7 } );
-			terrainMesh = new THREE.Mesh( geometry, groundMaterial );
-			terrainMesh.receiveShadow = true;
-			terrainMesh.castShadow = true;
+						var groundMaterial = new THREE.MeshPhongMaterial( { color: 0xC7C7C7 } );
+						terrainMesh = new THREE.Mesh( geometry, groundMaterial );
+						terrainMesh.receiveShadow = true;
+						terrainMesh.castShadow = true;
 
-			scene.add( terrainMesh );
+						scene.add( terrainMesh );
 
-			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 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 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;
+						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;
 
-			light.shadow.camera.near = dLight / 30;
-			light.shadow.camera.far = dLight;
+						light.shadow.camera.near = dLight / 30;
+						light.shadow.camera.far = dLight;
 
-			light.shadow.mapSize.x = 1024 * 2;
-			light.shadow.mapSize.y = 1024 * 2;
+						light.shadow.mapSize.x = 1024 * 2;
+						light.shadow.mapSize.y = 1024 * 2;
 
-			scene.add(light);
+						scene.add(light);
 
 
-			window.addEventListener( 'resize', onWindowResize, false );
+						window.addEventListener( 'resize', onWindowResize, false );
 
-		}
+					}
 
-		function onWindowResize() {
+					function onWindowResize() {
 
-			camera.aspect = window.innerWidth / window.innerHeight;
-			camera.updateProjectionMatrix();
+						camera.aspect = window.innerWidth / window.innerHeight;
+						camera.updateProjectionMatrix();
 
-			renderer.setSize( window.innerWidth, window.innerHeight );
+						renderer.setSize( window.innerWidth, window.innerHeight );
 
-		}
+					}
 
-		function initPhysics() {
+					function initPhysics() {
 
-			// Physics configuration
+						// 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 ) );
+						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
+						// Create the terrain body
 
-			groundShape = this.createTerrainShape( heightData );
-			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 );
+						var groundShape = this.createTerrainShape( heightData );
+						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 generateHeight( width, depth, minHeight, maxHeight ) {
+					function generateHeight( width, depth, minHeight, maxHeight ) {
 
-			// Generates the height data (a sinus wave)
+						// Generates the height data (a sinus wave)
 
-			var size = width * depth;
-			var data = new Float32Array(size);
+						var size = width * depth;
+						var data = new Float32Array(size);
 
-			var hRange = maxHeight - minHeight;
-			var w2 = width / 2;
-			var d2 = depth / 2;
-			var phaseMult = 12;
+						var hRange = maxHeight - minHeight;
+						var w2 = width / 2;
+						var d2 = depth / 2;
+						var phaseMult = 12;
 
-			var p = 0;
-			for ( var j = 0; j < depth; j++ ) {
-				for ( var i = 0; i < width; i++ ) {
+						var p = 0;
+						for ( var j = 0; j < depth; j++ ) {
+							for ( var i = 0; i < width; i++ ) {
 
-					var radius = Math.sqrt(
-							Math.pow( ( i - w2 ) / w2, 2.0 ) +
-							Math.pow( ( j - d2 ) / d2, 2.0 ) );
+								var radius = Math.sqrt(
+										Math.pow( ( i - w2 ) / w2, 2.0 ) +
+										Math.pow( ( j - d2 ) / d2, 2.0 ) );
 
-					var height = ( Math.sin( radius * phaseMult ) + 1 ) * 0.5 * hRange + minHeight;
+								var height = ( Math.sin( radius * phaseMult ) + 1 ) * 0.5 * hRange + minHeight;
 
-					data[ p ] = height;
+								data[ p ] = height;
 
-					p++;
-				}
-			}
+								p++;
+							}
+						}
 
-			return data;
+						return data;
 
-		}
+					}
 
-		function createTerrainShape() {
+					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;
+						// This parameter is not really used, since we are using PHY_FLOAT height data type and hence it is ignored
+						var heightScale = 1;
 
-			// Up axis = 0 for X, 1 for Y, 2 for Z. Normally 1 = Y is used.
-			var upAxis = 1;
+						// 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";
-
-			// Set this to your needs (inverts the triangles)
-			var flipQuadEdges = false;
-
-			// Creates height data buffer in Ammo heap
-			ammoHeightData = Ammo._malloc(4 * terrainWidth * terrainDepth);
+						// hdt, height data type. "PHY_FLOAT" is used. Possible values are "PHY_FLOAT", "PHY_UCHAR", "PHY_SHORT"
+						var hdt = "PHY_FLOAT";
+
+						// Set this to your needs (inverts the triangles)
+						var flipQuadEdges = false;
+
+						// Creates height data buffer in Ammo heap
+						ammoHeightData = Ammo._malloc(4 * terrainWidth * terrainDepth);
 
-			// 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++ ) {
+						// 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++ ) {
 
-					// write 32-bit float data to memory
-					Ammo.HEAPF32[ ammoHeightData + p2 >> 2 ] = heightData[ p ];
+								// write 32-bit float data to memory
+								Ammo.HEAPF32[ ammoHeightData + p2 >> 2 ] = heightData[ p ];
 
-					p++;
+								p++;
 
-					// 4 bytes/float
-					p2 += 4;
-				}
-			}
+								// 4 bytes/float
+								p2 += 4;
+							}
+						}
 
-			// Creates the heightfield physics shape
-			var heightFieldShape = new Ammo.btHeightfieldTerrainShape(
-				terrainWidth,
-				terrainDepth,
-				ammoHeightData,
-				heightScale,
-				terrainMinHeight,
-				terrainMaxHeight,
-				upAxis,
-				hdt,
-				flipQuadEdges
-				);
+						// 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 ) );
+						// 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 );
+						heightFieldShape.setMargin( 0.05 );
 
-			return heightFieldShape;
+						return heightFieldShape;
 
-		}
+					}
 
-		function generateObject() {
+					function generateObject() {
 
-			var numTypes = 4;
-			var objectType = Math.ceil( Math.random() * numTypes );
+						var numTypes = 4;
+						var objectType = Math.ceil( Math.random() * numTypes );
 
-			var threeObject = null;
-			var shape = null;
+						var threeObject = null;
+						var shape = null;
 
-			var objectSize = 3;
-			var margin = 0.05;
+						var objectSize = 3;
+						var margin = 0.05;
 
-			switch (objectType) {
-				case 1:
-					// Sphere
-					var radius = 1 + Math.random() * objectSize;
-					threeObject = new THREE.Mesh( new THREE.SphereGeometry( 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.BoxGeometry( 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.CylinderGeometry( 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.CylinderGeometry( 0, radius, height, 20, 2 ), createObjectMaterial() );
-					shape = new Ammo.btConeShape( radius, height );
-					break;
-			}
+						switch (objectType) {
+							case 1:
+								// Sphere
+								var radius = 1 + Math.random() * objectSize;
+								threeObject = new THREE.Mesh( new THREE.SphereGeometry( 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.BoxGeometry( 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.CylinderGeometry( 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.CylinderGeometry( 0, 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 );
+						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 );
+						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.userData.physicsBody = body;
 
-			threeObject.receiveShadow = true;
-			threeObject.castShadow = true;
+						threeObject.receiveShadow = true;
+						threeObject.castShadow = true;
 
-			scene.add( threeObject );
-			dynamicObjects.push( threeObject );
+						scene.add( threeObject );
+						dynamicObjects.push( threeObject );
 
-			physicsWorld.addRigidBody( body );
+						physicsWorld.addRigidBody( body );
 
 
 
-		}
+					}
 
-		function createObjectMaterial() {
-			var c = Math.floor( Math.random() * ( 1 << 24 ) );
-			return new THREE.MeshPhongMaterial( { color: c } );
-		}
+					function createObjectMaterial() {
+						var c = Math.floor( Math.random() * ( 1 << 24 ) );
+						return new THREE.MeshPhongMaterial( { color: c } );
+					}
 
-		function animate() {
+					function animate() {
 
-			requestAnimationFrame(animate);
+						requestAnimationFrame(animate);
 
-			render();
-			stats.update();
+						render();
+						stats.update();
 
-		}
+					}
 
-		function render() {
+					function render() {
 
-			var deltaTime = clock.getDelta();
+						var deltaTime = clock.getDelta();
 
-			if ( dynamicObjects.length < maxNumObjects && time > timeNextSpawn ) {
-				generateObject();
-				timeNextSpawn = time + objectTimePeriod;
-			}
+						if ( dynamicObjects.length < maxNumObjects && time > timeNextSpawn ) {
+							generateObject();
+							timeNextSpawn = time + objectTimePeriod;
+						}
 
-			updatePhysics( deltaTime );
+						updatePhysics( deltaTime );
 
-			controls.update( deltaTime );
+						controls.update( deltaTime );
 
-			renderer.render( scene, camera );
+						renderer.render( scene, camera );
 
-			time += deltaTime;
+						time += deltaTime;
 
-		}
+					}
 
-		function updatePhysics( deltaTime ) {
+					function updatePhysics( deltaTime ) {
 
-			physicsWorld.stepSimulation( deltaTime, 10 );
+						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 ) {
+						// 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() );
+								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

@@ -1,558 +1,551 @@
 <html lang="en">
-    <head>
-        <title>Ammo.js softbody volume 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;
-            }
+	<head>
+		<title>Ammo.js softbody volume 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;
+			}
 
-        </style>
-    </head>
-    <body>
-	<div id="info">Ammo.js physics soft body volume demo<br>Click to throw a ball</div>
-        <div id="container"><br /><br /><br /><br /><br />Loading...</div>
+			#info {
+				position: absolute;
+				top: 0px; width: 100%;
+				padding: 5px;
+			}
 
-	<script src="../build/three.js"></script>
-	<script src="js/libs/ammo.js"></script>
-	<script src="js/controls/OrbitControls.js"></script>
-        <script src="js/Detector.js"></script>
-	<script src="js/libs/stats.min.js"></script>
+			a {
+				color: #a06851;
+			}
+		</style>
+	</head>
+	<body>
+		<div id="info">Ammo.js physics soft body volume demo<br>Click to throw a ball</div>
+		<div id="container"><br /><br /><br /><br /><br />Loading...</div>
+
+		<script src="../build/three.js"></script>
+		<script src="js/libs/ammo.js"></script>
+		<script src="js/controls/OrbitControls.js"></script>
+		<script src="js/Detector.js"></script>
+		<script src="js/libs/stats.min.js"></script>
+
+		<script>
+
+			// Detects webgl
+			if ( ! Detector.webgl ) {
+					Detector.addGetWebGLMessage();
+					document.getElementById( 'container' ).innerHTML = "";
+			}
 
-        <script>
+			// - Global variables -
 
-		// Detects webgl
-		if ( ! Detector.webgl ) {
-		    Detector.addGetWebGLMessage();
-		    document.getElementById( 'container' ).innerHTML = "";
-		}
+			// Graphics variables
+			var container, stats;
+			var camera, controls, scene, renderer;
+			var textureLoader;
+			var clock = new THREE.Clock();
+			var clickRequest = false;
+			var mouseCoords = new THREE.Vector2();
+			var raycaster = new THREE.Raycaster();
+			var ballMaterial = new THREE.MeshPhongMaterial( { color: 0x202020 } );
+			var pos = new THREE.Vector3();
+			var quat = new THREE.Quaternion();
 
-		// - Global variables -
+			// Physics variables
+			var gravityConstant = -9.8;
+			var physicsWorld;
+			var rigidBodies = [];
+			var softBodies = [];
+			var margin = 0.05;
+			var transformAux1 = new Ammo.btTransform();
+			var softBodyHelpers = new Ammo.btSoftBodyHelpers();
 
-		// Graphics variables
-		var container, stats;
-		var camera, controls, scene, renderer;
-		var textureLoader;
-		var clock = new THREE.Clock();
-		var clickRequest = false;
-		var mouseCoords = new THREE.Vector2();
-		var raycaster = new THREE.Raycaster();
-		var ballMaterial = new THREE.MeshPhongMaterial( { color: 0x202020 } );
-		var pos = new THREE.Vector3();
-		var quat = new THREE.Quaternion();
+			var armMovement = 0;
 
-		// Physics variables
-		var gravityConstant = -9.8;
-		var collisionConfiguration;
-		var dispatcher;
-		var broadphase;
-		var solver;
-		var physicsWorld;
-		var rigidBodies = [];
-		var softBodies = [];
-		var margin = 0.05;
-		var hinge;
-		var transformAux1 = new Ammo.btTransform();
-		var softBodyHelpers = new Ammo.btSoftBodyHelpers();
+			// - Main code -
 
-		var armMovement = 0;
+			init();
+			animate();
 
-		// - Main code -
 
-		init();
-		animate();
+			// - Functions -
 
+			function init() {
 
-		// - Functions -
+				initGraphics();
 
-		function init() {
+				initPhysics();
 
-			initGraphics();
+				createObjects();
 
-			initPhysics();
+				initInput();
 
-			createObjects();
+			}
 
-			initInput();
+			function initGraphics() {
 
-		}
+				container = document.getElementById( 'container' );
 
-		function initGraphics() {
+				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.2, 2000 );
 
-			container = document.getElementById( 'container' );
+				scene = new THREE.Scene();
 
-			camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.2, 2000 );
+				camera.position.x = -7;
+				camera.position.y = 5;
+				camera.position.z =  8;
 
-			scene = new THREE.Scene();
+				controls = new THREE.OrbitControls( camera );
+				controls.target.y = 2;
 
-			camera.position.x = -7;
-			camera.position.y = 5;
-			camera.position.z =  8;
+				renderer = new THREE.WebGLRenderer();
+				renderer.setClearColor( 0xbfd1e5 );
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.shadowMap.enabled = true;
 
-			controls = new THREE.OrbitControls( camera );
-			controls.target.y = 2;
+				textureLoader = new THREE.TextureLoader();
 
-			renderer = new THREE.WebGLRenderer();
-			renderer.setClearColor( 0xbfd1e5 );
-			renderer.setPixelRatio( window.devicePixelRatio );
-			renderer.setSize( window.innerWidth, window.innerHeight );
-			renderer.shadowMap.enabled = true;
+				var ambientLight = new THREE.AmbientLight( 0x404040 );
+				scene.add( ambientLight );
 
-			textureLoader = new THREE.TextureLoader();
+				var light = new THREE.DirectionalLight( 0xffffff, 1 );
+				light.position.set( -10, 10, 5 );
+				light.castShadow = true;
+				var d = 20;
+				light.shadow.camera.left = -d;
+				light.shadow.camera.right = d;
+				light.shadow.camera.top = d;
+				light.shadow.camera.bottom = -d;
 
-			var ambientLight = new THREE.AmbientLight( 0x404040 );
-			scene.add( ambientLight );
+				light.shadow.camera.near = 2;
+				light.shadow.camera.far = 50;
 
-			var light = new THREE.DirectionalLight( 0xffffff, 1 );
-			light.position.set( -10, 10, 5 );
-			light.castShadow = true;
-			var d = 20;
-			light.shadow.camera.left = -d;
-			light.shadow.camera.right = d;
-			light.shadow.camera.top = d;
-			light.shadow.camera.bottom = -d;
+				light.shadow.mapSize.x = 1024;
+				light.shadow.mapSize.y = 1024;
 
-			light.shadow.camera.near = 2;
-			light.shadow.camera.far = 50;
+				scene.add( light );
 
-			light.shadow.mapSize.x = 1024;
-			light.shadow.mapSize.y = 1024;
 
-			scene.add( light );
+				container.innerHTML = "";
 
+				container.appendChild( renderer.domElement );
 
-			container.innerHTML = "";
+				stats = new Stats();
+				stats.domElement.style.position = 'absolute';
+				stats.domElement.style.top = '0px';
+				container.appendChild( stats.domElement );
 
-			container.appendChild( renderer.domElement );
 
-			stats = new Stats();
-			stats.domElement.style.position = 'absolute';
-			stats.domElement.style.top = '0px';
-			container.appendChild( stats.domElement );
+				window.addEventListener( 'resize', onWindowResize, false );
 
+			}
 
-			window.addEventListener( 'resize', onWindowResize, false );
+			function initPhysics() {
 
-		}
+				// Physics configuration
 
-		function initPhysics() {
+				var collisionConfiguration = new Ammo.btSoftBodyRigidBodyCollisionConfiguration();
+				var dispatcher = new Ammo.btCollisionDispatcher( collisionConfiguration );
+				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.setGravity( new Ammo.btVector3( 0, gravityConstant, 0 ) );
+				physicsWorld.getWorldInfo().set_m_gravity( new Ammo.btVector3( 0, gravityConstant, 0 ) );
 
-			// Physics configuration
+			}
 
-			collisionConfiguration = new Ammo.btSoftBodyRigidBodyCollisionConfiguration();
-			dispatcher = new Ammo.btCollisionDispatcher( collisionConfiguration );
-			broadphase = new Ammo.btDbvtBroadphase();
-			solver = new Ammo.btSequentialImpulseConstraintSolver();
-			softBodySolver = new Ammo.btDefaultSoftBodySolver();
-			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 ) );
+			function createObjects() {
 
-		}
+				// Ground
+				pos.set( 0, - 0.5, 0 );
+				quat.set( 0, 0, 0, 1 );
+				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 ) {
+					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;
+
+				var sphereGeometry = new THREE.SphereBufferGeometry( 1.5, 40, 25 );
+				sphereGeometry.translate( 5, 5, 0 );
+				createSoftVolume( sphereGeometry, volumeMass, 250 );
+
+				var boxGeometry = new THREE.BufferGeometry().fromGeometry( new THREE.BoxGeometry( 1, 1, 5, 4, 4, 20 ) );
+				boxGeometry.translate( -2, 5, 0 );
+				createSoftVolume( boxGeometry, volumeMass, 120 );
+
+				// Ramp
+				pos.set( 3, 1, 0 );
+				quat.setFromAxisAngle( new THREE.Vector3( 0, 0, 1 ), 30 * Math.PI / 180 );
+				var obstacle = createParalellepiped( 10, 1, 4, 0, pos, quat, new THREE.MeshPhongMaterial( { color: 0x606060 } ) );
+				obstacle.castShadow = true;
+				obstacle.receiveShadow = true;
 
-		function createObjects() {
+			}
 
-			// Ground
-			pos.set( 0, - 0.5, 0 );
-			quat.set( 0, 0, 0, 1 );
-			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 ) {
-				texture.wrapS = THREE.RepeatWrapping;
-				texture.wrapT = THREE.RepeatWrapping;
-				texture.repeat.set( 40, 40 );
-				ground.material.map = texture;
-				ground.material.needsUpdate = true;
-			} );
+			function processGeometry( bufGeometry ) {
 
+				// Obtain a Geometry
+				var geometry = new THREE.Geometry().fromBufferGeometry( bufGeometry );
 
-			// Create soft volumes
-			var volumeMass = 15;
+				// Merge the vertices so the triangle soup is converted to indexed triangles
+				var vertsDiff = geometry.mergeVertices();
 
-			var sphereGeometry = new THREE.SphereBufferGeometry( 1.5, 40, 25 );
-			sphereGeometry.translate( 5, 5, 0 );
-			createSoftVolume( sphereGeometry, volumeMass, 250 );
+				// Convert again to BufferGeometry, indexed
+				var indexedBufferGeom = createIndexedBufferGeometryFromGeometry( geometry );
 
-			var boxGeometry = new THREE.BufferGeometry().fromGeometry( new THREE.BoxGeometry( 1, 1, 5, 4, 4, 20 ) );
-			boxGeometry.translate( -2, 5, 0 );
-			createSoftVolume( boxGeometry, volumeMass, 120 );
+				// Create index arrays mapping the indexed vertices to bufGeometry vertices
+				mapIndices( bufGeometry, indexedBufferGeom );
 
-			// Ramp
-			pos.set( 3, 1, 0 );
-			quat.setFromAxisAngle( new THREE.Vector3( 0, 0, 1 ), 30 * Math.PI / 180 );
-			var obstacle = createParalellepiped( 10, 1, 4, 0, pos, quat, new THREE.MeshPhongMaterial( { color: 0x606060 } ) );
-			obstacle.castShadow = true;
-			obstacle.receiveShadow = true;
+			}
 
-		}
+			function createIndexedBufferGeometryFromGeometry( geometry ) {
 
-		function processGeometry( bufGeometry ) {
+				var numVertices = geometry.vertices.length;
+				var numFaces = geometry.faces.length;
 
-			// Obtain a Geometry
-			var geometry = new THREE.Geometry().fromBufferGeometry( bufGeometry );
+				var bufferGeom = new THREE.BufferGeometry();
+				var vertices = new Float32Array( numVertices * 3 );
+				var indices = new ( numFaces * 3 > 65535 ? Uint32Array : Uint16Array )( numFaces * 3 );
 
-			// Merge the vertices so the triangle soup is converted to indexed triangles
-			var vertsDiff = geometry.mergeVertices();
+				for ( var i = 0; i < numVertices; i++ ) {
 
-			// Convert again to BufferGeometry, indexed
-			var indexedBufferGeom = createIndexedBufferGeometryFromGeometry( geometry );
+					var p = geometry.vertices[ i ];
 
-			// Create index arrays mapping the indexed vertices to bufGeometry vertices
-			mapIndices( bufGeometry, indexedBufferGeom );
+					var i3 = i * 3;
 
-		}
+					vertices[ i3 ] = p.x;
+					vertices[ i3 + 1 ] = p.y;
+					vertices[ i3 + 2 ] = p.z;
 
-		function createIndexedBufferGeometryFromGeometry( geometry ) {
+				}
 
-			var numVertices = geometry.vertices.length;
-			var numFaces = geometry.faces.length;
+				for ( var i = 0; i < numFaces; i++ ) {
 
-			var bufferGeom = new THREE.BufferGeometry();
-			var vertices = new Float32Array( numVertices * 3 );
-			var indices = new ( numFaces * 3 > 65535 ? Uint32Array : Uint16Array )( numFaces * 3 );
+					var f = geometry.faces[ i ];
 
-			for ( var i = 0; i < numVertices; i++ ) {
+					var i3 = i * 3;
 
-				var p = geometry.vertices[ i ];
+					indices[ i3 ] = f.a;
+					indices[ i3 + 1 ] = f.b;
+					indices[ i3 + 2 ] = f.c;
 
-				var i3 = i * 3;
+				}
 
-				vertices[ i3 ] = p.x;
-				vertices[ i3 + 1 ] = p.y;
-				vertices[ i3 + 2 ] = p.z;
+				bufferGeom.setIndex( new THREE.BufferAttribute( indices, 1 ) );
+				bufferGeom.addAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
 
+				return bufferGeom;
 			}
 
-			for ( var i = 0; i < numFaces; i++ ) {
-
-				var f = geometry.faces[ i ];
+			function isEqual( x1, y1, z1, x2, y2, z2 ) {
 
-				var i3 = i * 3;
-
-				indices[ i3 ] = f.a;
-				indices[ i3 + 1 ] = f.b;
-				indices[ i3 + 2 ] = f.c;
+				var delta = 0.000001;
+				return Math.abs( x2 - x1 ) < delta &&
+						Math.abs( y2 - y1 ) < delta &&
+						Math.abs( z2 - z1 ) < delta;
 
 			}
 
-			bufferGeom.setIndex( new THREE.BufferAttribute( indices, 1 ) );
-			bufferGeom.addAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
-
-			return bufferGeom;
-		}
-
-		function isEqual( x1, y1, z1, x2, y2, z2 ) {
+			function mapIndices( bufGeometry, indexedBufferGeom ) {
 
-			var delta = 0.000001;
-			return Math.abs( x2 - x1 ) < delta &&
-			    Math.abs( y2 - y1 ) < delta &&
-			    Math.abs( z2 - z1 ) < delta;
+				// Creates ammoVertices, ammoIndices and ammoIndexAssociation in bufGeometry
 
-		}
+				var vertices = bufGeometry.attributes.position.array;
+				var idxVertices = indexedBufferGeom.attributes.position.array;
+				var indices = indexedBufferGeom.index.array;
 
-		function mapIndices( bufGeometry, indexedBufferGeom ) {
+				var numIdxVertices = idxVertices.length / 3;
+				var numVertices = vertices.length / 3;
 
-			// Creates ammoVertices, ammoIndices and ammoIndexAssociation in bufGeometry
+				bufGeometry.ammoVertices = idxVertices;
+				bufGeometry.ammoIndices = indices;
+				bufGeometry.ammoIndexAssociation = [];
 
-			var vertices = bufGeometry.attributes.position.array;
-			var idxVertices = indexedBufferGeom.attributes.position.array;
-			var indices = indexedBufferGeom.index.array;
+				for ( var i = 0; i < numIdxVertices; i++ ) {
 
-			var numIdxVertices = idxVertices.length / 3;
-			var numVertices = vertices.length / 3;
+					var association = [];
+					bufGeometry.ammoIndexAssociation.push( association );
 
-			bufGeometry.ammoVertices = idxVertices;
-			bufGeometry.ammoIndices = indices;
-			bufGeometry.ammoIndexAssociation = [];
+					var i3 = i * 3;
 
-			for ( var i = 0; i < numIdxVertices; i++ ) {
+					for ( var j = 0; j < numVertices; j++ ) {
 
-				var association = [];
-				bufGeometry.ammoIndexAssociation.push( association );
+						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 );
+						}
 
-				var i3 = i * 3;
-
-				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 );
 					}
 
 				}
 
 			}
 
-		}
+			function createSoftVolume( bufferGeom, mass, pressure ) {
+
+				processGeometry( bufferGeom );
+
+				var volume = new THREE.Mesh( bufferGeom, new THREE.MeshPhongMaterial( { color: 0xFFFFFF } ) );
+				volume.castShadow = true;
+				volume.receiveShadow = true;
+				volume.frustumCulled = false;
+				scene.add( volume );
+
+				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 );
+
+				var sbConfig = volumeSoftBody.get_m_cfg();
+				sbConfig.set_viterations( 40 );
+				sbConfig.set_piterations( 40 );
+
+				// Soft-soft and soft-rigid collisions
+				sbConfig.set_collisions( 0x11 );
+
+				// Friction
+				sbConfig.set_kDF( 0.1 );
+				// Damping
+				sbConfig.set_kDP( 0.01 );
+				// Pressure
+				sbConfig.set_kPR( pressure );
+				// Stiffness
+				volumeSoftBody.get_m_materials().at( 0 ).set_m_kLST( 0.9 );
+				volumeSoftBody.get_m_materials().at( 0 ).set_m_kAST( 0.9 );
+
+				volumeSoftBody.setTotalMass( mass, false )
+				Ammo.castObject( volumeSoftBody, Ammo.btCollisionObject ).getCollisionShape().setMargin( margin );
+				physicsWorld.addSoftBody( volumeSoftBody, 1, -1 );
+				volume.userData.physicsBody = volumeSoftBody;
+				// Disable deactivation
+				volumeSoftBody.setActivationState( 4 );
 
-		function createSoftVolume( bufferGeom, mass, pressure ) {
+				softBodies.push( volume );
 
-			processGeometry( bufferGeom );
+			}
 
-			var volume = new THREE.Mesh( bufferGeom, new THREE.MeshPhongMaterial( { color: 0xFFFFFF } ) );
-			volume.castShadow = true;
-			volume.receiveShadow = true;
-			volume.frustumCulled = false;
-			scene.add( volume );
+			function createParalellepiped( sx, sy, sz, mass, pos, quat, material ) {
 
-			textureLoader.load( "textures/colors.png", function( texture ) {
-			    volume.material.map = texture;
-			    volume.material.needsUpdate = true;
-			} );
+				var threeObject = new THREE.Mesh( new THREE.BoxGeometry( sx, sy, sz, 1, 1, 1 ), material );
+				var shape = new Ammo.btBoxShape( new Ammo.btVector3( sx * 0.5, sy * 0.5, sz * 0.5 ) );
+				shape.setMargin( margin );
 
-			// Volume physic object
+				createRigidBody( threeObject, shape, mass, pos, quat );
 
-			var volumeSoftBody = softBodyHelpers.CreateFromTriMesh(
-			    physicsWorld.getWorldInfo(),
-			    bufferGeom.ammoVertices,
-			    bufferGeom.ammoIndices,
-			    bufferGeom.ammoIndices.length / 3,
-			    true );
+				return threeObject;
 
-			var sbConfig = volumeSoftBody.get_m_cfg();
-			sbConfig.set_viterations( 40 );
-			sbConfig.set_piterations( 40 );
+			}
 
-			// Soft-soft and soft-rigid collisions
-			sbConfig.set_collisions( 0x11 );
+			function createRigidBody( threeObject, physicsShape, mass, pos, quat ) {
 
-			// Friction
-			sbConfig.set_kDF( 0.1 );
-			// Damping
-			sbConfig.set_kDP( 0.01 );
-			// Pressure
-			sbConfig.set_kPR( pressure );
-			// Stiffness
-			volumeSoftBody.get_m_materials().at( 0 ).set_m_kLST( 0.9 );
-			volumeSoftBody.get_m_materials().at( 0 ).set_m_kAST( 0.9 );
+				threeObject.position.copy( pos );
+				threeObject.quaternion.copy( quat );
 
-			volumeSoftBody.setTotalMass( mass, false )
-			Ammo.castObject( volumeSoftBody, Ammo.btCollisionObject ).getCollisionShape().setMargin( margin );
-			physicsWorld.addSoftBody( volumeSoftBody, 1, -1 );
-			volume.userData.physicsBody = volumeSoftBody;
-			// Disable deactivation
-			volumeSoftBody.setActivationState( 4 );
+				var transform = new Ammo.btTransform();
+				transform.setIdentity();
+				transform.setOrigin( new Ammo.btVector3( pos.x, pos.y, pos.z ) );
+				transform.setRotation( new Ammo.btQuaternion( quat.x, quat.y, quat.z, quat.w ) );
+				var motionState = new Ammo.btDefaultMotionState( transform );
 
-			softBodies.push( volume );
+				var localInertia = new Ammo.btVector3( 0, 0, 0 );
+				physicsShape.calculateLocalInertia( mass, localInertia );
 
-		}
+				var rbInfo = new Ammo.btRigidBodyConstructionInfo( mass, motionState, physicsShape, localInertia );
+				var body = new Ammo.btRigidBody( rbInfo );
 
-		function createParalellepiped( sx, sy, sz, mass, pos, quat, material ) {
+				threeObject.userData.physicsBody = body;
 
-			var threeObject = new THREE.Mesh( new THREE.BoxGeometry( sx, sy, sz, 1, 1, 1 ), material );
-			var shape = new Ammo.btBoxShape( new Ammo.btVector3( sx * 0.5, sy * 0.5, sz * 0.5 ) );
-			shape.setMargin( margin );
+				scene.add( threeObject );
 
-			createRigidBody( threeObject, shape, mass, pos, quat );
+				if ( mass > 0 ) {
 
-			return threeObject;
+					rigidBodies.push( threeObject );
 
-		}
+					// Disable deactivation
+					body.setActivationState( 4 );
 
-		function createRigidBody( threeObject, physicsShape, mass, pos, quat ) {
+				}
 
-			threeObject.position.copy( pos );
-			threeObject.quaternion.copy( quat );
+				physicsWorld.addRigidBody( body );
 
-			var transform = new Ammo.btTransform();
-			transform.setIdentity();
-			transform.setOrigin( new Ammo.btVector3( pos.x, pos.y, pos.z ) );
-			transform.setRotation( new Ammo.btQuaternion( quat.x, quat.y, quat.z, quat.w ) );
-			var motionState = new Ammo.btDefaultMotionState( transform );
+					return body;
+			}
 
-			var localInertia = new Ammo.btVector3( 0, 0, 0 );
-			physicsShape.calculateLocalInertia( mass, localInertia );
+			function initInput() {
 
-			var rbInfo = new Ammo.btRigidBodyConstructionInfo( mass, motionState, physicsShape, localInertia );
-			var body = new Ammo.btRigidBody( rbInfo );
+				window.addEventListener( 'mousedown', function( event ) {
 
-			threeObject.userData.physicsBody = body;
+					if ( ! clickRequest ) {
 
-			scene.add( threeObject );
+						mouseCoords.set(
+							( event.clientX / window.innerWidth ) * 2 - 1,
+							- ( event.clientY / window.innerHeight ) * 2 + 1
+						);
 
-			if ( mass > 0 ) {
+						clickRequest = true;
 
-				rigidBodies.push( threeObject );
+					}
 
-				// Disable deactivation
-				body.setActivationState( 4 );
+				}, false );
 
 			}
 
-			physicsWorld.addRigidBody( body );
+			function processClick() {
 
-		    return body;
-		}
+				if ( clickRequest ) {
 
-		function initInput() {
+					raycaster.setFromCamera( mouseCoords, camera );
 
-			window.addEventListener( 'mousedown', function( event ) {
+					// Creates a ball
+					var ballMass = 3;
+					var ballRadius = 0.4;
 
-				if ( ! clickRequest ) {
+					var ball = new THREE.Mesh( new THREE.SphereGeometry( ballRadius, 18, 16 ), ballMaterial );
+					ball.castShadow = true;
+					ball.receiveShadow = true;
+					var ballShape = new Ammo.btSphereShape( ballRadius );
+					ballShape.setMargin( margin );
+					pos.copy( raycaster.ray.direction );
+					pos.add( raycaster.ray.origin );
+					quat.set( 0, 0, 0, 1 );
+					var ballBody = createRigidBody( ball, ballShape, ballMass, pos, quat );
+					ballBody.setFriction( 0.5 );
 
-					mouseCoords.set(
-						( event.clientX / window.innerWidth ) * 2 - 1,
-						- ( event.clientY / window.innerHeight ) * 2 + 1
-					);
+					pos.copy( raycaster.ray.direction );
+					pos.multiplyScalar( 14 );
+					ballBody.setLinearVelocity( new Ammo.btVector3( pos.x, pos.y, pos.z ) );
 
-					clickRequest = true;
+					clickRequest = false;
 
 				}
 
-			}, false );
-
-		}
-
-		function processClick() {
-
-			if ( clickRequest ) {
-
-				raycaster.setFromCamera( mouseCoords, camera );
-
-				// Creates a ball
-				var ballMass = 3;
-				var ballRadius = 0.4;
-
-				var ball = new THREE.Mesh( new THREE.SphereGeometry( ballRadius, 18, 16 ), ballMaterial );
-				ball.castShadow = true;
-				ball.receiveShadow = true;
-				var ballShape = new Ammo.btSphereShape( ballRadius );
-				ballShape.setMargin( margin );
-				pos.copy( raycaster.ray.direction );
-				pos.add( raycaster.ray.origin );
-				quat.set( 0, 0, 0, 1 );
-				var ballBody = createRigidBody( ball, ballShape, ballMass, pos, quat );
-				ballBody.setFriction( 0.5 );
-
-				pos.copy( raycaster.ray.direction );
-				pos.multiplyScalar( 14 );
-				ballBody.setLinearVelocity( new Ammo.btVector3( pos.x, pos.y, pos.z ) );
-
-				clickRequest = false;
-
 			}
 
-		}
+			function onWindowResize() {
 
-		function onWindowResize() {
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
 
-			camera.aspect = window.innerWidth / window.innerHeight;
-			camera.updateProjectionMatrix();
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
-			renderer.setSize( window.innerWidth, window.innerHeight );
-
-		}
+			}
 
-		function animate() {
+			function animate() {
 
-			requestAnimationFrame( animate );
+				requestAnimationFrame( animate );
 
-			render();
-			stats.update();
+				render();
+				stats.update();
 
-		}
+			}
 
-		function render() {
+			function render() {
 
-			var deltaTime = clock.getDelta();
+				var deltaTime = clock.getDelta();
 
-			updatePhysics( deltaTime );
+				updatePhysics( deltaTime );
 
-			processClick();
+				processClick();
 
-			controls.update( deltaTime );
+				controls.update( deltaTime );
 
-			renderer.render( scene, camera );
+				renderer.render( scene, camera );
 
-		}
+			}
 
-		function updatePhysics( deltaTime ) {
+			function updatePhysics( deltaTime ) {
+
+				// Step world
+				physicsWorld.stepSimulation( deltaTime, 10 );
+
+				// Update soft volumes
+				for ( var i = 0, il = softBodies.length; i < il; i++ ) {
+					var volume = softBodies[ i ];
+					var geometry = volume.geometry;
+					var softBody = volume.userData.physicsBody;
+					var volumePositions = geometry.attributes.position.array;
+					var volumeNormals = geometry.attributes.normal.array;
+					var association = geometry.ammoIndexAssociation;
+					var numVerts = association.length;
+					var nodes = softBody.get_m_nodes();
+					for ( var j = 0; j < numVerts; j ++ ) {
+
+						var node = nodes.at( j );
+						var nodePos = node.get_m_x();
+						var x = nodePos.x();
+						var y = nodePos.y();
+						var z = nodePos.z();
+						var nodeNormal = node.get_m_n();
+						var nx = nodeNormal.x();
+						var ny = nodeNormal.y();
+						var nz = nodeNormal.z();
+
+						var assocVertex = association[ j ];
+
+						for ( var k = 0, kl = assocVertex.length; k < kl; k++ ) {
+							var indexVertex = assocVertex[ k ];
+							volumePositions[ indexVertex ] = x;
+							volumeNormals[ indexVertex ] = nx;
+							indexVertex++;
+							volumePositions[ indexVertex ] = y;
+							volumeNormals[ indexVertex ] = ny;
+							indexVertex++;
+							volumePositions[ indexVertex ] = z;
+							volumeNormals[ indexVertex ] = nz;
+						}
+					}
 
-			// Step world
-			physicsWorld.stepSimulation( deltaTime, 10 );
+					geometry.attributes.position.needsUpdate = true;
+					geometry.attributes.normal.needsUpdate = true;
 
-			// Update soft volumes
-			for ( var i = 0, il = softBodies.length; i < il; i++ ) {
-				var volume = softBodies[ i ];
-				var geometry = volume.geometry;
-				var softBody = volume.userData.physicsBody;
-				var volumePositions = geometry.attributes.position.array;
-				var volumeNormals = geometry.attributes.normal.array;
-				var association = geometry.ammoIndexAssociation;
-				var numVerts = association.length;
-				var nodes = softBody.get_m_nodes();
-				for ( var j = 0; j < numVerts; j ++ ) {
+				}
 
-					var node = nodes.at( j );
-					var nodePos = node.get_m_x();
-					var x = nodePos.x();
-					var y = nodePos.y();
-					var z = nodePos.z();
-					var nodeNormal = node.get_m_n();
-					var nx = nodeNormal.x();
-					var ny = nodeNormal.y();
-					var nz = nodeNormal.z();
+				// Update rigid bodies
+				for ( var i = 0, il = rigidBodies.length; i < il; i++ ) {
+					var objThree = rigidBodies[ i ];
+					var objPhys = objThree.userData.physicsBody;
+					var ms = objPhys.getMotionState();
+					if ( ms ) {
 
-					var assocVertex = association[ j ];
+						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() );
 
-					for ( var k = 0, kl = assocVertex.length; k < kl; k++ ) {
-						var indexVertex = assocVertex[ k ];
-						volumePositions[ indexVertex ] = x;
-						volumeNormals[ indexVertex ] = nx;
-						indexVertex++;
-						volumePositions[ indexVertex ] = y;
-						volumeNormals[ indexVertex ] = ny;
-						indexVertex++;
-						volumePositions[ indexVertex ] = z;
-						volumeNormals[ indexVertex ] = nz;
 					}
 				}
 
-				geometry.attributes.position.needsUpdate = true;
-				geometry.attributes.normal.needsUpdate = true;
-
 			}
 
-			// Update rigid bodies
-			for ( var i = 0, il = rigidBodies.length; i < il; i++ ) {
-				var objThree = rigidBodies[ 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_points_dynamic.html

@@ -272,7 +272,7 @@
 
 			function render () {
 
-				delta = 10 * clock.getDelta();
+				var delta = 10 * clock.getDelta();
 
 				delta = delta < 2 ? delta : 2;
 
@@ -310,7 +310,7 @@
 
 					}
 
-					for ( i = 0; i < vl; i ++ ) {
+					for ( var i = 0; i < vl; i ++ ) {
 
 						p = vertices[ i ];
 						vt = vertices_tmp[ i ];

examples/webgl_points_sprites.html

@@ -71,11 +71,11 @@
 
 				var textureLoader = new THREE.TextureLoader();
 
-				sprite1 = textureLoader.load( "textures/sprites/snowflake1.png" );
-				sprite2 = textureLoader.load( "textures/sprites/snowflake2.png" );
-				sprite3 = textureLoader.load( "textures/sprites/snowflake3.png" );
-				sprite4 = textureLoader.load( "textures/sprites/snowflake4.png" );
-				sprite5 = textureLoader.load( "textures/sprites/snowflake5.png" );
+				var sprite1 = textureLoader.load( "textures/sprites/snowflake1.png" );
+				var sprite2 = textureLoader.load( "textures/sprites/snowflake2.png" );
+				var sprite3 = textureLoader.load( "textures/sprites/snowflake3.png" );
+				var sprite4 = textureLoader.load( "textures/sprites/snowflake4.png" );
+				var sprite5 = textureLoader.load( "textures/sprites/snowflake5.png" );
 
 				for ( i = 0; i < 10000; i ++ ) {
 

examples/webgl_postprocessing_advanced.html

@@ -111,8 +111,12 @@
 				directionalLight.position.set( 0, -0.1, 1 ).normalize();
 				sceneModel.add( directionalLight );
 
-				loader = new THREE.JSONLoader();
-				loader.load( "obj/leeperrysmith/LeePerrySmith.js", function( geometry ) { createMesh( geometry, sceneModel, 100 ) } );
+				var loader = new THREE.JSONLoader();
+				loader.load( "obj/leeperrysmith/LeePerrySmith.js", function( geometry ) {
+
+					createMesh( geometry, sceneModel, 100 );
+
+				} );
 
 				//
 

examples/webgl_postprocessing_backgrounds.html

@@ -111,7 +111,7 @@
 
 			function init() {
 
-				container = document.getElementById( "container" );
+				var container = document.getElementById( "container" );
 
 				var width = window.innerWidth || 1;
 				var height = window.innerHeight || 1;
@@ -141,7 +141,7 @@
 
 				scene = new THREE.Scene();
 
-				group = new THREE.Object3D();
+				var group = new THREE.Group();
 				scene.add( group );
 
 				var light = new THREE.PointLight( 0xddffdd, 1.0 );
@@ -208,7 +208,7 @@
 				renderPass.clear = false;
 				composer.addPass( renderPass );
 
-				copyPass = new THREE.ShaderPass( THREE.CopyShader );
+				var copyPass = new THREE.ShaderPass( THREE.CopyShader );
 				copyPass.renderToScreen = true;
 				composer.addPass( copyPass );
 

examples/webgl_postprocessing_crossfade.html

@@ -41,22 +41,22 @@
 		<script src="js/crossfade/scenes.js"></script>
 		<script src="js/crossfade/gui.js"></script>
 		<script src="js/crossfade/transition.js"></script>
-		
+
 		<script>
 
 			var container, stats;
 			var renderer;
 			var transition;
-			
+
 			var clock = new THREE.Clock();
 
 			init();
 			animate();
-			
+
 			function init() {
 
 				initGUI();
-				
+
 				container = document.getElementById( "container" );
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
@@ -68,11 +68,11 @@
 				stats = new Stats();
 				container.appendChild( stats.dom );
 
-				sceneA = new Scene( "cube", 5000, 1200, 120, new THREE.Vector3(0,-0.4,0), 0xffffff );
-				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);
-				
+
 			}
 
 			function animate() {
@@ -83,15 +83,15 @@
 				stats.update();
 
 			}
-			
+
 			function render() {
-				
+
 				transition.render( clock.getDelta() );
-				
+
 			}
 
 		</script>
 
 	</body>
-	
+
 </html>

examples/webgl_postprocessing_dof.html

@@ -9,25 +9,25 @@
 				background-color: #000000;
 				margin: 0px;
 				overflow: hidden;
-				font-family:Monospace;
-				font-size:13px;
-				text-align:center;
+				font-family: Monospace;
+				font-size: 13px;
+				text-align: center;
 				font-weight: bold;
-				text-align:center;
+				text-align: center;
 			}
 
 			a {
-				color:#0078ff;
+				color: #0078ff;
 			}
 
 			#info {
-				color:#fff;
+				color: #fff;
 				position: relative;
 				top: 0px;
 				width: 50em;
 				margin: 0 auto -2.1em;
 				padding: 5px;
-				z-index:100;
+				z-index: 100;
 			}
 		</style>
 	</head>
@@ -122,23 +122,23 @@
 
 				nobjects = xgrid * ygrid * zgrid;
 
-				c = 0;
-
-				//var s = 0.25;
 				var s = 60;
+				var count = 0;
 
 				for ( i = 0; i < xgrid; i ++ )
 				for ( j = 0; j < ygrid; j ++ )
 				for ( k = 0; k < zgrid; k ++ ) {
 
+					var mesh;
+
 					if ( singleMaterial ) {
 
 						mesh = new THREE.Mesh( geo, zmaterial );
 
 					} else {
 
-						materials[ c ] = new THREE.MeshBasicMaterial( parameters );
-						mesh = new THREE.Mesh( geo, materials[ c ] );
+						mesh = new THREE.Mesh( geo, new THREE.MeshBasicMaterial( parameters ) );
+						materials[ count ] = mesh.material
 
 					}
 
@@ -155,7 +155,7 @@
 					scene.add( mesh );
 					objects.push( mesh );
 
-					c ++;
+					count ++;
 
 				}