MDDLoader.js 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
  1. import {
  2. AnimationClip,
  3. BufferAttribute,
  4. FileLoader,
  5. Loader,
  6. NumberKeyframeTrack
  7. } from 'three';
  8. /**
  9. * A loader for the MDD format.
  10. *
  11. * MDD stores a position for every vertex in a model for every frame in an animation.
  12. * Similar to BVH, it can be used to transfer animation data between different 3D applications or engines.
  13. *
  14. * MDD stores its data in binary format (big endian) in the following way:
  15. *
  16. * - number of frames (a single uint32)
  17. * - number of vertices (a single uint32)
  18. * - time values for each frame (sequence of float32)
  19. * - vertex data for each frame (sequence of float32)
  20. *
  21. * ```js
  22. * const loader = new MDDLoader();
  23. * const result = await loader.loadAsync( 'models/mdd/cube.mdd' );
  24. *
  25. * const morphTargets = result.morphTargets;
  26. * const clip = result.clip;
  27. * // clip.optimize(); // optional
  28. *
  29. * const geometry = new THREE.BoxGeometry();
  30. * geometry.morphAttributes.position = morphTargets; // apply morph targets (vertex data must match)
  31. *
  32. * const material = new THREE.MeshBasicMaterial();
  33. *
  34. * const mesh = new THREE.Mesh( geometry, material );
  35. * scene.add( mesh );
  36. *
  37. * const mixer = new THREE.AnimationMixer( mesh );
  38. * mixer.clipAction( clip ).play();
  39. * ```
  40. *
  41. * @augments Loader
  42. * @three_import import { MDDLoader } from 'three/addons/loaders/MDDLoader.js';
  43. */
  44. class MDDLoader extends Loader {
  45. /**
  46. * Constructs a new MDD loader.
  47. *
  48. * @param {LoadingManager} [manager] - The loading manager.
  49. */
  50. constructor( manager ) {
  51. super( manager );
  52. }
  53. /**
  54. * Starts loading from the given URL and passes the loaded MDD asset
  55. * to the `onLoad()` callback.
  56. *
  57. * @param {string} url - The path/URL of the file to be loaded. This can also be a data URI.
  58. * @param {function({clip:AnimationClip, morphTargets:Array<BufferAttribute>})} onLoad - Executed when the loading process has been finished.
  59. * @param {onProgressCallback} onProgress - Executed while the loading is in progress.
  60. * @param {onErrorCallback} onError - Executed when errors occur.
  61. */
  62. load( url, onLoad, onProgress, onError ) {
  63. const scope = this;
  64. const loader = new FileLoader( this.manager );
  65. loader.setPath( this.path );
  66. loader.setResponseType( 'arraybuffer' );
  67. loader.load( url, function ( data ) {
  68. onLoad( scope.parse( data ) );
  69. }, onProgress, onError );
  70. }
  71. /**
  72. * Parses the given MDD data and returns an object holding the animation clip and the respective
  73. * morph targets.
  74. *
  75. * @param {ArrayBuffer} data - The raw XYZ data as an array buffer.
  76. * @return {{clip:AnimationClip, morphTargets:Array<BufferAttribute>}} The result object.
  77. */
  78. parse( data ) {
  79. const view = new DataView( data );
  80. const totalFrames = view.getUint32( 0 );
  81. const totalPoints = view.getUint32( 4 );
  82. let offset = 8;
  83. // animation clip
  84. const times = new Float32Array( totalFrames );
  85. const values = new Float32Array( totalFrames * totalFrames ).fill( 0 );
  86. for ( let i = 0; i < totalFrames; i ++ ) {
  87. times[ i ] = view.getFloat32( offset ); offset += 4;
  88. values[ ( totalFrames * i ) + i ] = 1;
  89. }
  90. const track = new NumberKeyframeTrack( '.morphTargetInfluences', times, values );
  91. const clip = new AnimationClip( 'default', times[ times.length - 1 ], [ track ] );
  92. // morph targets
  93. const morphTargets = [];
  94. for ( let i = 0; i < totalFrames; i ++ ) {
  95. const morphTarget = new Float32Array( totalPoints * 3 );
  96. for ( let j = 0; j < totalPoints; j ++ ) {
  97. const stride = ( j * 3 );
  98. morphTarget[ stride + 0 ] = view.getFloat32( offset ); offset += 4; // x
  99. morphTarget[ stride + 1 ] = view.getFloat32( offset ); offset += 4; // y
  100. morphTarget[ stride + 2 ] = view.getFloat32( offset ); offset += 4; // z
  101. }
  102. const attribute = new BufferAttribute( morphTarget, 3 );
  103. attribute.name = 'morph_' + i;
  104. morphTargets.push( attribute );
  105. }
  106. return {
  107. morphTargets: morphTargets,
  108. clip: clip
  109. };
  110. }
  111. }
  112. export { MDDLoader };