Loader →

# LottieLoader

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 Example

    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 );

## Import

LottieLoader is an addon, and must be imported explicitly, see Installation#Addons.

    import { LottieLoader } from 'three/addons/loaders/LottieLoader.js';

## Constructor

### new LottieLoader ( manager : LoadingManager )

Constructs a new Lottie loader.

manager | The loading manager.

Deprecated: The loader has been deprecated and will be removed with r186. Use lottie-web instead and create your animated texture manually.

## Methods

### .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.

url | The path/URL of the file to be loaded. This can also be a data URI.
onLoad | Executed when the loading process has been finished.
onProgress | Executed while the loading is in progress.
onError | Executed when errors occur.

Overrides: Loader#load

Returns: The Lottie texture.

### .setQuality ( value : number )

Sets the texture quality.

value | The texture quality.

## Source

examples/jsm/loaders/LottieLoader.js