LottieLoader.js 1.5 KB

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