MorphNormals code clean up.

examples/js/MD2Character.js

@@ -199,12 +199,8 @@ THREE.MD2Character = function () {
 
 	function createPart( geometry, skinMap ) {
 
-		geometry.computeMorphNormals();
-
-		var whiteMap = THREE.ImageUtils.generateDataTexture( 1, 1, new THREE.Color( 0xffffff ) );
-		var materialWireframe = new THREE.MeshPhongMaterial( { color: 0xffaa00, specular: 0x111111, shininess: 50, wireframe: true, shading: THREE.SmoothShading, map: whiteMap, morphTargets: true, morphNormals: true, metal: false } );
-
-		var materialTexture = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x111111, shininess: 50, wireframe: false, shading: THREE.SmoothShading, map: skinMap, morphTargets: true, morphNormals: true, metal: false } );
+		var materialWireframe = new THREE.MeshBasicMaterial( { color: 0xffaa00, wireframe: true, shading: THREE.SmoothShading, morphTargets: true } );
+		var materialTexture = new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: false, shading: THREE.SmoothShading, map: skinMap, morphTargets: true } );
 
 		//
 

examples/js/MD2CharacterComplex.js

@@ -522,12 +522,8 @@ THREE.MD2CharacterComplex = function () {
 
 	function createPart( geometry, skinMap ) {
 
-		geometry.computeMorphNormals();
-
-		var whiteMap = THREE.ImageUtils.generateDataTexture( 1, 1, new THREE.Color( 0xffffff ) );
-		var materialWireframe = new THREE.MeshPhongMaterial( { color: 0xffaa00, specular: 0x111111, shininess: 50, wireframe: true, shading: THREE.SmoothShading, map: whiteMap, morphTargets: true, morphNormals: true, metal: true } );
-
-		var materialTexture = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x111111, shininess: 50, wireframe: false, shading: THREE.SmoothShading, map: skinMap, morphTargets: true, morphNormals: true, metal: true } );
+		var materialWireframe = new THREE.MeshBasicMaterial( { color: 0xffaa00, wireframe: true, shading: THREE.SmoothShading, morphTargets: true } );
+		var materialTexture = new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: false, shading: THREE.SmoothShading, map: skinMap, morphTargets: true } );
 
 		//
 

examples/scenes/test_scene.js

@@ -597,7 +597,7 @@
 
 		"phong_morph": {
 			"type": "MeshPhongMaterial",
-			"parameters": { "color": 0, "specular": 16777215, "shininess": 50, "envMap": "cube_reflection", "reflectivity": 0.125, "combine": "MixOperation", "shading": "flat", "side": "double", "morphTargets": true, "morphNormals" : true }
+			"parameters": { "color": 0, "specular": 16777215, "shininess": 50, "envMap": "cube_reflection", "reflectivity": 0.125, "combine": "MixOperation", "shading": "flat", "side": "double", "morphTargets": true }
 		},
 
 		"phong_skin": {

examples/webgl_animation_cloth.html

@@ -14,11 +14,10 @@
 			}
 
 			#info {
-				text-align: center;
+				position: absolute;
 				padding: 10px;
-				z-index: 10;
 				width: 100%;
-				position: absolute;
+				text-align: center;
 			}
 
 			a {

examples/webgl_lights_hemisphere.html

@@ -202,9 +202,8 @@
 				loader.load( "models/animated/flamingo.js", function( geometry ) {
 
 					morphColorsToFaceColors( geometry );
-					geometry.computeMorphNormals();
 
-					var material = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0xffffff, shininess: 20, morphTargets: true, morphNormals: true, vertexColors: THREE.FaceColors, shading: THREE.FlatShading } );
+					var material = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0xffffff, shininess: 20, morphTargets: true, vertexColors: THREE.FaceColors, shading: THREE.FlatShading } );
 					var meshAnim = new THREE.MorphAnimMesh( geometry, material );
 
 					meshAnim.duration = 1000;

examples/webgl_morphnormals.html

