SkeletonHelper: Properly set matrixWorld transform. Also added skeleton toggles in animation examples.

examples/js/BlendCharacter.js

@@ -33,10 +33,11 @@ THREE.BlendCharacter = function () {
 
 			// Create the debug visualization
 
-			scope.skeletonHelper = new THREE.SkeletonHelper( scope.skeleton );
+			scope.skeletonHelper = new THREE.SkeletonHelper( scope );
+			scope.skeletonHelper.material.linewidth = 3;
 			scope.add( scope.skeletonHelper );
 
-			scope.showSkeleton( true );
+			scope.showSkeleton( false );
 
 			// Loading is complete, fire the callback
 			if ( onLoad !== undefined ) onLoad();
@@ -240,6 +241,12 @@ THREE.BlendCharacter = function () {
 
 	}
 
+	this.showModel = function( boolean ) {
+
+		this.visible = boolean;
+
+	}
+
 };
 
 

examples/js/BlendCharacterGui.js

@@ -8,7 +8,8 @@ function BlendCharacterGui(animations) {
 
 		gui: null,
 		"Lock Camera": false,
-		"Show Skeleton": true,
+		"Show Model": true,
+		"Show Skeleton": false,
 		"Time Scale": 1.0,
 		"Step Size": 0.016,
 		"Crossfade Time": 3.5,
@@ -20,6 +21,12 @@ function BlendCharacterGui(animations) {
 
 	var animations = animations;
 
+	this.showModel = function() {
+
+		return controls['Show Model'];
+
+	};
+
 	this.showSkeleton = function() {
 
 		return controls['Show Skeleton'];
@@ -49,6 +56,7 @@ function BlendCharacterGui(animations) {
 		var blending = controls.gui.addFolder( 'Blend Tuning' );
 
 		settings.add( controls, "Lock Camera" ).onChange( controls.lockCameraChanged );
+		settings.add( controls, "Show Model" ).onChange( controls.showModelChanged );
 		settings.add( controls, "Show Skeleton" ).onChange( controls.showSkeletonChanged );
 		settings.add( controls, "Time Scale", 0, 1, 0.01 );
 		settings.add( controls, "Step Size", 0.01, 0.1, 0.01 );
@@ -189,6 +197,18 @@ function BlendCharacterGui(animations) {
 	}
 
 
+	controls.showModelChanged = function() {
+
+		var data = {
+			detail: {
+				shouldShow: controls['Show Model']
+			}
+		}
+
+		window.dispatchEvent( new CustomEvent( 'toggle-show-model', data ) );
+	}
+
+
 	init.call(this);
 
 }

examples/webgl_animation_skinning_blending.html

@@ -95,6 +95,7 @@
 				window.addEventListener( 'warp', onWarp );
 				window.addEventListener( 'toggle-lock-camera', onLockCameraToggle );
 				window.addEventListener( 'toggle-show-skeleton', onShowSkeleton );
+				window.addEventListener( 'toggle-show-model', onShowModel );
 
 				blendMesh = new THREE.BlendCharacter();
 				blendMesh.load( "models/skinned/marine/marine_anims.js", start );
@@ -197,6 +198,13 @@
 
 			}
 
+			function onShowModel( event ) {
+
+				var shouldShow = event.detail.shouldShow;
+				blendMesh.showModel( shouldShow );
+
+			}
+
 			function start() {
 
 				blendMesh.rotation.y = Math.PI * -135 / 180;

examples/webgl_animation_skinning_morph.html

@@ -47,6 +47,8 @@
 		<script src="js/Detector.js"></script>
 		<script src="js/libs/stats.min.js"></script>
 
+		<script src="js/libs/dat.gui.min.js"></script>
+
 		<script>
 
 			var SCREEN_WIDTH = window.innerWidth;
@@ -159,6 +161,10 @@
 
 				} );
 
+				// GUI
+
+				initGUI();
+
 				//
 
 				window.addEventListener( 'resize', onWindowResize, false );
@@ -250,9 +256,9 @@
 				mesh.castShadow = true;
 				mesh.receiveShadow = true;
 
-				helper = new THREE.SkeletonHelper( mesh.skeleton );
-				helper.position.copy( mesh.position );
-				helper.scale.copy( mesh.scale );
+				helper = new THREE.SkeletonHelper( mesh );
+				helper.material.linewidth = 3;
+				helper.visible = false;
 				scene.add( helper );
 
 				var animation = new THREE.Animation( mesh, geometry.animation.name );
@@ -260,6 +266,21 @@
 
 			}
 
+			function initGUI() {
+
+				var API = {
+					'show model'    : true,
+					'show skeleton' : false
+				};
+
+				var gui = new dat.GUI();
+
+				gui.add( API, 'show model' ).onChange( function() { mesh.visible = API[ 'show model' ]; } );
+
+				gui.add( API, 'show skeleton' ).onChange( function() { helper.visible = API[ 'show skeleton' ]; } );
+
+			}
+
 			function onDocumentMouseMove( event ) {
 
 				mouseX = ( event.clientX - windowHalfX );

src/extras/helpers/SkeletonHelper.js

@@ -4,7 +4,9 @@
  * @author mrdoob / http://mrdoob.com/
  */
 
-THREE.SkeletonHelper = function ( skeleton ) {
+THREE.SkeletonHelper = function ( object ) {
+
+	var skeleton = object.skeleton;
 
 	var geometry = new THREE.Geometry();
 
@@ -29,6 +31,9 @@ THREE.SkeletonHelper = function ( skeleton ) {
 
 	this.skeleton = skeleton;
 
+	this.matrixWorld = object.matrixWorld;
+	this.matrixAutoUpdate = false;
+
 	this.update();
 
 };