2
0

LottieLoader.js 1.4 KB

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