Added VertexTangentsHelper, plus minor *Helper mods

src/extras/helpers/FaceNormalsHelper.js

@@ -3,13 +3,15 @@
  * @author WestLangley / http://github.com/WestLangley
 */
 
-THREE.FaceNormalsHelper = function ( object, size, hex ) {
+THREE.FaceNormalsHelper = function ( object, size, hex, linewidth ) {
 
 	this.object = object;
 
 	this.size = size || 1;
 
-	var color = hex || 0x0000ff;
+	var color = hex || 0xffff00;
+
+	var width = linewidth || 1;
 
 	var geometry = new THREE.Geometry();
 
@@ -22,7 +24,7 @@ THREE.FaceNormalsHelper = function ( object, size, hex ) {
 
 	}
 
-	THREE.Line.call( this, geometry, new THREE.LineBasicMaterial( { color: color } ), THREE.LinePieces );
+	THREE.Line.call( this, geometry, new THREE.LineBasicMaterial( { color: color, linewidth: width } ), THREE.LinePieces );
 
 	this.matrixAutoUpdate = false;
 
@@ -48,6 +50,8 @@ THREE.FaceNormalsHelper.prototype.update = ( function ( object ) {
 
 		var faces = this.object.geometry.faces;
 
+		var worldMatrix = this.object.matrixWorld;
+
 		for ( var i = 0, l = faces.length; i < l; i ++ ) {
 
 			var face = faces[ i ];
@@ -56,7 +60,7 @@ THREE.FaceNormalsHelper.prototype.update = ( function ( object ) {
 
 			var idx = 2 * i;
 
-			vertices[ idx ].copy( face.centroid ).applyMatrix4( this.object.matrixWorld );
+			vertices[ idx ].copy( face.centroid ).applyMatrix4( worldMatrix );
 
 			vertices[ idx + 1 ].addVectors( vertices[ idx ], v1 );
 

src/extras/helpers/VertexNormalsHelper.js

@@ -3,7 +3,7 @@
  * @author WestLangley / http://github.com/WestLangley
 */
 
-THREE.VertexNormalsHelper = function ( object, size, hex ) {
+THREE.VertexNormalsHelper = function ( object, size, hex, linewidth ) {
 
 	this.object = object;
 
@@ -11,9 +11,12 @@ THREE.VertexNormalsHelper = function ( object, size, hex ) {
 
 	var color = hex || 0xff0000;
 
+	var width = linewidth || 1;
+
 	var geometry = new THREE.Geometry();
 
 	var vertices = object.geometry.vertices;
+
 	var faces = object.geometry.faces;
 
 	for ( var i = 0, l = faces.length; i < l; i ++ ) {
@@ -29,7 +32,7 @@ THREE.VertexNormalsHelper = function ( object, size, hex ) {
 
 	}
 
-	THREE.Line.call( this, geometry, new THREE.LineBasicMaterial( { color: color } ), THREE.LinePieces );
+	THREE.Line.call( this, geometry, new THREE.LineBasicMaterial( { color: color, linewidth: width } ), THREE.LinePieces );
 
 	this.matrixAutoUpdate = false;
 
@@ -56,8 +59,11 @@ THREE.VertexNormalsHelper.prototype.update = ( function ( object ) {
 		var vertices = this.geometry.vertices;
 
 		var verts = this.object.geometry.vertices;
+
 		var faces = this.object.geometry.faces;
 
+		var worldMatrix = this.object.matrixWorld;
+
 		var idx = 0;
 
 		for ( var i = 0, l = faces.length; i < l; i ++ ) {
@@ -71,7 +77,7 @@ THREE.VertexNormalsHelper.prototype.update = ( function ( object ) {
 
 				var normal = face.vertexNormals[ j ];
 
-				vertices[ idx ].copy( vertex ).applyMatrix4( this.object.matrixWorld );
+				vertices[ idx ].copy( vertex ).applyMatrix4( worldMatrix );
 
 				v1.copy( normal ).applyMatrix3( this.normalMatrix ).normalize().multiplyScalar( this.size );
 

src/extras/helpers/VertexTangentsHelper.js

@@ -0,0 +1,96 @@
+/**
+ * @author mrdoob / http://mrdoob.com/
+ * @author WestLangley / http://github.com/WestLangley
+*/
+
+THREE.VertexTangentsHelper = function ( object, size, hex, linewidth ) {
+
+	this.object = object;
+
+	this.size = size || 1;
+
+	var color = hex || 0x0000ff;
+
+	var width = linewidth || 1;
+
+	var geometry = new THREE.Geometry();
+
+	var vertices = object.geometry.vertices;
+
+	var faces = object.geometry.faces;
+
+	for ( var i = 0, l = faces.length; i < l; i ++ ) {
+
+		var face = faces[ i ];
+
+		for ( var j = 0, jl = face.vertexTangents.length; j < jl; j ++ ) {
+
+			geometry.vertices.push( new THREE.Vector3() );
+			geometry.vertices.push( new THREE.Vector3() );
+
+		}
+
+	}
+
+	THREE.Line.call( this, geometry, new THREE.LineBasicMaterial( { color: color, linewidth: width } ), THREE.LinePieces );
+
+	this.matrixAutoUpdate = false;
+
+	this.update();
+
+};
+
+THREE.VertexTangentsHelper.prototype = Object.create( THREE.Line.prototype );
+
+THREE.VertexTangentsHelper.prototype.update = ( function ( object ) {
+
+	var v1 = new THREE.Vector3();
+
+	return function( object ) {
+
+		var keys = [ 'a', 'b', 'c', 'd' ];
+
+		this.object.updateMatrixWorld( true );
+
+		var vertices = this.geometry.vertices;
+
+		var verts = this.object.geometry.vertices;
+
+		var faces = this.object.geometry.faces;
+
+		var worldMatrix = this.object.matrixWorld;
+
+		var idx = 0;
+
+		for ( var i = 0, l = faces.length; i < l; i ++ ) {
+
+			var face = faces[ i ];
+
+			for ( var j = 0, jl = face.vertexTangents.length; j < jl; j ++ ) {
+
+				var vertexId = face[ keys[ j ] ];
+				var vertex = verts[ vertexId ];
+
+				var tangent = face.vertexTangents[ j ];
+
+				vertices[ idx ].copy( vertex ).applyMatrix4( worldMatrix );
+
+				v1.copy( tangent ).transformDirection( worldMatrix ).multiplyScalar( this.size );
+
+				v1.add( vertices[ idx ] );
+				idx = idx + 1;
+
+				vertices[ idx ].copy( v1 );
+				idx = idx + 1;
+
+			}
+
+		}
+
+		this.geometry.verticesNeedUpdate = true;
+
+		return this;
+
+	}
+
+}());

utils/build/includes/extras.json

@@ -54,6 +54,7 @@
 	"src/extras/helpers/PointLightHelper.js",
 	"src/extras/helpers/SpotLightHelper.js",
 	"src/extras/helpers/VertexNormalsHelper.js",
+	"src/extras/helpers/VertexTangentsHelper.js",
 	"src/extras/helpers/WireframeHelper.js",
 	"src/extras/objects/ImmediateRenderObject.js",
 	"src/extras/objects/LensFlare.js",