Merge pull request #6901 from sirxemic/SkinnedBlendingFix

Fix skeleton helper rotation in skinning animation example

examples/js/BlendCharacter.js

@@ -29,14 +29,6 @@ THREE.BlendCharacter = function () {
 
 			}
 
-			// Create the debug visualization
-
-			scope.skeletonHelper = new THREE.SkeletonHelper( scope );
-			scope.skeletonHelper.material.linewidth = 3;
-			scope.add( scope.skeletonHelper );
-
-			scope.showSkeleton( false );
-
 			// Loading is complete, fire the callback
 			if ( onLoad !== undefined ) onLoad();
 
@@ -77,7 +69,6 @@ THREE.BlendCharacter = function () {
 		}
 
 		this.updateWarps( dt );
-		this.skeletonHelper.update();
 
 	};
 
@@ -233,12 +224,6 @@ THREE.BlendCharacter = function () {
 
 	};
 
-	this.showSkeleton = function( boolean ) {
-
-		this.skeletonHelper.visible = boolean;
-
-	};
-
 	this.showModel = function( boolean ) {
 
 		this.visible = boolean;

examples/webgl_animation_skinning_blending.html

@@ -46,7 +46,7 @@
 
 			var container, stats;
 
-			var blendMesh, camera, scene, renderer, controls;
+			var blendMesh, skeletonHelper, camera, scene, renderer, controls;
 
 			var clock = new THREE.Clock();
 			var gui = null;
@@ -186,7 +186,7 @@
 			function onShowSkeleton( event ) {
 
 				var shouldShow = event.detail.shouldShow;
-				blendMesh.showSkeleton( shouldShow );
+				skeletonHelper.visible = shouldShow;
 
 			}
 
@@ -220,6 +220,14 @@
 
 				gui = new BlendCharacterGui(blendMesh.animations);
 
+				// Create the debug visualization
+
+				skeletonHelper = new THREE.SkeletonHelper( blendMesh );
+				skeletonHelper.material.linewidth = 3;
+				scene.add( skeletonHelper );
+
+				skeletonHelper.visible = false;
+
 				animate();
 			}
 
@@ -236,6 +244,7 @@
 				// modify blend weights
 
 				blendMesh.update( stepSize );
+				skeletonHelper.update();
 				gui.update();
 
 				THREE.AnimationHandler.update( stepSize );