@@ -91,9 +91,8 @@
 				loader.load( "models/animated/flamingo.js", function( geometry ) {
 
 					morphColorsToFaceColors( geometry );
-					geometry.computeMorphNormals();
 
-					var material = new THREE.MeshPhongMaterial( { color: 0xffffff, morphTargets: true, morphNormals: true, vertexColors: THREE.FaceColors, shading: THREE.FlatShading } );
+					var material = new THREE.MeshPhongMaterial( { color: 0xffffff, morphTargets: true, vertexColors: THREE.FaceColors, shading: THREE.FlatShading } );
 					var meshAnim = new THREE.MorphAnimMesh( geometry, material );
 
 					meshAnim.duration = 5000;

examples/webgl_morphtargets_md2.html

@@ -18,14 +18,11 @@
 			}
 
 			#info {
-				color:#fff;
-				position: relative;
-				margin: 0 auto -2.1em;
-				top: 0px;
-				width: 70em;
-
-				padding: 5px;
-				z-index:100;
+				position: absolute;
+				padding: 10px;
+				width: 100%;
+				text-align: center;
+				color: #fff;
 			}
 
 			a { color: skyblue; }
@@ -40,7 +37,7 @@
 	<body>
 		<div id="info">
 			<a href="http://threejs.org" target="_blank">three.js</a> - morphtargets -
-			MD2 character by <a href="http://planetquake.gamespy.com/View.php?view=Quake2.Detail&id=368">Brian Collins</a> -
+			MD2 character by <a href="http://planetquake.gamespy.com/View.php?view=Quake2.Detail&id=368">Brian Collins</a><br />
 			converted by <a href="https://twitter.com/#!/oosmoxiecode">@oosmoxiecode</a>'s <a href="http://oos.moxiecode.com/blog/2012/01/md2-to-json-converter/">MD2 converter<a>
 		</div>
 

examples/webgl_morphtargets_md2_control.html

@@ -18,13 +18,11 @@
 			}
 
 			#info {
-				color:#000;
-				position: relative;
-				margin: 0 auto -2.1em;
-				top: 0px;
-
-				padding: 5px;
-				z-index:100;
+				position: absolute;
+				padding: 10px;
+				width: 100%;
+				text-align: center;
+				color: #000;
 			}
 
 			a { color: skyblue; }
@@ -40,7 +38,7 @@
 		<div id="info">
 			<a href="http://threejs.org" target="_blank">three.js</a> - morphtargets -
 			Ogro by <a href="http://planetquake.gamespy.com/View.php?view=Quake2.Detail&id=556">Magarnigal</a> -
-			converted by <a href="https://twitter.com/#!/oosmoxiecode">@oosmoxiecode</a>'s <a href="http://oos.moxiecode.com/blog/2012/01/md2-to-json-converter/">MD2 converter</a> -
+			converted by <a href="https://twitter.com/#!/oosmoxiecode">@oosmoxiecode</a>'s <a href="http://oos.moxiecode.com/blog/2012/01/md2-to-json-converter/">MD2 converter</a><br />
 			use arrows to control characters, mouse for camera
 		</div>
 
@@ -280,6 +278,8 @@
 
 			function onKeyDown ( event ) {
 
+				event.stopPropagation();
+
 				switch( event.keyCode ) {
 
 					case 38: /*up*/
@@ -304,6 +304,8 @@
 
 			function onKeyUp ( event ) {
 
+				event.stopPropagation();
+
 				switch( event.keyCode ) {
 
 					case 38: /*up*/

examples/webgl_shading_physical.html

@@ -268,10 +268,8 @@
 
 				loader.load( "models/animated/sittingBox.js", function( geometry ) {
 
-					var morphMaterial = new THREE.MeshPhongMaterial( { color: 0x000000, specular: 0xff9900, shininess: 50, morphTargets: true, morphNormals: true, side: THREE.DoubleSide } );
-					morphMaterial.shading = THREE.FlatShading;
+					var morphMaterial = new THREE.MeshPhongMaterial( { color: 0x000000, specular: 0xff9900, shininess: 50, morphTargets: true, side: THREE.DoubleSide, shading: THREE.FlatShading } );
 
-					geometry.computeMorphNormals();
 					morph = new THREE.MorphAnimMesh( geometry, morphMaterial );
 
 					var s = 200;
@@ -389,7 +387,7 @@
 				gui = new dat.GUI();
 
 				shadowGUI = gui.addFolder( "Shadow" );
-    	
+
     			shadowGUI.add( shadowConfig, 'shadowCameraVisible' ).onChange( function() {
 
 					sunLight.shadowCameraVisible = shadowConfig.shadowCameraVisible;
@@ -429,7 +427,7 @@
 				shadowGUI.open();
 
 				gammaGUI = gui.addFolder( "Gamma" );
-    
+
 				gammaGUI.add( gamma, 'gammaFactor', 0.1, 4.0 ).onChange( function() {
 
 					renderer.gammaFactor = gamma.gammaFactor;