diff --git a/examples/js/BlendCharacter.js b/examples/js/BlendCharacter.js index 85da7715cbec3ac47b219a2c2d399727a200ef72..ee9dedfebfc8e7fae382a21870db142c5308ffae 100644 --- a/examples/js/BlendCharacter.js +++ b/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; + + } + }; diff --git a/examples/js/BlendCharacterGui.js b/examples/js/BlendCharacterGui.js index 097ff190c2710d130e3f6b346a223141943ab24e..e082c664698d42caaa289f5ce5b4ab7669e0104e 100644 --- a/examples/js/BlendCharacterGui.js +++ b/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); } \ No newline at end of file diff --git a/examples/webgl_animation_skinning_blending.html b/examples/webgl_animation_skinning_blending.html index d9f29b65c763d1fe32aac70f71e8e5f2a81fa506..e51e00e49fdedac46ce287c595fa663b343028f5 100644 --- a/examples/webgl_animation_skinning_blending.html +++ b/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; diff --git a/examples/webgl_animation_skinning_morph.html b/examples/webgl_animation_skinning_morph.html index 3555dc926437a4689b349b12eaf38dd1011eca56..e9f5acfd706c165057ab726181e2e35908ccc2dc 100644 --- a/examples/webgl_animation_skinning_morph.html +++ b/examples/webgl_animation_skinning_morph.html @@ -47,6 +47,8 @@ + +