MMDAnimationHelper.html 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <base href="../../../" />
  6. <script src="page.js"></script>
  7. <link type="text/css" rel="stylesheet" href="page.css" />
  8. </head>
  9. <body>
  10. <h1>[name]</h1>
  11. <p class="desc"> A animation helper for <a href="https://sites.google.com/view/evpvp/">`MMD`</a> resources. <br /><br />
  12. [name] handles animation of MMD assets loaded by [page:MMDLoader] with MMD special features as IK, Grant, and Physics.
  13. It uses [page:CCDIKSolver] and [page:MMDPhysics] inside.
  14. </p>
  15. <h2>Import</h2>
  16. <p>
  17. [name] is an add-on, and must be imported explicitly.
  18. See [link:#manual/introduction/Installation Installation / Addons].
  19. </p>
  20. <code>
  21. import { MMDAnimationHelper } from 'three/addons/animation/MMDAnimationHelper.js';
  22. </code>
  23. <h2>Code Example</h2>
  24. <code>
  25. // Instantiate a helper
  26. const helper = new MMDAnimationHelper();
  27. // Load MMD resources and add to helper
  28. new MMDLoader().loadWithAnimation(
  29. 'models/mmd/miku.pmd',
  30. 'models/mmd/dance.vmd',
  31. function ( mmd ) {
  32. helper.add( mmd.mesh, {
  33. animation: mmd.animation,
  34. physics: true
  35. } );
  36. scene.add( mmd.mesh );
  37. new THREE.AudioLoader().load(
  38. 'audios/mmd/song.mp3',
  39. function ( buffer ) {
  40. const listener = new THREE.AudioListener();
  41. const audio = new THREE.Audio( listener ).setBuffer( buffer );
  42. listener.position.z = 1;
  43. scene.add( audio );
  44. scene.add( listener );
  45. }
  46. );
  47. }
  48. );
  49. function render() {
  50. helper.update( clock.getDelta() );
  51. renderer.render( scene, camera );
  52. }
  53. </code>
  54. <h2>Examples</h2>
  55. <p>
  56. [example:webgl_loader_mmd]<br />
  57. [example:webgl_loader_mmd_pose]<br />
  58. [example:webgl_loader_mmd_audio]
  59. </p>
  60. <h2>Constructor</h2>
  61. <h3>[name]( [param:Object params] )</h3>
  62. <p>
  63. [page:Object params] — (optional)<br />
  64. </p>
  65. <ul>
  66. <li> [page:Boolean sync] - Whether animation durations of added objects are synched. Default is true.</li>
  67. <li> [page:Number afterglow] - Default is 0.0.</li>
  68. <li> [page:Boolean resetPhysicsOnLoop] - Default is true.</li>
  69. <li> [page:Boolean pmxAnimation] - If it is set to true, the helper follows the complex and costly PMX animation system.
  70. Try this option only if your PMX model animation doesn't work well. Default is false.</li>
  71. </ul>
  72. <p>
  73. Creates a new [name].
  74. </p>
  75. <h2>Properties</h2>
  76. <h3>[property:Audio audio]</h3>
  77. <p>An [page:Audio] added to helper.</p>
  78. <h3>[property:Camera camera]</h3>
  79. <p>An [page:Camera] added to helper.</p>
  80. <h3>[property:Array meshes]</h3>
  81. <p>An array of [page:SkinnedMesh] added to helper.</p>
  82. <h3>[property:WeakMap objects]</h3>
  83. <p>A [page:WeakMap] which holds animation stuffs used in helper for objects added to helper. For example, you can access [page:AnimationMixer] for an added [page:SkinnedMesh] with "helper.objects.get( mesh ).mixer"</p>
  84. <h3>[property:Function onBeforePhysics]</h3>
  85. <p>An optional callback that is executed immediately before the physicis calculation for an [page:SkinnedMesh]. This function is called with the [page:SkinnedMesh].</p>
  86. <h2>Methods</h2>
  87. <h3>[method:MMDAnimationHelper add]( [param:Object3D object], [param:Object params] )</h3>
  88. <p>
  89. [page:Object3D object] — [page:SkinnedMesh], [page:Camera], or [page:Audio]<br />
  90. [page:Object params] — (optional)<br />
  91. </p>
  92. <ul>
  93. <li>[page:AnimationClip animation] - an [page:AnimationClip] or an array of [page:AnimationClip] set to object. Only for [page:SkinnedMesh] and [page:Camera]. Default is undefined.</li>
  94. <li>[page:Boolean physics] - Only for [page:SkinnedMesh]. A flag whether turn on physics. Default is true.</li>
  95. <li>[page:Integer warmup] - Only for [page:SkinnedMesh] and physics is true. Physics parameter. Default is 60.</li>
  96. <li>[page:Number unitStep] - Only for [page:SkinnedMesh] and physics is true. Physics parameter. Default is 1 / 65.</li>
  97. <li>[page:Integer maxStepNum] - Only for [page:SkinnedMesh] and physics is true. Physics parameter. Default is 3.</li>
  98. <li>[page:Vector3 gravity] - Only for [page:SkinnedMesh] and physics is true. Physics parameter. Default is ( 0, - 9.8 * 10, 0 ).</li>
  99. <li>[page:Number delayTime] - Only for [page:Audio]. Default is 0.0.</li>
  100. </ul>
  101. <p>
  102. Add an [page:SkinnedMesh], [page:Camera], or [page:Audio] to helper and setup animation. The anmation durations of added objects are synched.
  103. If camera/audio has already been added, it'll be replaced with a new one.
  104. </p>
  105. <h3>[method:MMDAnimationHelper enable]( [param:String key], [param:Boolean enabled] )</h3>
  106. <p>
  107. [page:String key] — Allowed strings are 'animation', 'ik', 'grant', 'physics', and 'cameraAnimation'.<br />
  108. [page:Boolean enabled] — true is enable, false is disable<br />
  109. </p>
  110. <p>
  111. Enable/Disable an animation feature
  112. </p>
  113. <h3>[method:MMDAnimationHelper pose]( [param:SkinnedMesh mesh], [param:Object vpd], [param:Object params] )</h3>
  114. <p>
  115. [page:SkinnedMesh mesh] — [page:SkinnedMesh] which changes the posing. It doesn't need to be added to helper.<br />
  116. [page:Object vpd] — VPD content obtained by [page:MMDLoader].loadVPD<br />
  117. [page:Object params] — (optional)<br />
  118. </p>
  119. <ul>
  120. <li>[page:Boolean resetPose] - Default is true.</li>
  121. <li>[page:Boolean ik] - Default is true.</li>
  122. <li>[page:Boolean grant] - Default is true.</li>
  123. </ul>
  124. <p>
  125. Changes the posing of [page:SkinnedMesh] as VPD content specifies.
  126. </p>
  127. <h3>[method:MMDAnimationHelper remove]( [param:Object3D object] )</h3>
  128. <p>
  129. [page:Object3D object] — [page:SkinnedMesh], [page:Camera], or [page:Audio]<br />
  130. </p>
  131. <p>
  132. Remove an [page:SkinnedMesh], [page:Camera], or [page:Audio] from helper.
  133. </p>
  134. <h3>[method:MMDAnimationHelper update]( [param:Number delta] )</h3>
  135. <p>
  136. [page:Number delta] — number in second<br />
  137. </p>
  138. <p>
  139. Advance mixer time and update the animations of objects added to helper
  140. </p>
  141. <h2>Source</h2>
  142. <p>
  143. [link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/animation/MMDAnimationHelper.js examples/jsm/animation/MMDAnimationHelper.js]
  144. </p>
  145. </body>
  146. </html>