Fixes from West, and mrdoobapproves cleanups

I won't reformat "-5.3" to be "- 5.3", etc. I didn't bother adding
spaces in the giant arrays of spline surface data.

examples/js/geometries/TeapotGeometry.js

@@ -53,6 +53,7 @@
 /*global THREE */
 
 THREE.TeapotGeometry = function ( size, segments, bottom, lid, body, fitLid, blinn ) {
+
 	"use strict";
 
 	// 32 * 4 * 4 Bezier spline patches
@@ -403,7 +404,7 @@ THREE.TeapotGeometry = function ( size, segments, bottom, lid, body, fitLid, bli
 	this.bottom = bottom === undefined ? true : bottom;
 	this.lid = lid === undefined ? true : lid;
 	this.body = body === undefined ? true : body;
-	
+
 	// Should the lid be snug? It's not traditional, so off by default
 	this.fitLid = fitLid === undefined ? false : fitLid;
 
@@ -418,7 +419,7 @@ THREE.TeapotGeometry = function ( size, segments, bottom, lid, body, fitLid, bli
 	this.blinn = blinn === undefined ? true : blinn;
 
 	// scale the size to be the real scaling factor
-	var maxHeight = 3.15 * (this.blinn ? 1 : blinnScale);
+	var maxHeight = 3.15 * ( this.blinn ? 1 : blinnScale );
 
 	var maxHeight2 = maxHeight / 2;
 	var trueSize = this.size / maxHeight2;
@@ -468,116 +469,139 @@ THREE.TeapotGeometry = function ( size, segments, bottom, lid, body, fitLid, bli
 	// internal function: test if triangle has any matching vertices;
 	// if so, don't save triangle, since it won't display anything.
 	var notDegenerate = function ( vtx1, vtx2, vtx3 ) {
-		if ( vtx1.equals( vtx2 ) ) { return false; }
-		if ( vtx1.equals( vtx3 ) ) { return false; }
-		if ( vtx2.equals( vtx3 ) ) { return false; }
-		return true;
+
+		// if any vertex matches, return false
+		return ! ( vtx1.equals( vtx2 ) || vtx1.equals( vtx3 ) || vtx2.equals( vtx3 ) );
+
 	};
 
 
-	for ( i = 0; i < 3; i++ )
+	for ( i = 0; i < 3; i ++ )
 	{
-		mgm[i] = new THREE.Matrix4();
+
+		mgm[ i ] = new THREE.Matrix4();
+
 	}
 
 	var minPatches = this.body ? 0 : 20;
 	var maxPatches = this.bottom ? 32 : 28;
 
-	vertPerRow = (this.segments+1);
+	vertPerRow = this.segments + 1;
 
 	eps = 0.0000001;
 
 	var surfCount = 0;
 
-	for ( var surf = minPatches ; surf < maxPatches ; surf++ ) {
+	for ( var surf = minPatches ; surf < maxPatches ; surf ++ ) {
+
 		// lid is in the middle of the data, patches 20-27,
 		// so ignore it for this part of the loop if the lid is not desired
-		if ( this.lid || (surf < 20 || surf >= 28) ) {
+		if ( this.lid || ( surf < 20 || surf >= 28 ) ) {
 
 			// get M * G * M matrix for x,y,z
-			for ( i = 0 ; i < 3 ; i++ ) {
+			for ( i = 0 ; i < 3 ; i ++ ) {
+
 				// get control patches
-				for ( r = 0 ; r < 4 ; r++ ) {
-					for ( c = 0 ; c < 4 ; c++ ) {
+				for ( r = 0 ; r < 4 ; r ++ ) {
+
+					for ( c = 0 ; c < 4 ; c ++ ) {
+
 						// transposed
-						g[c*4+r] = teapotVertices[teapotPatches[surf*16 + r*4 + c]*3 + i] ;
+						g[ c * 4 + r ] = teapotVertices[ teapotPatches[ surf * 16 + r * 4 + c ] * 3 + i ] ;
 
 						// is the lid to be made larger, and is this a point on the lid
 						// that is X or Y?
-						if ( this.fitLid && (surf >= 20 && surf < 28) && (i !== 2) ) {
+						if ( this.fitLid && ( surf >= 20 && surf < 28 ) && ( i !== 2 ) ) {
+
 							// increase XY size by 7.7%, found empirically. I don't
 							// increase Z so that the teapot will continue to fit in the
 							// space -1 to 1 for Y (Y is up for the final model).
-							g[c*4+r] *= 1.077;
+							g[ c * 4 + r ] *= 1.077;
+
 						}
 
 						// Blinn "fixed" the teapot by dividing Z by blinnScale, and that's the
 						// data we now use. The original teapot is taller. Fix it:
-						if ( !this.blinn && (i === 2) ) {
-							g[c*4+r] *= blinnScale;
+						if ( ! this.blinn && ( i === 2 ) ) {
+
+							g[ c * 4 + r ] *= blinnScale;
+
 						}
+
 					}
+
 				}
 
 				gmx = new THREE.Matrix4();
-				gmx.set( g[0], g[1], g[2], g[3], g[4], g[5], g[6], g[7], g[8], g[9], g[10], g[11], g[12], g[13], g[14], g[15] );
+				gmx.set( g[ 0 ], g[ 1 ], g[ 2 ], g[ 3 ], g[ 4 ], g[ 5 ], g[ 6 ], g[ 7 ], g[ 8 ], g[ 9 ], g[ 10 ], g[ 11 ], g[ 12 ], g[ 13 ], g[ 14 ], g[ 15 ] );
 
 				tmtx = new THREE.Matrix4();
 				tmtx.multiplyMatrices( gmx, ms );
-				mgm[i].multiplyMatrices( mst, tmtx );
+				mgm[ i ].multiplyMatrices( mst, tmtx );
+
 			}
 
 			// step along, get points, and output
-			for ( sstep = 0 ; sstep <= this.segments ; sstep++ ) {
+			for ( sstep = 0 ; sstep <= this.segments ; sstep ++ ) {
+
 				s = sstep / this.segments;
 
-				for ( tstep = 0 ; tstep <= this.segments ; tstep++ ) {
+				for ( tstep = 0 ; tstep <= this.segments ; tstep ++ ) {
+
 					t = tstep / this.segments;
 
 					// point from basis
 					// get power vectors and their derivatives
-					for ( p = 4, sval = tval = 1.0 ; p-- ; ) {
-						sp[p] = sval ;
-						tp[p] = tval ;
+					for ( p = 4, sval = tval = 1.0 ; p -- ; ) {
+
+						sp[ p ] = sval ;
+						tp[ p ] = tval ;
 						sval *= s ;
 						tval *= t ;
 
 						if ( p === 3 ) {
-							dsp[p] = dtp[p] = 0.0 ;
+
+							dsp[ p ] = dtp[ p ] = 0.0 ;
 							dsval = dtval = 1.0 ;
+
 						} else {
-							dsp[p] = dsval * (3-p) ;
-							dtp[p] = dtval * (3-p) ;
+
+							dsp[ p ] = dsval * ( 3 - p ) ;
+							dtp[ p ] = dtval * ( 3 - p ) ;
 							dsval *= s ;
 							dtval *= t ;
+
 						}
+
 					}
 
-					vsp = new THREE.Vector4( sp[0], sp[1], sp[2], sp[3] );
-					vtp = new THREE.Vector4( tp[0], tp[1], tp[2], tp[3] );
-					vdsp = new THREE.Vector4( dsp[0], dsp[1], dsp[2], dsp[3] );
-					vdtp = new THREE.Vector4( dtp[0], dtp[1], dtp[2], dtp[3] );
+					vsp = new THREE.Vector4( sp[ 0 ], sp[ 1 ], sp[ 2 ], sp[ 3 ] );
+					vtp = new THREE.Vector4( tp[ 0 ], tp[ 1 ], tp[ 2 ], tp[ 3 ] );
+					vdsp = new THREE.Vector4( dsp[ 0 ], dsp[ 1 ], dsp[ 2 ], dsp[ 3 ] );
+					vdtp = new THREE.Vector4( dtp[ 0 ], dtp[ 1 ], dtp[ 2 ], dtp[ 3 ] );
 
 					// do for x,y,z
-					for ( i = 0 ; i < 3 ; i++ ) {
+					for ( i = 0 ; i < 3 ; i ++ ) {
+
 						// multiply power vectors times matrix to get value
 						tcoord = vsp.clone();
-						tcoord.applyMatrix4( mgm[i] );
-						vert[i] = tcoord.dot( vtp );
+						tcoord.applyMatrix4( mgm[ i ] );
+						vert[ i ] = tcoord.dot( vtp );
 
 						// get s and t tangent vectors
 						tcoord = vdsp.clone();
-						tcoord.applyMatrix4( mgm[i] );
-						sdir[i] = tcoord.dot( vtp ) ;
+						tcoord.applyMatrix4( mgm[ i ] );
+						sdir[ i ] = tcoord.dot( vtp ) ;
 
 						tcoord = vsp.clone();
-						tcoord.applyMatrix4( mgm[i] );
-						tdir[i] = tcoord.dot( vdtp ) ;
+						tcoord.applyMatrix4( mgm[ i ] );
+						tdir[ i ] = tcoord.dot( vdtp ) ;
+
 					}
 
 					// find normal
-					vsdir = new THREE.Vector3( sdir[0], sdir[1], sdir[2] );
-					vtdir = new THREE.Vector3( tdir[0], tdir[1], tdir[2] );
+					vsdir = new THREE.Vector3( sdir[ 0 ], sdir[ 1 ], sdir[ 2 ] );
+					vtdir = new THREE.Vector3( tdir[ 0 ], tdir[ 1 ], tdir[ 2 ] );
 					norm.crossVectors( vtdir, vsdir );
 					norm.normalize();
 
@@ -585,48 +609,65 @@ THREE.TeapotGeometry = function ( size, segments, bottom, lid, body, fitLid, bli
 					normOut = new THREE.Vector3( norm.x, norm.z, -norm.y );
 
 					// if X and Z length is 0, at the cusp, so point the normal up or down, depending on patch number
-					if ( vert[0] === 0 && vert[1] === 0 )
+					if ( vert[ 0 ] === 0 && vert[ 1 ] === 0 )
 					{
+
 						// if above the middle of the teapot, normal points up, else down
-						normOut.set( 0, vert[2] > maxHeight2 ? 1 : -1, 0 );
+						normOut.set( 0, vert[ 2 ] > maxHeight2 ? 1 : -1, 0 );
+
 					}
 					normals.push( normOut );
 
-					uvs.push( new THREE.Vector2( 1-t, 1-s ) );
+					uvs.push( new THREE.Vector2( 1 - t, 1 - s ) );
 
 					// three.js uses Y up, the code makes Z up, so time for a trick:
 					// rotate on X axis, and offset down on Y axis so object ranges from -1 to 1 in Y
-					vertOut = new THREE.Vector3( trueSize*vert[0], trueSize*(vert[2] - maxHeight2), -trueSize*vert[1] );
+					vertOut = new THREE.Vector3( trueSize * vert[ 0 ], trueSize * ( vert[ 2 ] - maxHeight2 ), -trueSize * vert[ 1 ] );
 
 					this.vertices.push( vertOut );
 
 				}
+
 			}
 
 			// save the faces
-			for ( sstep = 0 ; sstep < this.segments ; sstep++ ) {
-				for ( tstep = 0 ; tstep < this.segments ; tstep++ ) {
+			for ( sstep = 0 ; sstep < this.segments ; sstep ++ ) {
+
+				for ( tstep = 0 ; tstep < this.segments ; tstep ++ ) {
+
 					v1 = surfCount * vertPerRow * vertPerRow + sstep * vertPerRow + tstep;
 					v2 = v1 + 1;
 					v3 = v2 + vertPerRow;
 					v4 = v1 + vertPerRow;
 
-					if ( notDegenerate ( this.vertices[v1], this.vertices[v2], this.vertices[v3] ) ) {
-						this.faces.push( new THREE.Face3( v1, v2, v3, [ normals[v1], normals[v2], normals[v3] ] ) );
-						this.faceVertexUvs[ 0 ].push( [ uvs[v1], uvs[v2], uvs[v3] ] );
+					// Normals and UVs cannot be shared. Without clone(), you can see the consequences
+					// of sharing if you call geometry.applyMatrix( matrix ).
+					if ( notDegenerate ( this.vertices[ v1 ], this.vertices[ v2 ], this.vertices[ v3 ] ) ) {
+
+						this.faces.push( new THREE.Face3( v1, v2, v3, [ normals[ v1 ].clone(), normals[ v2 ].clone(), normals[ v3 ].clone() ] ) );
+						this.faceVertexUvs[ 0 ].push( [ uvs[ v1 ].clone(), uvs[ v2 ].clone(), uvs[ v3 ].clone() ] );
+
 					}
-					if ( notDegenerate ( this.vertices[v1], this.vertices[v3], this.vertices[v4] ) ) {
-						this.faces.push( new THREE.Face3( v1, v3, v4, [ normals[v1], normals[v3], normals[v4] ] ) );
-						this.faceVertexUvs[ 0 ].push( [ uvs[v1], uvs[v3], uvs[v4] ] );
+					if ( notDegenerate ( this.vertices[ v1 ], this.vertices[ v3 ], this.vertices[ v4 ] ) ) {
+
+						this.faces.push( new THREE.Face3( v1, v3, v4, [ normals[ v1 ].clone(), normals[ v3 ].clone(), normals[ v4 ].clone() ] ) );
+						this.faceVertexUvs[ 0 ].push( [ uvs[ v1 ].clone(), uvs[ v3 ].clone(), uvs[ v4 ].clone() ] );
+
 					}
+
 				}
+
 			}
+
 			// increment only if a surface was used
-			surfCount++;
+			surfCount ++;
+
 		}
+
 	}
 
 	this.computeFaceNormals();
+
 };
 
 

examples/webgl_geometry_teapot.html

@@ -75,10 +75,15 @@
 			var shading;
 			var wireMaterial, flatGouraudMaterial, gouraudMaterial, phongMaterial, texturedMaterial, reflectiveMaterial;
 
+			// allocate these just once
+			var diffuseColor = new THREE.Color();
+			var specularColor = new THREE.Color();
+
 			init();
 			animate();
 
 			function init() {
+
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
@@ -114,7 +119,7 @@
 
 				// CONTROLS
 				cameraControls = new THREE.OrbitControls( camera, renderer.domElement );
-				cameraControls.target.set(0, 0, 0);
+				cameraControls.target.set( 0, 0, 0 );
 
 				// TEXTURE MAP
 				var textureMap = THREE.ImageUtils.loadTexture( 'textures/UV_Grid_Sm.jpg' );
@@ -123,9 +128,9 @@
 
 				// REFLECTION MAP
 				var path = "textures/cube/skybox/";
-				var urls = [path + "px.jpg", path + "nx.jpg",
-							path + "py.jpg", path + "ny.jpg",
-							path + "pz.jpg", path + "nz.jpg" ];
+				var urls = [ path + "px.jpg", path + "nx.jpg",
+							 path + "py.jpg", path + "ny.jpg",
+							 path + "pz.jpg", path + "nz.jpg" ];
 
 				var textureCube = THREE.ImageUtils.loadTextureCube( urls );
 
@@ -179,8 +184,9 @@
 
 				renderer.setSize( canvasWidth, canvasHeight );
 
-				camera.aspect = canvasWidth/ canvasHeight;
+				camera.aspect = canvasWidth / canvasHeight;
 				camera.updateProjectionMatrix();
+
 			}
 
 			function setupGui() {
@@ -223,46 +229,47 @@
 
 				h = gui.addFolder( "Material control" );
 
-				h.add( effectController, "shininess", 1.0, 400.0, 1.0 ).name("Shininess");
-				h.add( effectController, "ka", 0.0, 1.0, 0.025 ).name("Ka");
-				h.add( effectController, "kd", 0.0, 1.0, 0.025 ).name("Kd");
-				h.add( effectController, "ks", 0.0, 1.0, 0.025 ).name("Ks");
+				h.add( effectController, "shininess", 1.0, 400.0, 1.0 ).name( "shininess" );
+				h.add( effectController, "kd", 0.0, 1.0, 0.025 ).name( "diffuse strength" );
+				h.add( effectController, "ks", 0.0, 1.0, 0.025 ).name( "specular strength" );
 				h.add( effectController, "metallic" );
 
 				// material (color)
 
 				h = gui.addFolder( "Material color" );
 
-				h.add( effectController, "hue", 0.0, 1.0, 0.025 ).name("Hue");
-				h.add( effectController, "saturation", 0.0, 1.0, 0.025 ).name("Saturation");
-				h.add( effectController, "lightness", 0.0, 1.0, 0.025 ).name("Lightness");
+				h.add( effectController, "hue", 0.0, 1.0, 0.025 ).name( "hue" );
+				h.add( effectController, "saturation", 0.0, 1.0, 0.025 ).name( "saturation" );
+				h.add( effectController, "lightness", 0.0, 1.0, 0.025 ).name( "lightness" );
 
 				// light (point)
 
-				h = gui.addFolder( "Light color" );
+				h = gui.addFolder( "Lighting" );
 
-				h.add( effectController, "lhue", 0.0, 1.0, 0.025 ).name("Hue");
-				h.add( effectController, "lsaturation", 0.0, 1.0, 0.025 ).name("Saturation");
-				h.add( effectController, "llightness", 0.0, 1.0, 0.025 ).name("Lightness");
+				h.add( effectController, "lhue", 0.0, 1.0, 0.025 ).name( "hue" );
+				h.add( effectController, "lsaturation", 0.0, 1.0, 0.025 ).name( "saturation" );
+				h.add( effectController, "llightness", 0.0, 1.0, 0.025 ).name( "lightness" );
+				h.add( effectController, "ka", 0.0, 1.0, 0.025 ).name( "ambient" );
 
 				// light (directional)
 
 				h = gui.addFolder( "Light direction" );
 
-				h.add( effectController, "lx", -1.0, 1.0, 0.025 ).name("x");
-				h.add( effectController, "ly", -1.0, 1.0, 0.025 ).name("y");
-				h.add( effectController, "lz", -1.0, 1.0, 0.025 ).name("z");
+				h.add( effectController, "lx", -1.0, 1.0, 0.025 ).name( "x" );
+				h.add( effectController, "ly", -1.0, 1.0, 0.025 ).name( "y" );
+				h.add( effectController, "lz", -1.0, 1.0, 0.025 ).name( "z" );
 
 				h = gui.addFolder( "Tessellation control" );
-				h.add(effectController, "newTess", [2,3,4,5,6,8,10,15,20,30,40,50] ).name("Tessellation Level");
-				h.add(effectController, "lid").name("display lid");
-				h.add(effectController, "body").name("display body");
-				h.add(effectController, "bottom").name("display bottom");
-				h.add(effectController, "fitLid").name("snug lid");
-				h.add(effectController, "nonblinn").name("original scale");
+				h.add( effectController, "newTess", [ 2, 3, 4, 5, 6, 8, 10, 15, 20, 30, 40, 50 ] ).name( "Tessellation Level" );
+				h.add( effectController, "lid" ).name( "display lid" );
+				h.add( effectController, "body" ).name( "display body" );
+				h.add( effectController, "bottom" ).name( "display bottom" );
+				h.add( effectController, "fitLid" ).name( "snug lid" );
+				h.add( effectController, "nonblinn" ).name( "original scale" );
 
 				// shading
-				h = gui.add(effectController, "newShading", ["wireframe","flat","smooth","glossy","textured","reflective"] ).name("Shading");
+				h = gui.add( effectController, "newShading", [ "wireframe", "flat", "smooth", "glossy", "textured", "reflective" ] ).name( "Shading" );
+
 			}
 
 
@@ -288,8 +295,9 @@
 					effectController.body !== bBody ||
 					effectController.fitLid !== bFitLid ||
 					effectController.nonblinn !== bNonBlinn ||
-					effectController.newShading !== shading)
+					effectController.newShading !== shading )
 				{
+
 					tess = effectController.newTess;
 					bBottom = effectController.bottom;
 					bLid = effectController.lid;
@@ -299,32 +307,37 @@
 					shading = effectController.newShading;
 
 					fillScene();
+
 				}
 
+				// We're a bit lazy here. We could check to see if any material attributes changed and update
+				// only if they have. But, these calls are cheap enough and this is just a demo.
 				phongMaterial.shininess = effectController.shininess;
 				texturedMaterial.shininess = effectController.shininess;
 
-				var diffuseColor = new THREE.Color();
 				diffuseColor.setHSL( effectController.hue, effectController.saturation, effectController.lightness );
-				var specularColor = new THREE.Color();
 				if ( effectController.metallic )
 				{
+
 					// make colors match to give a more metallic look
 					specularColor.copy( diffuseColor );
+
 				}
 				else
 				{
+
 					// more of a plastic look
-					specularColor.setRGB(1,1,1);
+					specularColor.setRGB( 1, 1, 1 );
+
 				}
 
-				diffuseColor.multiplyScalar(effectController.kd);
+				diffuseColor.multiplyScalar( effectController.kd );
 				flatGouraudMaterial.color.copy( diffuseColor );
 				gouraudMaterial.color.copy( diffuseColor );
 				phongMaterial.color.copy( diffuseColor );
 				texturedMaterial.color.copy( diffuseColor );
 
-				specularColor.multiplyScalar(effectController.ks);
+				specularColor.multiplyScalar( effectController.ks );
 				phongMaterial.specular.copy( specularColor );
 				texturedMaterial.specular.copy( specularColor );
 
@@ -333,29 +346,33 @@
 
 				light.position.set( effectController.lx, effectController.ly, effectController.lz );
 				light.color.setHSL( effectController.lhue, effectController.lsaturation, effectController.llightness );
-				
+
 				// skybox is rendered separately, so that it is always behind the teapot.
 				if ( shading === "reflective" )
 				{
+
 					// clear to skybox
 					renderer.autoClear = false;
 					skybox.position.copy( camera.position );
 					renderer.render( sceneCube, camera );
+
 				}
 				else
 				{
+
 					// clear to regular background color
 					renderer.autoClear = true;
+
 				}
 
 				renderer.render( scene, camera );
+
 			}
 
+			// Whenever the teapot changes, the scene is rebuilt from scratch (not much to it).
 			function fillScene() {
-				scene = new THREE.Scene();
-				//scene.fog = new THREE.Fog( 0x808080, 2000, 4000 );
 
-				// LIGHTS
+				scene = new THREE.Scene();
 
 				scene.add( ambientLight );
 				scene.add( light );
@@ -367,14 +384,15 @@
 							effectController.lid,
 							effectController.body,
 							effectController.fitLid,
-							!effectController.nonblinn ),
+							! effectController.nonblinn ),
 					shading === "wireframe" ? wireMaterial : (
 					shading === "flat" ? flatGouraudMaterial : (
 					shading === "smooth" ? gouraudMaterial : (
 					shading === "glossy" ? phongMaterial : (
-					shading === "textured" ? texturedMaterial : reflectiveMaterial )))));	// if no match, pick Phong
+					shading === "textured" ? texturedMaterial : reflectiveMaterial ) ) ) ) );	// if no match, pick Phong
 
 				scene.add( teapot );
+
 			}
 
 		</script>