MorphAnimMesh.html 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <script src="../../list.js"></script>
  6. <script src="../../page.js"></script>
  7. <link type="text/css" rel="stylesheet" href="../../page.css" />
  8. </head>
  9. <body>
  10. [page:Object3D] &rarr;
  11. <h1>[name]</h1>
  12. <div class="desc">Play a sequence of morphs in a smooth animation sequence.</div>
  13. <h2>Examples</h2>
  14. <div>
  15. [example:webgl_lights_hemisphere lights / hemisphere ]<br/>
  16. [example:webgl_morphtargets_md2 morphtargets / md2 ]<br/>
  17. [example:webgl_loader_json_blender loader / json / blender ]
  18. </div>
  19. <code>
  20. var meshAnim;
  21. loader.load( "models/animated/flamingo.js", function( geometry ) {
  22. meshAnim = new THREE.MorphAnimMesh( geometry, material );
  23. meshAnim.duration = 1000;
  24. scene.add( meshAnim );
  25. }
  26. function update() {
  27. var delta = clock.getDelta();
  28. meshAnim.updateAnimation( 1000 * delta );
  29. }
  30. </code>
  31. <h2>Constructor</h2>
  32. <h3>[name]([page:Geometry geometry], [page:Material material])</h3>
  33. <div>
  34. geometry — An instance of [page:Geometry].<br />
  35. material — An instance of [page:Material] (optional).
  36. </div>
  37. <h2>Properties</h2>
  38. <h3>[property:Boolean directionBackwards]</h3>
  39. <div>
  40. Animation is playing backwards
  41. </div>
  42. <h3>[property:Float direction]</h3>
  43. <div>
  44. 1 if playing forward, -1 if playing backwards
  45. </div>
  46. <h3>[property:Integer startKeyframe]</h3>
  47. <div>
  48. The first keyframe (morph) of the sequence
  49. </div>
  50. <h3>[property:Integer endKeyframe]</h3>
  51. <div>
  52. The last keyframe (morph) of the sequence
  53. </div>
  54. <h3>[property:Boolean mirroredLoop]</h3>
  55. <div>
  56. Loop animation back and forth
  57. </div>
  58. <h3>[property:Integer lastKeyframe]</h3>
  59. <div>
  60. The index of the last keyframe played.
  61. </div>
  62. <h3>[property:Integer currentKeyframe]</h3>
  63. <div>
  64. The index of the current frame being played.
  65. </div>
  66. <h3>[property:Integer length]</h3>
  67. <div>
  68. The number of frames (morphs)
  69. </div>
  70. <h3>[property:Float time]</h3>
  71. <div>
  72. The current playback position of the animation in milliseconds.
  73. </div>
  74. <h3>[property:Float duration]</h3>
  75. <div>
  76. The length of the animation in milliseconds.
  77. </div>
  78. <h2>Methods</h2>
  79. <h3>[method:null setDirectionForward]()</h3>
  80. <div>
  81. Sets the animation to play forwards
  82. </div>
  83. <h3>[method:null setDirectionBackward]()</h3>
  84. <div>
  85. Set the animation to play backwards.
  86. </div>
  87. <h3>[method:null playAnimation]([page:String label], [page:Float fps])</h3>
  88. <div>
  89. label -- The label of the animation <br />
  90. fps -- The frames per second (in seconds)
  91. </div>
  92. <div>
  93. Starts playing a labeled animation. Animations are defined by calling [page:MorphAnimMesh.parseAnimations parseAnimations].
  94. </div>
  95. <h3>[method:null setFrameRange]([page:Integer start], [page:Integer end])</h3>
  96. <div>
  97. start -- The starting frame (morph) index <br />
  98. end -- The ending frame (morph) index
  99. </div>
  100. <div>
  101. Sets the range of morphs to be played
  102. </div>
  103. <h3>[method:null parseAnimations]()</h3>
  104. <div>
  105. Goes through the geometry's morphTargets and generates animations based on the morphTargets' names (morph.name). Names
  106. are of the form "walk_01", "walk_02", "walk_03", etc or "run001", "run002", "run003". The animation label is then
  107. the part before the underscore and number, so "walk" or "run" in the examples.<br/><br/>
  108. This function changes the underlying geometry object by adding the animations property to it. This property
  109. is set to an object of key/pair values, with the key being the label and the value being an object with
  110. a start and end property that represents the frame index.
  111. </div>
  112. <h3>[method:null updateAnimation]([page:Float delta])</h3>
  113. <div>
  114. delta -- The change in time in milliseconds
  115. </div>
  116. <div>
  117. Update the morphTargetInfluences array on the MorphAnimMesh.
  118. </div>
  119. <h3>[method:null setAnimationLabel]([page:String label], [page:Integer start], [page:Integer end])</h3>
  120. <div>
  121. label -- The name of the animation <br />
  122. start -- The starting frame index <br />
  123. end -- The ending frame index
  124. </div>
  125. <div>
  126. Defines an animation. Sets the geometry.animations[label] to be an object with the start and end properties.
  127. </div>
  128. <h3>[method:Object3D clone]([page:Object3D object])</h3>
  129. <div>
  130. object -- (optional) Object3D which needs to be cloned. If undefined, clone method will create a new cloned MorphAnimMesh Object.
  131. </div>
  132. <div>
  133. Clone a MorphAnimMesh Object.
  134. </div>
  135. <h2>Source</h2>
  136. [link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
  137. </body>
  138. </html>