Converted the bone helper into a skeleton helper.

examples/js/BlendCharacter.js

@@ -34,14 +34,8 @@ THREE.BlendCharacter = function () {
 
 			// Create the debug visualization
 
-			for ( var i = 0; i < self.skeleton.bones.length; ++i ) {
-
-				var helper = new THREE.BoneHelper( self.skeleton.bones[ i ], 0.5, 1 );
-				helper.update();
-				self.add( helper );
-				self.boneHelpers.push( helper );
-
-			}
+			self.skeletonHelper = new THREE.SkeletonHelper( self.skeleton, 0.5, 1 );
+			self.add( self.skeletonHelper );
 
 			self.toggleShowBones( false );
 
@@ -52,7 +46,7 @@ THREE.BlendCharacter = function () {
 
 	};
 
-	this.updateWeights = function( dt ) {
+	this.update = function( dt ) {
 
 
 		for ( var i = this.weightSchedule.length - 1; i >= 0; --i ) {
@@ -84,6 +78,7 @@ THREE.BlendCharacter = function () {
 		}
 
 		this.updateWarps( dt );
+		this.skeletonHelper.update();
 
 	};
 

examples/webgl_animation_skinning_blending.html

@@ -235,15 +235,11 @@
 
         // modify blend weights
 
-        blendMesh.updateWeights( stepSize );
+        blendMesh.update( stepSize );
         gui.update();
 
         THREE.AnimationHandler.update( stepSize );
 
-        // update the transform on the bone visualization
-
-        blendMesh.updateBoneHelpers();
-
         renderer.render( scene, camera );
         stats.update();
 

src/extras/helpers/BoneHelper.js

@@ -1,68 +0,0 @@
-/**
- * @author Sean Griffin / http://twitter.com/sgrif
- * @author Michael Guerrero / http://realitymeltdown.com
- */
-
-THREE.BoneHelper = function ( bone, jointBoxSize, scaleRatio ) {
-
-  THREE.Object3D.call( this );
-
-  this.scaleRatio = ( scaleRatio !== undefined ) ? scaleRatio : 1;
-  this.bone = bone;
-
-  var jointBoxSize = ( jointBoxSize !== undefined ) ? jointBoxSize : 1;
-  var boxSize = jointBoxSize * this.scaleRatio;
-  var boxGeometry = new THREE.BoxGeometry(boxSize, boxSize, boxSize);
-  var boxMaterial = new THREE.MeshBasicMaterial();
-
-  this.cube = new THREE.Mesh(boxGeometry, boxMaterial);
-  this.add(this.cube);
-
-  this.axes = new THREE.AxisHelper( jointBoxSize * 3 );
-  this.add( this.axes );
-
-  if ( this.bone.parent instanceof THREE.Bone ) {
-
-    var lineMaterial = new THREE.LineBasicMaterial();
-    var lineGeometry = new THREE.Geometry();
-
-    lineMaterial.vertexColors = true;
-
-    lineGeometry.vertices.push( new THREE.Vector3() );
-    lineGeometry.vertices.push( new THREE.Vector3() );
-    lineGeometry.colors.push( new THREE.Color( 1, 1, 0 ) );
-    lineGeometry.colors.push( new THREE.Color( 0, 0, 0 ) );
-
-    this.line = new THREE.Line( lineGeometry, lineMaterial );
-    this.add(this.line);
-
-  }
-
-  this.update();
-};
-
-
-THREE.BoneHelper.prototype = Object.create( THREE.Object3D.prototype );
-
-THREE.BoneHelper.prototype.update = function () {
-
-  if ( this.visible && this.bone.parent instanceof THREE.Bone ) {
-
-    this.bone.skinMatrix.decompose( this.cube.position, this.cube.quaternion, this.cube.scale );
-    this.cube.position.multiplyScalar( this.scaleRatio );
-
-    this.axes.quaternion = this.cube.quaternion;
-    this.axes.position = this.cube.position;
-    this.axes.scale = this.cube.scale;
-
-    this.line.geometry.vertices[0].setFromMatrixPosition( this.bone.skinMatrix );
-    this.line.geometry.vertices[0].multiplyScalar( this.scaleRatio );
-
-    this.line.geometry.vertices[1].setFromMatrixPosition( this.bone.parent.skinMatrix );
-    this.line.geometry.vertices[1].multiplyScalar( this.scaleRatio );
-
-    this.line.geometry.verticesNeedUpdate = true;
-
-  }
-
-};

src/extras/helpers/SkeletonHelper.js

@@ -0,0 +1,102 @@
+/**
+ * @author Sean Griffin / http://twitter.com/sgrif
+ * @author Michael Guerrero / http://realitymeltdown.com
+ */
+
+THREE.SkeletonHelper = function ( skeleton, jointBoxSize, scaleRatio ) {
+
+  THREE.Object3D.call( this );
+
+  this.scaleRatio = ( scaleRatio !== undefined ) ? scaleRatio : 1;
+  this.skeleton = skeleton;
+
+  var jointBoxSize = ( jointBoxSize !== undefined ) ? jointBoxSize : 1;
+  var boxSize = jointBoxSize * this.scaleRatio;
+
+  for ( var i = 0; i < skeleton.bones.length; ++i ) {
+
+    var bone = skeleton.bones[ i ];
+    var boxGeometry = new THREE.BoxGeometry( boxSize, boxSize, boxSize );
+    var boxMaterial = new THREE.MeshBasicMaterial();
+
+    bone.helper = {};
+    bone.helper.box = new THREE.Mesh( boxGeometry, boxMaterial );
+    bone.helper.axes = new THREE.AxisHelper( jointBoxSize * 3 );
+
+    this.add( bone.helper.box );
+    this.add( bone.helper.axes );
+
+    if ( bone.parent instanceof THREE.Bone ) {
+
+      var lineMaterial = new THREE.LineBasicMaterial();
+      var lineGeometry = new THREE.Geometry();
+
+      lineMaterial.vertexColors = true;
+
+      lineGeometry.vertices.push( new THREE.Vector3() );
+      lineGeometry.vertices.push( new THREE.Vector3() );
+      lineGeometry.colors.push( new THREE.Color( 1, 1, 0 ) );
+      lineGeometry.colors.push( new THREE.Color( 0, 0, 0 ) );
+
+      bone.helper.line = new THREE.Line( lineGeometry, lineMaterial );
+      this.add( bone.helper.line);
+
+    }
+
+  }
+
+  this.update();
+};
+
+
+THREE.SkeletonHelper.prototype = Object.create( THREE.Object3D.prototype );
+
+THREE.SkeletonHelper.prototype.update = function () {
+
+  for ( var i = 0; i < this.skeleton.bones.length; ++i ) {
+
+    var bone = this.skeleton.bones[ i ];
+
+    if ( this.visible && bone.parent instanceof THREE.Bone ) {
+
+      bone.skinMatrix.decompose( bone.helper.box.position, bone.helper.box.quaternion, bone.helper.box.scale );
+      bone.helper.box.position.multiplyScalar( this.scaleRatio );
+
+      bone.helper.axes.quaternion = bone.helper.box.quaternion;
+      bone.helper.axes.position = bone.helper.box.position;
+      bone.helper.axes.scale = bone.helper.box.scale;
+
+      bone.helper.line.geometry.vertices[0].setFromMatrixPosition( bone.skinMatrix );
+      bone.helper.line.geometry.vertices[0].multiplyScalar( this.scaleRatio );
+
+      bone.helper.line.geometry.vertices[1].setFromMatrixPosition( bone.parent.skinMatrix );
+      bone.helper.line.geometry.vertices[1].multiplyScalar( this.scaleRatio );
+
+      bone.helper.line.geometry.verticesNeedUpdate = true;
+
+    }
+
+  }
+
+};
+
+THREE.SkeletonHelper.prototype.setVisible = function ( shouldBeVisible ) {
+
+  for ( var i = 0; i < this.skeleton.bones.length; ++i ) {
+
+    var bone = this.skeleton.bones[ i ];
+    if ( bone.helper ) {
+
+      bone.helper.box.visible = shouldBeVisible;
+      bone.helper.axes.visible = shouldBeVisible;
+
+      if ( bone.parent instanceof THREE.Bone ) {
+
+         bone.helper.line.visible = shouldBeVisible;
+
+      }
+
+    }
+
+  }
+}

utils/build/includes/extras.json

@@ -46,7 +46,6 @@
 	"src/extras/geometries/ParametricGeometry.js",
 	"src/extras/helpers/AxisHelper.js",
 	"src/extras/helpers/ArrowHelper.js",
-	"src/extras/helpers/BoneHelper.js",
 	"src/extras/helpers/BoxHelper.js",
 	"src/extras/helpers/BoundingBoxHelper.js",
 	"src/extras/helpers/CameraHelper.js",
@@ -56,6 +55,7 @@
 	"src/extras/helpers/GridHelper.js",
 	"src/extras/helpers/HemisphereLightHelper.js",
 	"src/extras/helpers/PointLightHelper.js",
+	"src/extras/helpers/SkeletonHelper.js",
 	"src/extras/helpers/SpotLightHelper.js",
 	"src/extras/helpers/VertexNormalsHelper.js",
 	"src/extras/helpers/VertexTangentsHelper.js",