LottieLoader.js 1.4 KB

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