Improved VertexNormalsHelper and FaceNormalsHelper

examples/webgl_helpers.html

@@ -18,7 +18,7 @@
 		<script>
 
 			var camera, scene, renderer;
-			var mesh;
+			var mesh, faceNormalsHelper, vertexNormalsHelper;
 
 			init();
 			animate();
@@ -51,9 +51,11 @@
 					mesh.scale.multiplyScalar( 50 );
 					scene.add( mesh );
 
-					scene.add( new THREE.FaceNormalsHelper( mesh, 0.2 ) );
+					faceNormalsHelper = new THREE.FaceNormalsHelper( mesh, 10 );
+					scene.add( faceNormalsHelper );
 
-					scene.add( new THREE.VertexNormalsHelper( mesh, 0.2 ) );
+					vertexNormalsHelper = new THREE.VertexNormalsHelper( mesh, 10 );
+					scene.add( vertexNormalsHelper );
 
 					var helper = new THREE.WireframeHelper( mesh );
 					helper.material.depthTest = false;
@@ -88,6 +90,9 @@
 
 					mesh.rotation.y += 0.01;
 
+					faceNormalsHelper.update();
+					vertexNormalsHelper.update();
+
 				}
 
 				renderer.render( scene, camera );

src/extras/helpers/FaceNormalsHelper.js

@@ -1,32 +1,72 @@
 /**
  * @author mrdoob / http://mrdoob.com/
- */
+ * @author WestLangley / http://github.com/WestLangley
+*/
 
-THREE.FaceNormalsHelper = function ( object, size ) {
+THREE.FaceNormalsHelper = function ( object, size, hex ) {
 
-	size = size || 20;
+	this.object = object;
 
-	var geometry = new THREE.Geometry();
+	this.size = size || 1;
 
-	var faces = object.geometry.faces;
+	var color = hex || 0x0000ff;
 
-	for ( var i = 0, l = faces.length; i < l; i ++ ) {
+	var geometry = new THREE.Geometry();
 
-		var face = faces[ i ];
+	var faces = this.object.geometry.faces;
 
-		var centroid = face.centroid;
-		var normal = face.normal.clone();
+	for ( var i = 0, l = faces.length; i < l; i ++ ) {
 
-		geometry.vertices.push( centroid );
-		geometry.vertices.push( normal.multiplyScalar( size ).add( centroid ) );
+		geometry.vertices.push( new THREE.Vector3() );
+		geometry.vertices.push( new THREE.Vector3() );
 
 	}
 
-	THREE.Line.call( this, geometry, new THREE.LineBasicMaterial( { color: 0x0000ff } ), THREE.LinePieces );
+	THREE.Line.call( this, geometry, new THREE.LineBasicMaterial( { color: color } ), THREE.LinePieces );
 
 	this.matrixAutoUpdate = false;
-	this.matrixWorld = object.matrixWorld;
+
+	this.normalMatrix = new THREE.Matrix3();
+
+	this.update();
 
 };
 
 THREE.FaceNormalsHelper.prototype = Object.create( THREE.Line.prototype );
+
+THREE.FaceNormalsHelper.prototype.update = ( function ( object ) {
+
+	var v1 = new THREE.Vector3();
+
+	return function( object ) {
+
+		this.object.updateMatrixWorld( true );
+
+		this.normalMatrix.getNormalMatrix( this.object.matrixWorld );
+
+		var vertices = this.geometry.vertices;
+
+		var faces = this.object.geometry.faces;
+
+		for ( var i = 0, l = faces.length; i < l; i ++ ) {
+
+			var face = faces[ i ];
+
+			v1.copy( face.normal ).applyMatrix3( this.normalMatrix ).normalize().multiplyScalar( this.size );
+
+			var idx = 2 * i;
+
+			vertices[ idx ].copy( face.centroid ).applyMatrix4( this.object.matrixWorld );
+
+			vertices[ idx + 1 ].addVectors( vertices[ idx ], v1 );
+
+		}
+
+		this.geometry.verticesNeedUpdate = true;
+
+		return this;
+
+	}
+
+}());
+

src/extras/helpers/VertexNormalsHelper.js

@@ -1,12 +1,16 @@
 /**
  * @author mrdoob / http://mrdoob.com/
- */
+ * @author WestLangley / http://github.com/WestLangley
+*/
 
-THREE.VertexNormalsHelper = function ( object, size ) {
+THREE.VertexNormalsHelper = function ( object, size, hex ) {
 
-	size = size || 20;
+	this.object = object;
+
+	this.size = size || 1;
+
+	var color = hex || 0xff0000;
 
-	var keys = [ 'a', 'b', 'c', 'd' ];
 	var geometry = new THREE.Geometry();
 
 	var vertices = object.geometry.vertices;
@@ -18,22 +22,73 @@ THREE.VertexNormalsHelper = function ( object, size ) {
 
 		for ( var j = 0, jl = face.vertexNormals.length; j < jl; j ++ ) {
 
-			var vertexId = face[ keys[ j ] ];
-			var vertex = vertices[ vertexId ];
-			var normal = face.vertexNormals[ j ].clone();
-
-			geometry.vertices.push( vertex );
-			geometry.vertices.push( normal.multiplyScalar( size ).add( vertex ) );
+			geometry.vertices.push( new THREE.Vector3() );
+			geometry.vertices.push( new THREE.Vector3() );
 
 		}
 
 	}
 
-	THREE.Line.call( this, geometry, new THREE.LineBasicMaterial( { color: 0xff0000 } ), THREE.LinePieces );
+	THREE.Line.call( this, geometry, new THREE.LineBasicMaterial( { color: color } ), THREE.LinePieces );
 
 	this.matrixAutoUpdate = false;
-	this.matrixWorld = object.matrixWorld;
+
+	this.normalMatrix = new THREE.Matrix3();
+
+	this.update();
 
 };
 
 THREE.VertexNormalsHelper.prototype = Object.create( THREE.Line.prototype );
+
+THREE.VertexNormalsHelper.prototype.update = ( function ( object ) {
+
+	var v1 = new THREE.Vector3();
+
+	return function( object ) {
+
+		var keys = [ 'a', 'b', 'c', 'd' ];
+
+		this.object.updateMatrixWorld( true );
+
+		this.normalMatrix.getNormalMatrix( this.object.matrixWorld );
+
+		var vertices = this.geometry.vertices;
+
+		var verts = this.object.geometry.vertices;
+		var faces = this.object.geometry.faces;
+
+		var idx = 0;
+
+		for ( var i = 0, l = faces.length; i < l; i ++ ) {
+
+			var face = faces[ i ];
+
+			for ( var j = 0, jl = face.vertexNormals.length; j < jl; j ++ ) {
+
+				var vertexId = face[ keys[ j ] ];
+				var vertex = verts[ vertexId ];
+
+				var normal = face.vertexNormals[ j ];
+
+				vertices[ idx ].copy( vertex ).applyMatrix4( this.object.matrixWorld );
+
+				v1.copy( normal ).applyMatrix3( this.normalMatrix ).normalize().multiplyScalar( this.size );
+
+				v1.add( vertices[ idx ] );
+				idx = idx + 1;
+
+				vertices[ idx ].copy( v1 );
+				idx = idx + 1;
+
+			}
+
+		}
+
+		this.geometry.verticesNeedUpdate = true;
+
+		return this;
+
+	}
+
+}());