BlendCharacterGui.js 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207
  1. /**
  2. * @author Michael Guerrero / http://realitymeltdown.com
  3. */
  4. function BlendCharacterGui( blendMesh ) {
  5. var controls = {
  6. gui: null,
  7. "Show Model": true,
  8. "Show Skeleton": false,
  9. "Time Scale": 1.0,
  10. "Step Size": 0.016,
  11. "Crossfade Time": 3.5,
  12. "idle": 0.33,
  13. "walk": 0.33,
  14. "run": 0.33
  15. };
  16. var blendMesh = blendMesh;
  17. this.showModel = function() {
  18. return controls[ 'Show Model' ];
  19. };
  20. this.showSkeleton = function() {
  21. return controls[ 'Show Skeleton' ];
  22. };
  23. this.getTimeScale = function() {
  24. return controls[ 'Time Scale' ];
  25. };
  26. this.update = function( time ) {
  27. controls[ 'idle' ] = blendMesh.getWeight( 'idle' );
  28. controls[ 'walk' ] = blendMesh.getWeight( 'walk' );
  29. controls[ 'run' ] = blendMesh.getWeight( 'run' );
  30. };
  31. var init = function() {
  32. controls.gui = new dat.GUI();
  33. var settings = controls.gui.addFolder( 'Settings' );
  34. var playback = controls.gui.addFolder( 'Playback' );
  35. var blending = controls.gui.addFolder( 'Blend Tuning' );
  36. settings.add( controls, "Show Model" ).onChange( controls.showModelChanged );
  37. settings.add( controls, "Show Skeleton" ).onChange( controls.showSkeletonChanged );
  38. settings.add( controls, "Time Scale", 0, 1, 0.01 );
  39. settings.add( controls, "Step Size", 0.01, 0.1, 0.01 );
  40. settings.add( controls, "Crossfade Time", 0.1, 6.0, 0.05 );
  41. // These controls execute functions
  42. playback.add( controls, "start" );
  43. playback.add( controls, "pause" );
  44. playback.add( controls, "step" );
  45. playback.add( controls, "idle to walk" );
  46. playback.add( controls, "walk to run" );
  47. playback.add( controls, "warp walk to run" );
  48. blending.add( controls, "idle", 0, 1, 0.01 ).listen().onChange( controls.weight );
  49. blending.add( controls, "walk", 0, 1, 0.01 ).listen().onChange( controls.weight );
  50. blending.add( controls, "run", 0, 1, 0.01 ).listen().onChange( controls.weight );
  51. settings.open();
  52. playback.open();
  53. blending.open();
  54. };
  55. var getAnimationData = function() {
  56. return {
  57. detail: {
  58. anims: [ "idle", "walk", "run" ],
  59. weights: [ controls[ 'idle' ],
  60. controls[ 'walk' ],
  61. controls[ 'run' ] ]
  62. }
  63. };
  64. };
  65. controls.start = function() {
  66. var startEvent = new CustomEvent( 'start-animation', getAnimationData() );
  67. window.dispatchEvent( startEvent );
  68. };
  69. controls.stop = function() {
  70. var stopEvent = new CustomEvent( 'stop-animation' );
  71. window.dispatchEvent( stopEvent );
  72. };
  73. controls.pause = function() {
  74. var pauseEvent = new CustomEvent( 'pause-animation' );
  75. window.dispatchEvent( pauseEvent );
  76. };
  77. controls.step = function() {
  78. var stepData = { detail: { stepSize: controls[ 'Step Size' ] } };
  79. window.dispatchEvent( new CustomEvent( 'step-animation', stepData ) );
  80. };
  81. controls.weight = function() {
  82. // renormalize
  83. var sum = controls[ 'idle' ] + controls[ 'walk' ] + controls[ 'run' ];
  84. controls[ 'idle' ] /= sum;
  85. controls[ 'walk' ] /= sum;
  86. controls[ 'run' ] /= sum;
  87. var weightEvent = new CustomEvent( 'weight-animation', getAnimationData() );
  88. window.dispatchEvent( weightEvent );
  89. };
  90. controls.crossfade = function( from, to ) {
  91. var fadeData = getAnimationData();
  92. fadeData.detail.from = from;
  93. fadeData.detail.to = to;
  94. fadeData.detail.time = controls[ "Crossfade Time" ];
  95. window.dispatchEvent( new CustomEvent( 'crossfade', fadeData ) );
  96. };
  97. controls.warp = function( from, to ) {
  98. var warpData = getAnimationData();
  99. warpData.detail.from = 'walk';
  100. warpData.detail.to = 'run';
  101. warpData.detail.time = controls[ "Crossfade Time" ];
  102. window.dispatchEvent( new CustomEvent( 'warp', warpData ) );
  103. };
  104. controls[ 'idle to walk' ] = function() {
  105. controls.crossfade( 'idle', 'walk' );
  106. };
  107. controls[ 'walk to run' ] = function() {
  108. controls.crossfade( 'walk', 'run' );
  109. };
  110. controls[ 'warp walk to run' ] = function() {
  111. controls.warp( 'walk', 'run' );
  112. };
  113. controls.showSkeletonChanged = function() {
  114. var data = {
  115. detail: {
  116. shouldShow: controls[ 'Show Skeleton' ]
  117. }
  118. };
  119. window.dispatchEvent( new CustomEvent( 'toggle-show-skeleton', data ) );
  120. };
  121. controls.showModelChanged = function() {
  122. var data = {
  123. detail: {
  124. shouldShow: controls[ 'Show Model' ]
  125. }
  126. };
  127. window.dispatchEvent( new CustomEvent( 'toggle-show-model', data ) );
  128. };
  129. init.call( this );
  130. }