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