Trying to get SkeletonHelper to always be visible.

mrdoob · mrdoob · commit 589fea276b0a · 2014-04-11T23:31:56.000-06:00
diff --git a/examples/js/BlendCharacter.js b/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 );
 
 	}
 
diff --git a/examples/js/BlendCharacterGui.js b/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 ) );
 	}
 
 
diff --git a/examples/webgl_animation_skinning_blending.html b/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 );
 
 			}
 
diff --git a/src/extras/helpers/SkeletonHelper.js b/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 );
 
 		}
 

Original file line number	Diff line number	Diff line change
`@@ -36,7 +36,7 @@ THREE.BlendCharacter = function () {`
`36`	`36`	`scope.skeletonHelper = new THREE.SkeletonHelper( scope.skeleton, 0.5, 1 );`
`37`	`37`	`scope.add( scope.skeletonHelper );`
`38`	`38`
`39`		`- scope.toggleShowBones( false );`
	`39`	`+ scope.showSkeleton( true );`
`40`	`40`
`41`	`41`	`// Loading is complete, fire the callback`
`42`	`42`	`if ( onLoad !== undefined ) onLoad();`
`@@ -234,10 +234,9 @@ THREE.BlendCharacter = function () {`
`234`	`234`
`235`	`235`	`}`
`236`	`236`
`237`		`- this.toggleShowBones = function( shouldShow ) {`
	`237`	`+ this.showSkeleton = function( boolean ) {`
`238`	`238`
`239`		`- this.visible = !shouldShow;`
`240`		`- this.skeletonHelper.setVisible( shouldShow );`
	`239`	`+ this.skeletonHelper.setVisible( boolean );`
`241`	`240`
`242`	`241`	`}`
`243`	`242`