LottieLoader.js 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  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. load: function ( url, onLoad, onProgress, onError ) {
  12. const texture = new CanvasTexture();
  13. const loader = new FileLoader( this.manager );
  14. loader.setPath( this.path );
  15. loader.setWithCredentials( this.withCredentials );
  16. loader.load( url, function ( text ) {
  17. const data = JSON.parse( text );
  18. // bodymoving uses container.offetWidth and offsetHeight
  19. // to define width/height
  20. const container = document.createElement( 'div' );
  21. container.style.width = data.w + 'px';
  22. container.style.height = data.h + 'px';
  23. document.body.appendChild( container );
  24. const animation = bodymovin.loadAnimation( {
  25. container: container,
  26. animType: 'canvas',
  27. loop: true,
  28. autoplay: true,
  29. animationData: data,
  30. rendererSettings: { dpr: 1 }
  31. } );
  32. texture.animation = animation;
  33. texture.image = animation.container;
  34. animation.addEventListener( 'enterFrame', function () {
  35. texture.needsUpdate = true;
  36. } );
  37. container.style.display = 'none';
  38. if ( onLoad !== undefined ) {
  39. onLoad( texture );
  40. }
  41. }, onProgress, onError );
  42. return texture;
  43. }
  44. } );
  45. export { LottieLoader };