LottieLoader: Deprecated loader, inline library usage. (#30896)

examples/jsm/loaders/LottieLoader.js

@@ -33,6 +33,20 @@ import lottie from '../libs/lottie_canvas.module.js';
  */
 class LottieLoader extends Loader {
 
+	/**
+	 * Constructs a new Lottie loader.
+	 *
+	 * @deprecated The loader has been deprecated and will be removed with r186. Use lottie-web instead and create your animated texture manually.
+	 * @param {LoadingManager} [manager] - The loading manager.
+	 */
+	constructor( manager ) {
+
+		super( manager );
+
+		console.warn( 'THREE.LottieLoader: The loader has been deprecated and will be removed with r186. Use lottie-web instead and create your animated texture manually.' );
+
+	}
+
 	/**
 	 * Sets the texture quality.
 	 *

examples/tags.json

@@ -50,6 +50,7 @@
 	"webgl_loader_ifc": [ "external" ],
 	"webgl_loader_ldraw": [ "lego" ],
 	"webgl_loader_pdb": [ "molecules", "css2d" ],
+	"webgl_loader_texture_lottie": [ "external" ],
 	"webgl_loader_texture_ultrahdr": [ "hdr", "jpg", "ultrahdr" ],
 	"webgl_loader_ttf": [ "text", "font" ],
 	"webgl_lod": [ "level", "details" ],

examples/webgl_loader_texture_lottie.html

@@ -29,6 +29,8 @@
 			import { RoundedBoxGeometry } from 'three/addons/geometries/RoundedBoxGeometry.js';
 			import { LottieLoader } from 'three/addons/loaders/LottieLoader.js';
 
+			import lottie from 'https://cdn.jsdelivr.net/npm/lottie-web@5.12.2/+esm';
+
 			let renderer, scene, camera;
 			let mesh;
 
@@ -42,11 +44,40 @@
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0x111111 );
 
-				const loader = new LottieLoader();
-				loader.setQuality( 2 );
-				loader.load( 'textures/lottie/24017-lottie-logo-animation.json', function ( texture ) {
+				// lottie
+
+				const loader = new THREE.FileLoader();
+				loader.setResponseType( 'json' );
+				loader.load( 'textures/lottie/24017-lottie-logo-animation.json', function ( data ) {
+
+					const container = document.createElement( 'div' );
+					container.style.width = data.w + 'px';
+					container.style.height = data.h + 'px';
+					document.body.appendChild( container );
+
+					const animation = lottie.loadAnimation( {
+						container: container,
+						animType: 'canvas',
+						loop: true,
+						autoplay: true,
+						animationData: data,
+						rendererSettings: { dpr: 1 }
+					} );
+
+					const texture = new THREE.CanvasTexture( animation.container );
+					texture.minFilter = THREE.NearestFilter;
+					texture.generateMipmaps = false;
+					texture.colorSpace = THREE.SRGBColorSpace;
+
+					animation.addEventListener( 'enterFrame', function () {
+
+						texture.needsUpdate = true;
+
+					} );
+
+					container.style.display = 'none'; // must be done after loadAnimation() otherwise canvas has 0 dimensions
 
-					setupControls( texture.animation );
+					setupControls( animation );
 
 					// texture = new THREE.TextureLoader().load( 'textures/uv_grid_directx.jpg' );
 					// texture.colorSpace = THREE.SRGBColorSpace;