Trying to get SkeletonHelper to always be visible.

examples/js/BlendCharacter.js

@@ -36,7 +36,7 @@ THREE.BlendCharacter = function () {
 			scope.skeletonHelper = new THREE.SkeletonHelper( scope.skeleton, 0.5, 1 );
 			scope.add( scope.skeletonHelper );
 
-			scope.toggleShowBones( false );
+			scope.showSkeleton( true );
 
 			// Loading is complete, fire the callback
 			if ( onLoad !== undefined ) onLoad();
@@ -234,10 +234,9 @@ THREE.BlendCharacter = function () {
 
 	}
 
-	this.toggleShowBones = function( shouldShow ) {
+	this.showSkeleton = function( boolean ) {
 
-		this.visible = !shouldShow;
-		this.skeletonHelper.setVisible( shouldShow );
+		this.skeletonHelper.setVisible( boolean );
 
 	}
 

examples/js/BlendCharacterGui.js

@@ -8,7 +8,7 @@ function BlendCharacterGui(animations) {
 
 		gui: null,
 		"Lock Camera": false,
-		"Show Bones": false,
+		"Show Skeleton": true,
 		"Time Scale": 1.0,
 		"Step Size": 0.016,
 		"Crossfade Time": 3.5,
@@ -20,9 +20,9 @@ function BlendCharacterGui(animations) {
 
 	var animations = animations;
 
-	this.shouldShowBones = function() {
+	this.showSkeleton = function() {
 
-		return controls['Show Bones'];
+		return controls['Show Skeleton'];
 
 	};
 
@@ -49,7 +49,7 @@ function BlendCharacterGui(animations) {
 		var blending = controls.gui.addFolder( 'Blend Tuning' );
 
 		settings.add( controls, "Lock Camera" ).onChange( controls.lockCameraChanged );
-		settings.add( controls, "Show Bones" ).onChange( controls.showBonesChanged );
+		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 );
 		settings.add( controls, "Crossfade Time", 0.1, 6.0, 0.05 );
@@ -177,15 +177,15 @@ function BlendCharacterGui(animations) {
 		window.dispatchEvent( new CustomEvent( 'toggle-lock-camera', data ) );
 	}
 
-	controls.showBonesChanged = function() {
+	controls.showSkeletonChanged = function() {
 
 		var data = {
 			detail: {
-				shouldShow: controls['Show Bones']
+				shouldShow: controls['Show Skeleton']
 			}
 		}
 
-		window.dispatchEvent( new CustomEvent( 'toggle-show-bones', data ) );
+		window.dispatchEvent( new CustomEvent( 'toggle-show-skeleton', data ) );
 	}
 
 

examples/webgl_animation_skinning_blending.html

@@ -94,7 +94,7 @@
 				window.addEventListener( 'crossfade', onCrossfade );
 				window.addEventListener( 'warp', onWarp );
 				window.addEventListener( 'toggle-lock-camera', onLockCameraToggle );
-				window.addEventListener( 'toggle-show-bones', onShowBonesToggle );
+				window.addEventListener( 'toggle-show-skeleton', onShowSkeleton );
 
 				blendMesh = new THREE.BlendCharacter();
 				blendMesh.load( "models/skinned/marine/marine_anims.js", start );
@@ -190,10 +190,10 @@
 
 			}
 
-			function onShowBonesToggle( event ) {
+			function onShowSkeleton( event ) {
 
 				var shouldShow = event.detail.shouldShow;
-				blendMesh.toggleShowBones( shouldShow );
+				blendMesh.showSkeleton( shouldShow );
 
 			}
 

src/extras/helpers/SkeletonHelper.js

@@ -18,7 +18,7 @@ THREE.SkeletonHelper = function ( skeleton, jointBoxSize, scaleRatio ) {
 
 		var bone = skeleton.bones[ i ];
 		var boxGeometry = new THREE.BoxGeometry( boxSize, boxSize, boxSize );
-		var boxMaterial = new THREE.MeshBasicMaterial();
+		var boxMaterial = new THREE.MeshBasicMaterial( { depthTest: false, depthWrite: false } );
 
 		bone.helper = {};
 		bone.helper.box = new THREE.Mesh( boxGeometry, boxMaterial );
@@ -29,18 +29,16 @@ THREE.SkeletonHelper = function ( skeleton, jointBoxSize, scaleRatio ) {
 
 		if ( bone.parent instanceof THREE.Bone ) {
 
-			var lineMaterial = new THREE.LineBasicMaterial();
+			var lineMaterial = new THREE.LineBasicMaterial( { vertexColors: true, depthTest: false, depthWrite: false } );
 			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.add( bone.helper.line );
 
 		}