LottieLoader.js 1.5 KB

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