Docs: Clean up geometry.js and material.js

docs/scenes/js/geometry.js

@@ -4,74 +4,6 @@
 
 var twoPi = Math.PI * 2;
 
-var constants = {
-
-	combine: {
-
-		"THREE.MultiplyOperation" : THREE.MultiplyOperation,
-		"THREE.MixOperation" : THREE.MixOperation,
-		"THREE.AddOperation" : THREE.AddOperation
-
-	},
-
-	side : {
-
-		"THREE.FrontSide" : THREE.FrontSide,
-		"THREE.BackSide" : THREE.BackSide,
-		"THREE.DoubleSide" : THREE.DoubleSide
-
-	},
-
-	colors : {
-
-		"THREE.NoColors" : THREE.NoColors,
-		"THREE.FaceColors" : THREE.FaceColors,
-		"THREE.VertexColors" : THREE.VertexColors
-
-	},
-
-	blendingMode : {
-
-		"THREE.NoBlending" : THREE.NoBlending,
-		"THREE.NormalBlending" : THREE.NormalBlending,
-		"THREE.AdditiveBlending" : THREE.AdditiveBlending,
-		"THREE.SubtractiveBlending" : THREE.SubtractiveBlending,
-		"THREE.MultiplyBlending" : THREE.MultiplyBlending,
-		"THREE.CustomBlending" : THREE.CustomBlending
-
-	},
-
-	equations : {
-
-		"THREE.AddEquation" : THREE.AddEquation,
-		"THREE.SubtractEquation" : THREE.SubtractEquation,
-		"THREE.ReverseSubtractEquation" : THREE.ReverseSubtractEquation
-
-	},
-
-	destinationFactors : {
-
-		"THREE.ZeroFactor" : THREE.ZeroFactor,
-		"THREE.OneFactor" : THREE.OneFactor,
-		"THREE.SrcColorFactor" : THREE.SrcColorFactor,
-		"THREE.OneMinusSrcColorFactor" : THREE.OneMinusSrcColorFactor,
-		"THREE.SrcAlphaFactor" : THREE.SrcAlphaFactor,
-		"THREE.OneMinusSrcAlphaFactor" : THREE.OneMinusSrcAlphaFactor,
-		"THREE.DstAlphaFactor" : THREE.DstAlphaFactor,
-		"THREE.OneMinusDstAlphaFactor" : THREE.OneMinusDstAlphaFactor
-
-	},
-
-	sourceFactors : {
-
-		"THREE.DstColorFactor" : THREE.DstColorFactor,
-		"THREE.OneMinusDstColorFactor" : THREE.OneMinusDstColorFactor,
-		"THREE.SrcAlphaSaturateFactor" : THREE.SrcAlphaSaturateFactor
-
-	}
-
-};
-
 function updateGroupGeometry( mesh, geometry ) {
 
 	mesh.children[ 0 ].geometry.dispose();
@@ -113,7 +45,7 @@ var heartShape = new THREE.Shape();
 
 heartShape.moveTo( x + 5, y + 5 );
 heartShape.bezierCurveTo( x + 5, y + 5, x + 4, y, x, y );
-heartShape.bezierCurveTo( x - 6, y, x - 6, y + 7,x - 6, y + 7 );
+heartShape.bezierCurveTo( x - 6, y, x - 6, y + 7, x - 6, y + 7 );
 heartShape.bezierCurveTo( x - 6, y + 11, x - 3, y + 15.4, x + 5, y + 19 );
 heartShape.bezierCurveTo( x + 12, y + 15.4, x + 16, y + 11, x + 16, y + 7 );
 heartShape.bezierCurveTo( x + 16, y + 7, x + 16, y, x + 10, y );
@@ -121,15 +53,15 @@ heartShape.bezierCurveTo( x + 7, y, x + 5, y + 5, x + 5, y + 5 );
 
 var guis = {
 
-	BoxBufferGeometry : function( mesh ) {
+	BoxBufferGeometry: function ( mesh ) {
 
 		var data = {
-			width : 15,
-			height : 15,
-			depth : 15,
-			widthSegments : 1,
-			heightSegments : 1,
-			depthSegments : 1
+			width: 15,
+			height: 15,
+			depth: 15,
+			widthSegments: 1,
+			heightSegments: 1,
+			depthSegments: 1
 		};
 
 		function generateGeometry() {
@@ -155,15 +87,15 @@ var guis = {
 
 	},
 
-	BoxGeometry : function( mesh ) {
+	BoxGeometry: function ( mesh ) {
 
 		var data = {
-			width : 15,
-			height : 15,
-			depth : 15,
-			widthSegments : 1,
-			heightSegments : 1,
-			depthSegments : 1
+			width: 15,
+			height: 15,
+			depth: 15,
+			widthSegments: 1,
+			heightSegments: 1,
+			depthSegments: 1
 		};
 
 		function generateGeometry() {
@@ -189,17 +121,17 @@ var guis = {
 
 	},
 
-	CylinderBufferGeometry : function( mesh ) {
+	CylinderBufferGeometry: function ( mesh ) {
 
 		var data = {
-			radiusTop : 5,
-			radiusBottom : 5,
-			height : 10,
-			radiusSegments : 8,
-			heightSegments : 1,
-			openEnded : false,
-			thetaStart : 0,
-			thetaLength : twoPi
+			radiusTop: 5,
+			radiusBottom: 5,
+			height: 10,
+			radiusSegments: 8,
+			heightSegments: 1,
+			openEnded: false,
+			thetaStart: 0,
+			thetaLength: twoPi
 		};
 
 		function generateGeometry() {
@@ -235,17 +167,17 @@ var guis = {
 
 	},
 
-	CylinderGeometry : function( mesh ) {
+	CylinderGeometry: function ( mesh ) {
 
 		var data = {
-			radiusTop : 5,
-			radiusBottom : 5,
-			height : 10,
-			radiusSegments : 8,
-			heightSegments : 1,
-			openEnded : false,
-			thetaStart : 0,
-			thetaLength : twoPi
+			radiusTop: 5,
+			radiusBottom: 5,
+			height: 10,
+			radiusSegments: 8,
+			heightSegments: 1,
+			openEnded: false,
+			thetaStart: 0,
+			thetaLength: twoPi
 		};
 
 		function generateGeometry() {
@@ -281,16 +213,16 @@ var guis = {
 
 	},
 
-	ConeBufferGeometry : function( mesh ) {
+	ConeBufferGeometry: function ( mesh ) {
 
 		var data = {
-			radius : 5,
-			height : 10,
-			radiusSegments : 8,
-			heightSegments : 1,
-			openEnded : false,
-			thetaStart : 0,
-			thetaLength : twoPi
+			radius: 5,
+			height: 10,
+			radiusSegments: 8,
+			heightSegments: 1,
+			openEnded: false,
+			thetaStart: 0,
+			thetaLength: twoPi
 		};
 
 		function generateGeometry() {
@@ -324,16 +256,16 @@ var guis = {
 
 	},
 
-	ConeGeometry : function( mesh ) {
+	ConeGeometry: function ( mesh ) {
 
 		var data = {
-			radius : 5,
-			height : 10,
-			radiusSegments : 8,
-			heightSegments : 1,
-			openEnded : false,
-			thetaStart : 0,
-			thetaLength : twoPi
+			radius: 5,
+			height: 10,
+			radiusSegments: 8,
+			heightSegments: 1,
+			openEnded: false,
+			thetaStart: 0,
+			thetaLength: twoPi
 		};
 
 		function generateGeometry() {
@@ -368,13 +300,13 @@ var guis = {
 	},
 
 
-	CircleBufferGeometry : function( mesh ) {
+	CircleBufferGeometry: function ( mesh ) {
 
 		var data = {
-			radius : 10,
-			segments : 32,
-			thetaStart : 0,
-			thetaLength : twoPi
+			radius: 10,
+			segments: 32,
+			thetaStart: 0,
+			thetaLength: twoPi
 		};
 
 		function generateGeometry() {
@@ -398,13 +330,13 @@ var guis = {
 
 	},
 
-	CircleGeometry : function( mesh ) {
+	CircleGeometry: function ( mesh ) {
 
 		var data = {
-			radius : 10,
-			segments : 32,
-			thetaStart : 0,
-			thetaLength : twoPi
+			radius: 10,
+			segments: 32,
+			thetaStart: 0,
+			thetaLength: twoPi
 		};
 
 		function generateGeometry() {
@@ -428,11 +360,11 @@ var guis = {
 
 	},
 
-	DodecahedronGeometry : function() {
+	DodecahedronGeometry: function ( mesh ) {
 
 		var data = {
-			radius : 10,
-			detail : 0
+			radius: 10,
+			detail: 0
 		};
 
 		function generateGeometry() {
@@ -454,11 +386,11 @@ var guis = {
 
 	},
 
-	DodecahedronBufferGeometry : function() {
+	DodecahedronBufferGeometry: function ( mesh ) {
 
 		var data = {
-			radius : 10,
-			detail : 0
+			radius: 10,
+			detail: 0
 		};
 
 		function generateGeometry() {
@@ -480,11 +412,11 @@ var guis = {
 
 	},
 
-	IcosahedronGeometry : function() {
+	IcosahedronGeometry: function ( mesh ) {
 
 		var data = {
-			radius : 10,
-			detail : 0
+			radius: 10,
+			detail: 0
 		};
 
 		function generateGeometry() {
@@ -506,11 +438,11 @@ var guis = {
 
 	},
 
-	IcosahedronBufferGeometry : function() {
+	IcosahedronBufferGeometry: function ( mesh ) {
 
 		var data = {
-			radius : 10,
-			detail : 0
+			radius: 10,
+			detail: 0
 		};
 
 		function generateGeometry() {
@@ -532,7 +464,7 @@ var guis = {
 
 	},
 
-	LatheBufferGeometry : function() {
+	LatheBufferGeometry: function ( mesh ) {
 
 		var points = [];
 
@@ -543,9 +475,9 @@ var guis = {
 		}
 
 		var data = {
-			segments : 12,
-			phiStart : 0,
-			phiLength : twoPi
+			segments: 12,
+			phiStart: 0,
+			phiLength: twoPi
 		};
 
 		function generateGeometry() {
@@ -568,7 +500,7 @@ var guis = {
 
 	},
 
-	LatheGeometry : function() {
+	LatheGeometry: function ( mesh ) {
 
 		var points = [];
 
@@ -579,9 +511,9 @@ var guis = {
 		}
 
 		var data = {
-			segments : 12,
-			phiStart : 0,
-			phiLength : twoPi
+			segments: 12,
+			phiStart: 0,
+			phiLength: twoPi
 		};
 
 		function generateGeometry() {
@@ -604,11 +536,11 @@ var guis = {
 
 	},
 
-	OctahedronGeometry : function() {
+	OctahedronGeometry: function ( mesh ) {
 
 		var data = {
-			radius : 10,
-			detail : 0
+			radius: 10,
+			detail: 0
 		};
 
 		function generateGeometry() {
@@ -630,11 +562,11 @@ var guis = {
 
 	},
 
-	OctahedronBufferGeometry : function() {
+	OctahedronBufferGeometry: function ( mesh ) {
 
 		var data = {
-			radius : 10,
-			detail : 0
+			radius: 10,
+			detail: 0
 		};
 
 		function generateGeometry() {
@@ -656,13 +588,13 @@ var guis = {
 
 	},
 
-	PlaneBufferGeometry : function( mesh ) {
+	PlaneBufferGeometry: function ( mesh ) {
 
 		var data = {
-			width : 10,
-			height : 10,
-			widthSegments : 1,
-			heightSegments : 1
+			width: 10,
+			height: 10,
+			widthSegments: 1,
+			heightSegments: 1
 		};
 
 		function generateGeometry() {
@@ -686,13 +618,13 @@ var guis = {
 
 	},
 
-	PlaneGeometry : function( mesh ) {
+	PlaneGeometry: function ( mesh ) {
 
 		var data = {
-			width : 10,
-			height : 10,
-			widthSegments : 1,
-			heightSegments : 1
+			width: 10,
+			height: 10,
+			widthSegments: 1,
+			heightSegments: 1
 		};
 
 		function generateGeometry() {
@@ -716,15 +648,15 @@ var guis = {
 
 	},
 
-	RingBufferGeometry : function( mesh ) {
+	RingBufferGeometry: function ( mesh ) {
 
 		var data = {
-			innerRadius : 5,
-			outerRadius : 10,
-			thetaSegments : 8,
-			phiSegments : 8,
-			thetaStart : 0,
-			thetaLength : twoPi
+			innerRadius: 5,
+			outerRadius: 10,
+			thetaSegments: 8,
+			phiSegments: 8,
+			thetaStart: 0,
+			thetaLength: twoPi
 		};
 
 		function generateGeometry() {
@@ -750,15 +682,15 @@ var guis = {
 
 	},
 
-	RingGeometry : function( mesh ) {
+	RingGeometry: function ( mesh ) {
 
 		var data = {
-			innerRadius : 5,
-			outerRadius : 10,
-			thetaSegments : 8,
-			phiSegments : 8,
-			thetaStart : 0,
-			thetaLength : twoPi
+			innerRadius: 5,
+			outerRadius: 10,
+			thetaSegments: 8,
+			phiSegments: 8,
+			thetaStart: 0,
+			thetaLength: twoPi
 		};
 
 		function generateGeometry() {
@@ -784,16 +716,16 @@ var guis = {
 
 	},
 
-	SphereBufferGeometry : function( mesh ) {
+	SphereBufferGeometry: function ( mesh ) {
 
 		var data = {
-			radius : 15,
-			widthSegments : 8,
-			heightSegments : 6,
-			phiStart : 0,
-			phiLength : twoPi,
-			thetaStart : 0,
-			thetaLength : Math.PI
+			radius: 15,
+			widthSegments: 8,
+			heightSegments: 6,
+			phiStart: 0,
+			phiLength: twoPi,
+			thetaStart: 0,
+			thetaLength: Math.PI
 		};
 
 		function generateGeometry() {
@@ -820,16 +752,16 @@ var guis = {
 
 	},
 
-	SphereGeometry : function( mesh ) {
+	SphereGeometry: function ( mesh ) {
 
 		var data = {
-			radius : 15,
-			widthSegments : 8,
-			heightSegments : 6,
-			phiStart : 0,
-			phiLength : twoPi,
-			thetaStart : 0,
-			thetaLength : Math.PI
+			radius: 15,
+			widthSegments: 8,
+			heightSegments: 6,
+			phiStart: 0,
+			phiLength: twoPi,
+			thetaStart: 0,
+			thetaLength: Math.PI
 		};
 
 		function generateGeometry() {
@@ -856,11 +788,11 @@ var guis = {
 
 	},
 
-	TetrahedronGeometry : function() {
+	TetrahedronGeometry: function ( mesh ) {
 
 		var data = {
-			radius : 10,
-			detail : 0
+			radius: 10,
+			detail: 0
 		};
 
 		function generateGeometry() {
@@ -882,11 +814,11 @@ var guis = {
 
 	},
 
-	TetrahedronBufferGeometry : function() {
+	TetrahedronBufferGeometry: function ( mesh ) {
 
 		var data = {
-			radius : 10,
-			detail : 0
+			radius: 10,
+			detail: 0
 		};
 
 		function generateGeometry() {
@@ -908,19 +840,19 @@ var guis = {
 
 	},
 
-	TextGeometry : function( mesh ) {
+	TextGeometry: function ( mesh ) {
 
 		var data = {
-			text : "TextGeometry",
-			size : 5,
-			height : 2,
-			curveSegments : 12,
-			font : "helvetiker",
-			weight : "regular",
-			bevelEnabled : false,
-			bevelThickness : 1,
-			bevelSize : 0.5,
-			bevelSegments : 3
+			text: "TextGeometry",
+			size: 5,
+			height: 2,
+			curveSegments: 12,
+			font: "helvetiker",
+			weight: "regular",
+			bevelEnabled: false,
+			bevelThickness: 1,
+			bevelSize: 0.5,
+			bevelSegments: 3
 		};
 
 		var fonts = [
@@ -977,19 +909,19 @@ var guis = {
 
 	},
 
-	TextBufferGeometry : function( mesh ) {
+	TextBufferGeometry: function ( mesh ) {
 
 		var data = {
-			text : "TextBufferGeometry",
-			size : 5,
-			height : 2,
-			curveSegments : 12,
-			font : "helvetiker",
-			weight : "regular",
-			bevelEnabled : false,
-			bevelThickness : 1,
-			bevelSize : 0.5,
-			bevelSegments : 3
+			text: "TextBufferGeometry",
+			size: 5,
+			height: 2,
+			curveSegments: 12,
+			font: "helvetiker",
+			weight: "regular",
+			bevelEnabled: false,
+			bevelThickness: 1,
+			bevelSize: 0.5,
+			bevelSegments: 3
 		};
 
 		var fonts = [
@@ -1046,14 +978,14 @@ var guis = {
 
 	},
 
-	TorusBufferGeometry : function( mesh ) {
+	TorusBufferGeometry: function ( mesh ) {
 
 		var data = {
-			radius : 10,
-			tube : 3,
-			radialSegments : 16,
-			tubularSegments : 100,
-			arc : twoPi
+			radius: 10,
+			tube: 3,
+			radialSegments: 16,
+			tubularSegments: 100,
+			arc: twoPi
 		};
 
 		function generateGeometry() {
@@ -1078,14 +1010,14 @@ var guis = {
 
 	},
 
-	TorusGeometry : function( mesh ) {
+	TorusGeometry: function ( mesh ) {
 
 		var data = {
-			radius : 10,
-			tube : 3,
-			radialSegments : 16,
-			tubularSegments : 100,
-			arc : twoPi
+			radius: 10,
+			tube: 3,
+			radialSegments: 16,
+			tubularSegments: 100,
+			arc: twoPi
 		};
 
 		function generateGeometry() {
@@ -1110,15 +1042,15 @@ var guis = {
 
 	},
 
-	TorusKnotBufferGeometry : function( mesh ) {
+	TorusKnotBufferGeometry: function ( mesh ) {
 
 		var data = {
-			radius : 10,
-			tube : 3,
-			tubularSegments : 64,
-			radialSegments : 8,
-			p : 2,
-			q : 3
+			radius: 10,
+			tube: 3,
+			tubularSegments: 64,
+			radialSegments: 8,
+			p: 2,
+			q: 3
 		};
 
 		function generateGeometry() {
@@ -1145,15 +1077,15 @@ var guis = {
 
 	},
 
-	TorusKnotGeometry : function( mesh ) {
+	TorusKnotGeometry: function ( mesh ) {
 
 		var data = {
-			radius : 10,
-			tube : 3,
-			tubularSegments : 64,
-			radialSegments : 8,
-			p : 2,
-			q : 3
+			radius: 10,
+			tube: 3,
+			tubularSegments: 64,
+			radialSegments: 8,
+			p: 2,
+			q: 3
 		};
 
 		function generateGeometry() {
@@ -1180,11 +1112,11 @@ var guis = {
 
 	},
 
-	ParametricBufferGeometry : function( mesh ) {
+	ParametricBufferGeometry: function ( mesh ) {
 
 		var data = {
-			slices : 25,
-			stacks : 25
+			slices: 25,
+			stacks: 25
 		};
 
 		function generateGeometry() {
@@ -1204,11 +1136,11 @@ var guis = {
 
 	},
 
-	ParametricGeometry : function( mesh ) {
+	ParametricGeometry: function ( mesh ) {
 
 		var data = {
-			slices : 25,
-			stacks : 25
+			slices: 25,
+			stacks: 25
 		};
 
 		function generateGeometry() {
@@ -1228,11 +1160,11 @@ var guis = {
 
 	},
 
-	TubeGeometry : function( mesh ) {
+	TubeGeometry: function ( mesh ) {
 
 		var data = {
-			segments : 20,
-			radius : 2,
+			segments: 20,
+			radius: 2,
 			radiusSegments: 8
 		};
 
@@ -1256,11 +1188,11 @@ var guis = {
 
 	},
 
-	TubeBufferGeometry : function( mesh ) {
+	TubeBufferGeometry: function ( mesh ) {
 
 		var data = {
-			segments : 20,
-			radius : 2,
+			segments: 20,
+			radius: 2,
 			radiusSegments: 8
 		};
 
@@ -1284,17 +1216,18 @@ var guis = {
 
 	},
 
-	ShapeGeometry: function( mesh ) {
+	ShapeGeometry: function ( mesh ) {
 
 		var data = {
-			segments : 12
+			segments: 12
 		};
 
 		function generateGeometry() {
 
-			updateGroupGeometry( mesh,
-				new THREE.ShapeGeometry( heartShape, data.segments )
-			);
+			var geometry = new THREE.ShapeGeometry( heartShape, data.segments );
+			geometry.center();
+
+			updateGroupGeometry( mesh, geometry );
 
 		}
 
@@ -1305,17 +1238,18 @@ var guis = {
 
 	},
 
-	ShapeBufferGeometry: function( mesh ) {
+	ShapeBufferGeometry: function ( mesh ) {
 
 		var data = {
-			segments : 12
+			segments: 12
 		};
 
 		function generateGeometry() {
 
-			updateGroupGeometry( mesh,
-				new THREE.ShapeBufferGeometry( heartShape, data.segments )
-			);
+			var geometry = new THREE.ShapeBufferGeometry( heartShape, data.segments );
+			geometry.center();
+
+			updateGroupGeometry( mesh, geometry );
 
 		}
 
@@ -1326,7 +1260,7 @@ var guis = {
 
 	},
 
-	ExtrudeGeometry: function( mesh ) {
+	ExtrudeGeometry: function ( mesh ) {
 
 		var data = {
 			steps: 2,
@@ -1340,7 +1274,7 @@ var guis = {
 		var length = 12, width = 8;
 
 		var shape = new THREE.Shape();
-		shape.moveTo( 0,0 );
+		shape.moveTo( 0, 0 );
 		shape.lineTo( 0, width );
 		shape.lineTo( length, width );
 		shape.lineTo( length, 0 );
@@ -1348,9 +1282,10 @@ var guis = {
 
 		function generateGeometry() {
 
-			updateGroupGeometry( mesh,
-				new THREE.ExtrudeGeometry( shape, data )
-			);
+			var geometry = new THREE.ExtrudeGeometry( shape, data );
+			geometry.center();
+
+			updateGroupGeometry( mesh, geometry );
 
 		}
 
@@ -1366,7 +1301,7 @@ var guis = {
 
 	},
 
-	ExtrudeBufferGeometry: function( mesh ) {
+	ExtrudeBufferGeometry: function ( mesh ) {
 
 		var data = {
 			steps: 2,
@@ -1380,7 +1315,7 @@ var guis = {
 		var length = 12, width = 8;
 
 		var shape = new THREE.Shape();
-		shape.moveTo( 0,0 );
+		shape.moveTo( 0, 0 );
 		shape.lineTo( 0, width );
 		shape.lineTo( length, width );
 		shape.lineTo( length, 0 );
@@ -1388,9 +1323,10 @@ var guis = {
 
 		function generateGeometry() {
 
-			updateGroupGeometry( mesh,
-				new THREE.ExtrudeBufferGeometry( shape, data )
-			);
+			var geometry = new THREE.ExtrudeBufferGeometry( shape, data );
+			geometry.center();
+
+			updateGroupGeometry( mesh, geometry );
 
 		}
 
@@ -1408,7 +1344,7 @@ var guis = {
 
 };
 
-function chooseFromHash ( mesh ) {
+function chooseFromHash( mesh ) {
 
 	var selectedGeometry = window.location.hash.substring( 1 ) || "TorusGeometry";
 
@@ -1420,7 +1356,7 @@ function chooseFromHash ( mesh ) {
 
 	if ( selectedGeometry === 'TextGeometry' || selectedGeometry === 'TextBufferGeometry' ) {
 
-		return { fixed : true };
+		return { fixed: true };
 
 	}
 

docs/scenes/js/material.js

@@ -6,65 +6,65 @@ var constants = {
 
 	combine: {
 
-		"THREE.MultiplyOperation" : THREE.MultiplyOperation,
-		"THREE.MixOperation" : THREE.MixOperation,
-		"THREE.AddOperation" : THREE.AddOperation
+		'THREE.MultiplyOperation': THREE.MultiplyOperation,
+		'THREE.MixOperation': THREE.MixOperation,
+		'THREE.AddOperation': THREE.AddOperation
 
 	},
 
-	side : {
+	side: {
 
-		"THREE.FrontSide" : THREE.FrontSide,
-		"THREE.BackSide" : THREE.BackSide,
-		"THREE.DoubleSide" : THREE.DoubleSide
+		'THREE.FrontSide': THREE.FrontSide,
+		'THREE.BackSide': THREE.BackSide,
+		'THREE.DoubleSide': THREE.DoubleSide
 
 	},
 
-	colors : {
+	colors: {
 
-		"THREE.NoColors" : THREE.NoColors,
-		"THREE.FaceColors" : THREE.FaceColors,
-		"THREE.VertexColors" : THREE.VertexColors
+		'THREE.NoColors': THREE.NoColors,
+		'THREE.FaceColors': THREE.FaceColors,
+		'THREE.VertexColors': THREE.VertexColors
 
 	},
 
-	blendingMode : {
+	blendingMode: {
 
-		"THREE.NoBlending" : THREE.NoBlending,
-		"THREE.NormalBlending" : THREE.NormalBlending,
-		"THREE.AdditiveBlending" : THREE.AdditiveBlending,
-		"THREE.SubtractiveBlending" : THREE.SubtractiveBlending,
-		"THREE.MultiplyBlending" : THREE.MultiplyBlending,
-		"THREE.CustomBlending" : THREE.CustomBlending
+		'THREE.NoBlending': THREE.NoBlending,
+		'THREE.NormalBlending': THREE.NormalBlending,
+		'THREE.AdditiveBlending': THREE.AdditiveBlending,
+		'THREE.SubtractiveBlending': THREE.SubtractiveBlending,
+		'THREE.MultiplyBlending': THREE.MultiplyBlending,
+		'THREE.CustomBlending': THREE.CustomBlending
 
 	},
 
-	equations : {
+	equations: {
 
-		"THREE.AddEquation" : THREE.AddEquation,
-		"THREE.SubtractEquation" : THREE.SubtractEquation,
-		"THREE.ReverseSubtractEquation" : THREE.ReverseSubtractEquation
+		'THREE.AddEquation': THREE.AddEquation,
+		'THREE.SubtractEquation': THREE.SubtractEquation,
+		'THREE.ReverseSubtractEquation': THREE.ReverseSubtractEquation
 
 	},
 
-	destinationFactors : {
+	destinationFactors: {
 
-		"THREE.ZeroFactor" : THREE.ZeroFactor,
-		"THREE.OneFactor" : THREE.OneFactor,
-		"THREE.SrcColorFactor" : THREE.SrcColorFactor,
-		"THREE.OneMinusSrcColorFactor" : THREE.OneMinusSrcColorFactor,
-		"THREE.SrcAlphaFactor" : THREE.SrcAlphaFactor,
-		"THREE.OneMinusSrcAlphaFactor" : THREE.OneMinusSrcAlphaFactor,
-		"THREE.DstAlphaFactor" : THREE.DstAlphaFactor,
-		"THREE.OneMinusDstAlphaFactor" : THREE.OneMinusDstAlphaFactor
+		'THREE.ZeroFactor': THREE.ZeroFactor,
+		'THREE.OneFactor': THREE.OneFactor,
+		'THREE.SrcColorFactor': THREE.SrcColorFactor,
+		'THREE.OneMinusSrcColorFactor': THREE.OneMinusSrcColorFactor,
+		'THREE.SrcAlphaFactor': THREE.SrcAlphaFactor,
+		'THREE.OneMinusSrcAlphaFactor': THREE.OneMinusSrcAlphaFactor,
+		'THREE.DstAlphaFactor': THREE.DstAlphaFactor,
+		'THREE.OneMinusDstAlphaFactor': THREE.OneMinusDstAlphaFactor
 
 	},
 
-	sourceFactors : {
+	sourceFactors: {
 
-		"THREE.DstColorFactor" : THREE.DstColorFactor,
-		"THREE.OneMinusDstColorFactor" : THREE.OneMinusDstColorFactor,
-		"THREE.SrcAlphaSaturateFactor" : THREE.SrcAlphaSaturateFactor
+		'THREE.DstColorFactor': THREE.DstColorFactor,
+		'THREE.OneMinusDstColorFactor': THREE.OneMinusDstColorFactor,
+		'THREE.SrcAlphaSaturateFactor': THREE.SrcAlphaSaturateFactor
 
 	}
 
@@ -85,11 +85,12 @@ function getObjectsKeys( obj ) {
 	}
 
 	return keys;
+
 }
 
-var envMaps = (function () {
+var envMaps = ( function () {
 
-	var path = "../../examples/textures/cube/SwedishRoyalCastle/";
+	var path = '../../examples/textures/cube/SwedishRoyalCastle/';
 	var format = '.jpg';
 	var urls = [
 		path + 'px' + format, path + 'nx' + format,
@@ -105,47 +106,47 @@ var envMaps = (function () {
 	refractionCube.format = THREE.RGBFormat;
 
 	return {
-		none : null,
-		reflection : reflectionCube,
-		refraction : refractionCube
+		none: null,
+		reflection: reflectionCube,
+		refraction: refractionCube
 	};
 
-})();
+} )();
 
 var envMapKeys = getObjectsKeys( envMaps );
 
-var textureMaps = (function () {
+var textureMaps = ( function () {
 
 	return {
-		none : null,
-		grass : new THREE.TextureLoader().load( "../../examples/textures/terrain/grasslight-thin.jpg" )
+		none: null,
+		grass: new THREE.TextureLoader().load( '../../examples/textures/terrain/grasslight-thin.jpg' )
 	};
 
-})();
+} )();
 
 var textureMapKeys = getObjectsKeys( textureMaps );
 
-function generateVertexColors ( geometry ) {
+function generateVertexColors( geometry ) {
 
-	for ( var i=0, il = geometry.faces.length; i < il; i++ ) {
+	for ( var i = 0, il = geometry.faces.length; i < il; i ++ ) {
 
-		geometry.faces[i].vertexColors.push( new THREE.Color().setHSL(
+		geometry.faces[ i ].vertexColors.push( new THREE.Color().setHSL(
 			i / il * Math.random(),
 			0.5,
 			0.5
 		) );
-		geometry.faces[i].vertexColors.push( new THREE.Color().setHSL(
+		geometry.faces[ i ].vertexColors.push( new THREE.Color().setHSL(
 			i / il * Math.random(),
 			0.5,
 			0.5
 		) );
-		geometry.faces[i].vertexColors.push( new THREE.Color().setHSL(
+		geometry.faces[ i ].vertexColors.push( new THREE.Color().setHSL(
 			i / il * Math.random(),
 			0.5,
 			0.5
 		) );
 
-		geometry.faces[i].color = new THREE.Color().setHSL(
+		geometry.faces[ i ].color = new THREE.Color().setHSL(
 			i / il * Math.random(),
 			0.5,
 			0.5
@@ -155,11 +156,11 @@ function generateVertexColors ( geometry ) {
 
 }
 
-function generateMorphTargets ( mesh, geometry ) {
+function generateMorphTargets( mesh, geometry ) {
 
 	var vertices = [], scale;
 
-	for ( var i = 0; i < geometry.vertices.length; i++ ) {
+	for ( var i = 0; i < geometry.vertices.length; i ++ ) {
 
 		vertices.push( geometry.vertices[ i ].clone() );
 
@@ -171,32 +172,32 @@ function generateMorphTargets ( mesh, geometry ) {
 
 	}
 
-	geometry.morphTargets.push( { name: "target1", vertices: vertices } );
+	geometry.morphTargets.push( { name: 'target1', vertices: vertices } );
 
 }
 
-function handleColorChange ( color ) {
+function handleColorChange( color ) {
 
-	return function ( value ){
+	return function ( value ) {
 
-		if (typeof value === "string") {
+		if ( typeof value === 'string' ) {
 
-			value = value.replace('#', '0x');
+			value = value.replace( '#', '0x' );
 
 		}
 
 		color.setHex( value );
 
-    };
+	};
 
 }
 
-function needsUpdate ( material, geometry ) {
+function needsUpdate( material, geometry ) {
 
 	return function () {
 
-		material.vertexColors = +material.vertexColors; //Ensure number
-		material.side = +material.side; //Ensure number
+		material.vertexColors = + material.vertexColors; //Ensure number
+		material.side = + material.side; //Ensure number
 		material.needsUpdate = true;
 		geometry.verticesNeedUpdate = true;
 		geometry.normalsNeedUpdate = true;
@@ -206,7 +207,7 @@ function needsUpdate ( material, geometry ) {
 
 }
 
-function updateMorphs ( torus, material ) {
+function updateMorphs( torus, material ) {
 
 	return function () {
 
@@ -217,30 +218,30 @@ function updateMorphs ( torus, material ) {
 
 }
 
-function updateTexture ( material, materialKey, textures ) {
+function updateTexture( material, materialKey, textures ) {
 
 	return function ( key ) {
 
-		material[materialKey] = textures[key];
+		material[ materialKey ] = textures[ key ];
 		material.needsUpdate = true;
 
 	};
 
 }
 
-function guiScene ( gui, scene ) {
+function guiScene( gui, scene ) {
 
-	var folder = gui.addFolder('Scene');
+	var folder = gui.addFolder( 'Scene' );
 
 	var data = {
-		background : "#000000",
-		"ambient light" : ambientLight.color.getHex()
+		background: '#000000',
+		'ambient light': ambientLight.color.getHex()
 	};
 
 	var color = new THREE.Color();
 	var colorConvert = handleColorChange( color );
 
-	folder.addColor( data, "background" ).onChange( function ( value ) {
+	folder.addColor( data, 'background' ).onChange( function ( value ) {
 
 		colorConvert( value );
 
@@ -248,22 +249,22 @@ function guiScene ( gui, scene ) {
 
 	} );
 
-	folder.addColor( data, "ambient light" ).onChange( handleColorChange( ambientLight.color ) );
+	folder.addColor( data, 'ambient light' ).onChange( handleColorChange( ambientLight.color ) );
 
 	guiSceneFog( folder, scene );
 
 }
 
-function guiSceneFog ( folder, scene ) {
+function guiSceneFog( folder, scene ) {
 
-	var fogFolder = folder.addFolder('scene.fog');
+	var fogFolder = folder.addFolder( 'scene.fog' );
 
 	var fog = new THREE.Fog( 0x3f7b9d, 0, 60 );
 
 	var data = {
-		fog : {
-			"THREE.Fog()" : false,
-			"scene.fog.color" : fog.color.getHex()
+		fog: {
+			'THREE.Fog()': false,
+			'scene.fog.color': fog.color.getHex()
 		}
 	};
 
@@ -281,13 +282,13 @@ function guiSceneFog ( folder, scene ) {
 
 	} );
 
-	fogFolder.addColor( data.fog, 'scene.fog.color').onChange( handleColorChange( fog.color ) );
+	fogFolder.addColor( data.fog, 'scene.fog.color' ).onChange( handleColorChange( fog.color ) );
 
 }
 
-function guiMaterial ( gui, mesh, material, geometry ) {
+function guiMaterial( gui, mesh, material, geometry ) {
 
-	var folder = gui.addFolder('THREE.Material');
+	var folder = gui.addFolder( 'THREE.Material' );
 
 	folder.add( material, 'transparent' );
 	folder.add( material, 'opacity', 0, 1 );
@@ -307,22 +308,22 @@ function guiMaterial ( gui, mesh, material, geometry ) {
 
 }
 
-function guiMeshBasicMaterial ( gui, mesh, material, geometry ) {
+function guiMeshBasicMaterial( gui, mesh, material, geometry ) {
 
 	var data = {
-		color : material.color.getHex(),
-		envMaps : envMapKeys,
-		map : textureMapKeys,
-		specularMap : textureMapKeys,
-		alphaMap : textureMapKeys
+		color: material.color.getHex(),
+		envMaps: envMapKeys,
+		map: textureMapKeys,
+		specularMap: textureMapKeys,
+		alphaMap: textureMapKeys
 	};
 
-	var folder = gui.addFolder('THREE.MeshBasicMaterial');
+	var folder = gui.addFolder( 'THREE.MeshBasicMaterial' );
 
 	folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
 	folder.add( material, 'wireframe' );
 	folder.add( material, 'wireframeLinewidth', 0, 10 );
-	folder.add( material, 'vertexColors', constants.colors).onChange( needsUpdate( material, geometry ) );
+	folder.add( material, 'vertexColors', constants.colors ).onChange( needsUpdate( material, geometry ) );
 	folder.add( material, 'fog' );
 
 	folder.add( data, 'envMaps', envMapKeys ).onChange( updateTexture( material, 'envMap', envMaps ) );
@@ -333,13 +334,12 @@ function guiMeshBasicMaterial ( gui, mesh, material, geometry ) {
 	folder.add( material, 'combine', constants.combine ).onChange( updateMorphs( mesh, material ) );
 	folder.add( material, 'reflectivity', 0, 1 );
 	folder.add( material, 'refractionRatio', 0, 1 );
-	//folder.add( material, 'skinning' );
 
 }
 
-function guiMeshDepthMaterial ( gui, mesh, material, geometry ) {
+function guiMeshDepthMaterial( gui, mesh, material, geometry ) {
 
-	var folder = gui.addFolder('THREE.MeshDepthMaterial');
+	var folder = gui.addFolder( 'THREE.MeshDepthMaterial' );
 
 	folder.add( material, 'wireframe' );
 	folder.add( material, 'wireframeLinewidth', 0, 10 );
@@ -347,9 +347,9 @@ function guiMeshDepthMaterial ( gui, mesh, material, geometry ) {
 
 }
 
-function guiMeshNormalMaterial ( gui, mesh, material, geometry ) {
+function guiMeshNormalMaterial( gui, mesh, material, geometry ) {
 
-	var folder = gui.addFolder('THREE.MeshNormalMaterial');
+	var folder = gui.addFolder( 'THREE.MeshNormalMaterial' );
 
 	folder.add( material, 'flatShading' ).onChange( needsUpdate( material, geometry ) );
 	folder.add( material, 'wireframe' );
@@ -358,37 +358,37 @@ function guiMeshNormalMaterial ( gui, mesh, material, geometry ) {
 
 }
 
-function guiLineBasicMaterial ( gui, mesh, material, geometry ) {
+function guiLineBasicMaterial( gui, mesh, material, geometry ) {
 
 	var data = {
-		color : material.color.getHex()
+		color: material.color.getHex()
 	};
 
-	var folder = gui.addFolder('THREE.LineBasicMaterial');
+	var folder = gui.addFolder( 'THREE.LineBasicMaterial' );
 
 	folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
 	folder.add( material, 'linewidth', 0, 10 );
-	folder.add( material, 'linecap', ["butt", "round", "square"] );
-	folder.add( material, 'linejoin', ["round", "bevel", "miter"] );
-	folder.add( material, 'vertexColors', constants.colors).onChange( needsUpdate( material, geometry ) );
+	folder.add( material, 'linecap', [ 'butt', 'round', 'square' ] );
+	folder.add( material, 'linejoin', [ 'round', 'bevel', 'miter' ] );
+	folder.add( material, 'vertexColors', constants.colors ).onChange( needsUpdate( material, geometry ) );
 	folder.add( material, 'fog' );
 
 }
 
-function guiMeshLambertMaterial ( gui, mesh, material, geometry ) {
+function guiMeshLambertMaterial( gui, mesh, material, geometry ) {
 
 	var data = {
-		color : material.color.getHex(),
-		emissive : material.emissive.getHex(),
-		envMaps : envMapKeys,
-		map : textureMapKeys,
-		specularMap : textureMapKeys,
-		alphaMap : textureMapKeys
+		color: material.color.getHex(),
+		emissive: material.emissive.getHex(),
+		envMaps: envMapKeys,
+		map: textureMapKeys,
+		specularMap: textureMapKeys,
+		alphaMap: textureMapKeys
 	};
 
 	var envObj = {};
 
-	var folder = gui.addFolder('THREE.MeshLambertMaterial');
+	var folder = gui.addFolder( 'THREE.MeshLambertMaterial' );
 
 	folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
 	folder.addColor( data, 'emissive' ).onChange( handleColorChange( material.emissive ) );
@@ -410,30 +410,30 @@ function guiMeshLambertMaterial ( gui, mesh, material, geometry ) {
 
 }
 
-function guiMeshPhongMaterial ( gui, mesh, material, geometry ) {
+function guiMeshPhongMaterial( gui, mesh, material, geometry ) {
 
 	var data = {
-		color : material.color.getHex(),
-		emissive : material.emissive.getHex(),
-		specular : material.specular.getHex(),
-		envMaps : envMapKeys,
-		map : textureMapKeys,
-		lightMap : textureMapKeys,
-		specularMap : textureMapKeys,
-		alphaMap : textureMapKeys
+		color: material.color.getHex(),
+		emissive: material.emissive.getHex(),
+		specular: material.specular.getHex(),
+		envMaps: envMapKeys,
+		map: textureMapKeys,
+		lightMap: textureMapKeys,
+		specularMap: textureMapKeys,
+		alphaMap: textureMapKeys
 	};
 
-	var folder = gui.addFolder('THREE.MeshPhongMaterial');
+	var folder = gui.addFolder( 'THREE.MeshPhongMaterial' );
 
 	folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
 	folder.addColor( data, 'emissive' ).onChange( handleColorChange( material.emissive ) );
 	folder.addColor( data, 'specular' ).onChange( handleColorChange( material.specular ) );
 
-	folder.add( material, 'shininess', 0, 100);
+	folder.add( material, 'shininess', 0, 100 );
 	folder.add( material, 'flatShading' ).onChange( needsUpdate( material, geometry ) );
 	folder.add( material, 'wireframe' );
 	folder.add( material, 'wireframeLinewidth', 0, 10 );
-	folder.add( material, 'vertexColors', constants.colors);
+	folder.add( material, 'vertexColors', constants.colors );
 	folder.add( material, 'fog' );
 	folder.add( data, 'envMaps', envMapKeys ).onChange( updateTexture( material, 'envMap', envMaps ) );
 	folder.add( data, 'map', textureMapKeys ).onChange( updateTexture( material, 'map', textureMaps ) );
@@ -443,19 +443,19 @@ function guiMeshPhongMaterial ( gui, mesh, material, geometry ) {
 
 }
 
-function guiMeshStandardMaterial ( gui, mesh, material, geometry ) {
+function guiMeshStandardMaterial( gui, mesh, material, geometry ) {
 
 	var data = {
-		color : material.color.getHex(),
-		emissive : material.emissive.getHex(),
-		envMaps : envMapKeys,
-		map : textureMapKeys,
-		lightMap : textureMapKeys,
-		specularMap : textureMapKeys,
-		alphaMap : textureMapKeys
+		color: material.color.getHex(),
+		emissive: material.emissive.getHex(),
+		envMaps: envMapKeys,
+		map: textureMapKeys,
+		lightMap: textureMapKeys,
+		specularMap: textureMapKeys,
+		alphaMap: textureMapKeys
 	};
 
-	var folder = gui.addFolder('THREE.MeshStandardMaterial');
+	var folder = gui.addFolder( 'THREE.MeshStandardMaterial' );
 
 	folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
 	folder.addColor( data, 'emissive' ).onChange( handleColorChange( material.emissive ) );
@@ -465,7 +465,7 @@ function guiMeshStandardMaterial ( gui, mesh, material, geometry ) {
 	folder.add( material, 'flatShading' ).onChange( needsUpdate( material, geometry ) );
 	folder.add( material, 'wireframe' );
 	folder.add( material, 'wireframeLinewidth', 0, 10 );
-	folder.add( material, 'vertexColors', constants.colors);
+	folder.add( material, 'vertexColors', constants.colors );
 	folder.add( material, 'fog' );
 	folder.add( data, 'envMaps', envMapKeys ).onChange( updateTexture( material, 'envMap', envMaps ) );
 	folder.add( data, 'map', textureMapKeys ).onChange( updateTexture( material, 'map', textureMaps ) );
@@ -476,82 +476,83 @@ function guiMeshStandardMaterial ( gui, mesh, material, geometry ) {
 
 }
 
-function chooseFromHash ( gui, mesh, geometry ) {
+function chooseFromHash( gui, mesh, geometry ) {
 
-	var selectedMaterial = window.location.hash.substring(1) || "MeshBasicMaterial";
+	var selectedMaterial = window.location.hash.substring( 1 ) || 'MeshBasicMaterial';
 	var material;
 
-	switch (selectedMaterial) {
+	switch ( selectedMaterial ) {
+
+		case 'MeshBasicMaterial' :
 
-	case "MeshBasicMaterial" :
+			material = new THREE.MeshBasicMaterial( { color: 0x2194CE } );
+			guiMaterial( gui, mesh, material, geometry );
+			guiMeshBasicMaterial( gui, mesh, material, geometry );
 
-		material = new THREE.MeshBasicMaterial({color: 0x2194CE});
-		guiMaterial( gui, mesh, material, geometry );
-		guiMeshBasicMaterial( gui, mesh, material, geometry );
+			return material;
 
-		return material;
+			break;
 
-		break;
+		case 'MeshLambertMaterial' :
 
-	case "MeshLambertMaterial" :
+			material = new THREE.MeshLambertMaterial( { color: 0x2194CE } );
+			guiMaterial( gui, mesh, material, geometry );
+			guiMeshLambertMaterial( gui, mesh, material, geometry );
 
-		material = new THREE.MeshLambertMaterial({color: 0x2194CE});
-		guiMaterial( gui, mesh, material, geometry );
-		guiMeshLambertMaterial( gui, mesh, material, geometry );
+			return material;
 
-		return material;
+			break;
 
-		break;
+		case 'MeshPhongMaterial' :
 
-	case "MeshPhongMaterial" :
+			material = new THREE.MeshPhongMaterial( { color: 0x2194CE } );
+			guiMaterial( gui, mesh, material, geometry );
+			guiMeshPhongMaterial( gui, mesh, material, geometry );
 
-		material = new THREE.MeshPhongMaterial({color: 0x2194CE});
-		guiMaterial( gui, mesh, material, geometry );
-		guiMeshPhongMaterial( gui, mesh, material, geometry );
+			return material;
 
-		return material;
+			break;
 
-		break;
+		case 'MeshStandardMaterial' :
 
-	case "MeshStandardMaterial" :
+			material = new THREE.MeshStandardMaterial( { color: 0x2194CE } );
+			guiMaterial( gui, mesh, material, geometry );
+			guiMeshStandardMaterial( gui, mesh, material, geometry );
 
-		material = new THREE.MeshStandardMaterial({color: 0x2194CE});
-		guiMaterial( gui, mesh, material, geometry );
-		guiMeshStandardMaterial( gui, mesh, material, geometry );
+			return material;
 
-		return material;
+			break;
 
-		break;
+		case 'MeshDepthMaterial' :
 
-	case "MeshDepthMaterial" :
+			material = new THREE.MeshDepthMaterial();
+			guiMaterial( gui, mesh, material, geometry );
+			guiMeshDepthMaterial( gui, mesh, material, geometry );
 
-		material = new THREE.MeshDepthMaterial();
-		guiMaterial( gui, mesh, material, geometry );
-		guiMeshDepthMaterial( gui, mesh, material, geometry );
+			return material;
 
-		return material;
+			break;
 
-		break;
+		case 'MeshNormalMaterial' :
 
-	case "MeshNormalMaterial" :
+			material = new THREE.MeshNormalMaterial();
+			guiMaterial( gui, mesh, material, geometry );
+			guiMeshNormalMaterial( gui, mesh, material, geometry );
 
-		material = new THREE.MeshNormalMaterial();
-		guiMaterial( gui, mesh, material, geometry );
-		guiMeshNormalMaterial( gui, mesh, material, geometry );
+			return material;
 
-		return material;
+			break;
 
-		break;
+		case 'LineBasicMaterial' :
 
-	case "LineBasicMaterial" :
+			material = new THREE.LineBasicMaterial( { color: 0x2194CE } );
+			guiMaterial( gui, mesh, material, geometry );
+			guiLineBasicMaterial( gui, mesh, material, geometry );
 
-		material = new THREE.LineBasicMaterial({color: 0x2194CE});
-		guiMaterial( gui, mesh, material, geometry );
-		guiLineBasicMaterial( gui, mesh, material, geometry );
+			return material;
 
-		return material;
+			break;
 
-		break;
 	}
 
 }