Chapter 180: LottieLoader

Core Idea

A loader for the Lottie texture animation format.

The loader returns an instance of CanvasTexture to represent the animated texture. Two additional properties are added to each texture:

animation: The return value of lottie.loadAnimation() which is an object with an API for controlling the animation's playback.
image: The image container.

Code Examples

const loader = new LottieLoader();
loader.setQuality( 2 );
const texture = await loader.loadAsync( 'textures/lottie/24017-lottie-logo-animation.json' );
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial( { map: texture } );
const mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

What it demonstrates: Typical usage of LottieLoader.

Reference Tables

Constructor

Signature
`new LottieLoader( manager : LoadingManager )`

Methods

Method	Description
`.load( url : string, onLoad : function, onProgress : onProgressCallback, onError : onErrorCallback ) : CanvasTexture`	Starts loading from the given URL and passes the loaded Lottie asset to the `onLoad()` callback.
`.setQuality( value : number )`	Sets the texture quality.

Key Takeaways

LottieLoader extends: Loader
Key methods: load, setQuality.

Connects To

Loader: parent class
Source: examples/jsm/loaders/LottieLoader.js