Apply normal matrix to exported normals in OBJExporter.

I applied normal matrix to exported normals, deleted dummy texture coordinate writing, and an unneccessary line. I also made some modifications in the example.

examples/index.html

@@ -271,6 +271,7 @@
 				"webgl_loader_utf8",
 				"webgl_loader_vrml",
 				"webgl_loader_vtk",
+				"webgl_exporter_obj",
 				"webgl_lod",
 				"webgl_marchingcubes",
 				"webgl_materials",

examples/js/exporters/OBJExporter.js

@@ -45,8 +45,9 @@ THREE.OBJExporter.prototype = {
 
 				var faces = geometry.faces;
 				var faceVertexUvs = geometry.faceVertexUvs[ 0 ];
+				var hasVertexUvs = (faces.length === faceVertexUvs.length);
 
-				if ( faces.length === faceVertexUvs.length ) {
+				if ( hasVertexUvs ) {
 
 					for ( var i = 0, l = faceVertexUvs.length; i < l; i ++ ) {
 
@@ -55,7 +56,6 @@ THREE.OBJExporter.prototype = {
 						for ( var j = 0; j < vertexUvs.length; j ++ ) {
 
 							var uv = vertexUvs[ j ];
-							vertex.applyMatrix4( mesh.matrixWorld );
 
 							output += 'vt ' + uv.x + ' ' + uv.y + '\n';
 
@@ -65,19 +65,13 @@ THREE.OBJExporter.prototype = {
 
 					}
 
-				} else {
-
-					for ( var i = 0, l = faces.length * 3; i < l; i ++ ) {
-
-						output += 'vt 0 0\n';
-						nbVertexUvs ++;
-
-					}
-
 				}
 
 				// normals
 
+				var normalMatrixWorld = new THREE.Matrix3();
+				normalMatrixWorld.getNormalMatrix( mesh.matrixWorld );
+				
 				for ( var i = 0, l = faces.length; i < l; i ++ ) {
 
 					var face = faces[ i ];
@@ -87,7 +81,8 @@ THREE.OBJExporter.prototype = {
 
 						for ( var j = 0; j < vertexNormals.length; j ++ ) {
 
-							var normal = vertexNormals[ j ];
+							var normal = vertexNormals[ j ].clone ();
+							normal.applyMatrix3( normalMatrixWorld ).normalize();
 							output += 'vn ' + normal.x + ' ' + normal.y + ' ' + normal.z + '\n';
 
 							nbNormals ++;
@@ -96,7 +91,8 @@ THREE.OBJExporter.prototype = {
 
 					} else {
 
-						var normal = face.normal;
+						var normal = face.normal.clone ();
+						normal.applyMatrix3( normalMatrixWorld ).normalize();
 
 						for ( var j = 0; j < 3; j ++ ) {
 
@@ -112,14 +108,15 @@ THREE.OBJExporter.prototype = {
 
 				// faces
 
+				
 				for ( var i = 0, j = 1, l = faces.length; i < l; i ++, j += 3 ) {
 
 					var face = faces[ i ];
 
 					output += 'f ';
-					output += ( indexVertex + face.a + 1 ) + '/' + ( indexVertexUvs + j ) + '/' + ( indexNormals + j ) + ' ';
-					output += ( indexVertex + face.b + 1 ) + '/' + ( indexVertexUvs + j + 1 ) + '/' + ( indexNormals + j + 1 ) + ' ';
-					output += ( indexVertex + face.c + 1 ) + '/' + ( indexVertexUvs + j + 2 ) + '/' + ( indexNormals + j + 2 ) + '\n';
+					output += ( indexVertex + face.a + 1 ) + '/' + (hasVertexUvs ? ( indexVertexUvs + j ) : '') + '/' + ( indexNormals + j ) + ' ';
+					output += ( indexVertex + face.b + 1 ) + '/' + (hasVertexUvs ? ( indexVertexUvs + j + 1 ) : '') + '/' + ( indexNormals + j + 1 ) + ' ';
+					output += ( indexVertex + face.c + 1 ) + '/' + (hasVertexUvs ? ( indexVertexUvs + j + 2 ) : '') + '/' + ( indexNormals + j + 2 ) + '\n';
 
 				}
 

examples/webgl_exporter_obj.html

@@ -55,7 +55,8 @@
 			<span class="link" id="triangle">triangle</span>,
 			<span class="link" id="cube">cube</span>,
 			<span class="link" id="cylinder">cylinder</span>,
-			<span class="link" id="both">both</span>
+			<span class="link" id="both">both</span>,
+			<span class="link" id="transformed">transformed</span>
 			- <span class="link" id="export">export to obj</span>
 		</div>
 		
@@ -81,10 +82,13 @@
 				for (var i = 0; i < scene.children.length; i++) {
 					var current = scene.children[i];
 					if (current instanceof THREE.Mesh) {
+						current.geometry.dispose ();
 						scene.remove (current);
 						i--;
 					}
 				}
+				
+				console.log (renderer.info);
 	
 				if (type == 1) {
 					var material = new THREE.MeshLambertMaterial ( { color : 0x00cc00 } );
@@ -104,7 +108,7 @@
 					var material = new THREE.MeshLambertMaterial ( { color : 0x00cc00 } );
 					var geometry = new THREE.CylinderGeometry( 50, 50, 100, 30, 1 );
 					scene.add( new THREE.Mesh( geometry, material ) );
-				} else if (type == 4) {
+				} else if (type == 4 || type == 5) {
 					var material = new THREE.MeshLambertMaterial ( { color : 0x00cc00 } );
 
 					var geometry = new THREE.Geometry ();
@@ -115,14 +119,23 @@
 					geometry.computeFaceNormals ();
 					var mesh = new THREE.Mesh( geometry, material );
 					mesh.position.x = -200;
+					if (type == 5) {
+						mesh.rotation.y = Math.PI / 4.0;
+					}
 					scene.add( mesh );
 
 					var geometry2 = new THREE.BoxGeometry( 100, 100, 100 );
 					var mesh2 = new THREE.Mesh( geometry2, material );
+					if (type == 5) {
+						mesh2.rotation.y = Math.PI / 4.0;
+					}
 					scene.add( mesh2 );
 
 					var geometry3 = new THREE.CylinderGeometry( 50, 50, 100, 30, 1 );
 					var mesh3 = new THREE.Mesh( geometry3, material );
+					if (type == 5) {
+						mesh3.rotation.y = Math.PI / 4.0;
+					}
 					mesh3.position.x = 200;
 
 					scene.add( mesh3 );
@@ -155,6 +168,7 @@
 				document.getElementById( 'cube' ).addEventListener( 'click', function() { addGeometry (2); });
 				document.getElementById( 'cylinder' ).addEventListener( 'click', function() { addGeometry (3); });
 				document.getElementById( 'both' ).addEventListener( 'click', function() { addGeometry (4); });
+				document.getElementById( 'transformed' ).addEventListener( 'click', function() { addGeometry (5); });
 				
 				exportButton = document.getElementById( 'export' );
 				exportButton.addEventListener( 'click', function() { exportToObj (); });
@@ -206,7 +220,7 @@
 
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.y += ( -mouseY - camera.position.y ) * .05;
-				camera.lookAt( new THREE.Vector3 (0.0, 0.0, 0.0) );
+				camera.lookAt( scene.position );
 
 				light.position.set( camera.position.x, camera.position.y, camera.position.z ).normalize ();
 				renderer.render( scene, camera );