LottieLoader.js 1.4 KB

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