LottieLoader.js 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. import {
  2. FileLoader,
  3. Loader,
  4. CanvasTexture
  5. } from "../../../build/three.module.js";
  6. var LottieLoader = function ( manager ) {
  7. Loader.call( this, manager );
  8. };
  9. LottieLoader.prototype = Object.assign( Object.create( Loader.prototype ), {
  10. constructor: LottieLoader,
  11. setQuality: function ( value ) {
  12. this._quality = value;
  13. },
  14. load: function ( url, onLoad, onProgress, onError ) {
  15. const quality = this._quality || 1;
  16. const texture = new CanvasTexture();
  17. texture.anisotropy = 16;
  18. const loader = new FileLoader( this.manager );
  19. loader.setPath( this.path );
  20. loader.setWithCredentials( this.withCredentials );
  21. loader.load( url, function ( text ) {
  22. const data = JSON.parse( text );
  23. // bodymoving uses container.offetWidth and offsetHeight
  24. // to define width/height
  25. const container = document.createElement( 'div' );
  26. container.style.width = data.w + 'px';
  27. container.style.height = data.h + 'px';
  28. document.body.appendChild( container );
  29. const animation = bodymovin.loadAnimation( {
  30. container: container,
  31. animType: 'canvas',
  32. loop: true,
  33. autoplay: true,
  34. animationData: data,
  35. rendererSettings: { dpr: quality }
  36. } );
  37. texture.animation = animation;
  38. texture.image = animation.container;
  39. animation.addEventListener( 'enterFrame', function () {
  40. texture.needsUpdate = true;
  41. } );
  42. container.style.display = 'none';
  43. if ( onLoad !== undefined ) {
  44. onLoad( texture );
  45. }
  46. }, onProgress, onError );
  47. return texture;
  48. }
  49. } );
  50. export { LottieLoader };