AnimationClipCreator.js 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168
  1. import {
  2. AnimationClip,
  3. BooleanKeyframeTrack,
  4. ColorKeyframeTrack,
  5. NumberKeyframeTrack,
  6. Vector3,
  7. VectorKeyframeTrack
  8. } from 'three';
  9. /**
  10. * A utility class with factory methods for creating basic animation clips.
  11. *
  12. * @hideconstructor
  13. * @three_import import { AnimationClipCreator } from 'three/addons/animation/AnimationClipCreator.js';
  14. */
  15. class AnimationClipCreator {
  16. /**
  17. * Creates an animation clip that rotates a 3D object 360 degrees
  18. * in the given period of time around the given axis.
  19. *
  20. * @param {number} period - The duration of the animation.
  21. * @param {('x'|'y'|'z')} [axis='x'] - The axis of rotation.
  22. * @return {AnimationClip} The created animation clip.
  23. */
  24. static CreateRotationAnimation( period, axis = 'x' ) {
  25. const times = [ 0, period ], values = [ 0, 360 ];
  26. const trackName = '.rotation[' + axis + ']';
  27. const track = new NumberKeyframeTrack( trackName, times, values );
  28. return new AnimationClip( '', period, [ track ] );
  29. }
  30. /**
  31. * Creates an animation clip that scales a 3D object from `0` to `1`
  32. * in the given period of time along the given axis.
  33. *
  34. * @param {number} period - The duration of the animation.
  35. * @param {('x'|'y'|'z')} [axis='x'] - The axis to scale the 3D object along.
  36. * @return {AnimationClip} The created animation clip.
  37. */
  38. static CreateScaleAxisAnimation( period, axis = 'x' ) {
  39. const times = [ 0, period ], values = [ 0, 1 ];
  40. const trackName = '.scale[' + axis + ']';
  41. const track = new NumberKeyframeTrack( trackName, times, values );
  42. return new AnimationClip( '', period, [ track ] );
  43. }
  44. /**
  45. * Creates an animation clip that translates a 3D object in a shake pattern
  46. * in the given period.
  47. *
  48. * @param {number} duration - The duration of the animation.
  49. * @param {Vector3} shakeScale - The scale of the shake.
  50. * @return {AnimationClip} The created animation clip.
  51. */
  52. static CreateShakeAnimation( duration, shakeScale ) {
  53. const times = [], values = [], tmp = new Vector3();
  54. for ( let i = 0; i < duration * 10; i ++ ) {
  55. times.push( i / 10 );
  56. tmp.set( Math.random() * 2.0 - 1.0, Math.random() * 2.0 - 1.0, Math.random() * 2.0 - 1.0 ).
  57. multiply( shakeScale ).
  58. toArray( values, values.length );
  59. }
  60. const trackName = '.position';
  61. const track = new VectorKeyframeTrack( trackName, times, values );
  62. return new AnimationClip( '', duration, [ track ] );
  63. }
  64. /**
  65. * Creates an animation clip that scales a 3D object in a pulse pattern
  66. * in the given period.
  67. *
  68. * @param {number} duration - The duration of the animation.
  69. * @param {number} pulseScale - The scale of the pulse.
  70. * @return {AnimationClip} The created animation clip.
  71. */
  72. static CreatePulsationAnimation( duration, pulseScale ) {
  73. const times = [], values = [], tmp = new Vector3();
  74. for ( let i = 0; i < duration * 10; i ++ ) {
  75. times.push( i / 10 );
  76. const scaleFactor = Math.random() * pulseScale;
  77. tmp.set( scaleFactor, scaleFactor, scaleFactor ).
  78. toArray( values, values.length );
  79. }
  80. const trackName = '.scale';
  81. const track = new VectorKeyframeTrack( trackName, times, values );
  82. return new AnimationClip( '', duration, [ track ] );
  83. }
  84. /**
  85. * Creates an animation clip that toggles the visibility of a 3D object.
  86. *
  87. * @param {number} duration - The duration of the animation.
  88. * @return {AnimationClip} The created animation clip.
  89. */
  90. static CreateVisibilityAnimation( duration ) {
  91. const times = [ 0, duration / 2, duration ], values = [ true, false, true ];
  92. const trackName = '.visible';
  93. const track = new BooleanKeyframeTrack( trackName, times, values );
  94. return new AnimationClip( '', duration, [ track ] );
  95. }
  96. /**
  97. * Creates an animation clip that animates the `color` property of a 3D object's
  98. * material.
  99. *
  100. * @param {number} duration - The duration of the animation.
  101. * @param {Array<Color>} colors - An array of colors that should be sequentially animated.
  102. * @return {AnimationClip} The created animation clip.
  103. */
  104. static CreateMaterialColorAnimation( duration, colors ) {
  105. const times = [], values = [],
  106. timeStep = ( colors.length > 1 ) ? duration / ( colors.length - 1 ) : 0;
  107. for ( let i = 0; i < colors.length; i ++ ) {
  108. times.push( i * timeStep );
  109. const color = colors[ i ];
  110. values.push( color.r, color.g, color.b );
  111. }
  112. const trackName = '.material.color';
  113. const track = new ColorKeyframeTrack( trackName, times, values );
  114. return new AnimationClip( '', duration, [ track ] );
  115. }
  116. }
  117. export { AnimationClipCreator };