---

title: LottieLoader category: Addons layout: docs

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