Examples: Improve lottie example (#31321)

Author: linbingquan

examples/webgl_loader_texture_lottie.html

@@ -27,10 +27,11 @@
 			import * as THREE from 'three';
 			import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
 			import { RoundedBoxGeometry } from 'three/addons/geometries/RoundedBoxGeometry.js';
+			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
-			import lottie from 'https://cdn.jsdelivr.net/npm/lottie-web@5.12.2/+esm';
+			import lottie from 'https://cdn.jsdelivr.net/npm/lottie-web@5.13.0/+esm';
 
-			let renderer, scene, camera;
+			let renderer, scene, camera, controls;
 			let mesh;
 
 			init();
@@ -50,8 +51,9 @@
 				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';
+					const dpr = window.devicePixelRatio;
+					container.style.width = data.w * dpr + 'px';
+					container.style.height = data.h * dpr + 'px';
 					document.body.appendChild( container );
 
 					const animation = lottie.loadAnimation( {
@@ -60,7 +62,7 @@
 						loop: true,
 						autoplay: true,
 						animationData: data,
-						rendererSettings: { dpr: 1 }
+						rendererSettings: { dpr: dpr }
 					} );
 
 					const texture = new THREE.CanvasTexture( animation.container );
@@ -99,6 +101,9 @@
 
 				scene.environment = pmremGenerator.fromScene( environment ).texture;
 
+				controls = new OrbitControls( camera, renderer.domElement );
+				controls.autoRotate = true;
+
 				//
 
 				window.addEventListener( 'resize', onWindowResize );
@@ -155,11 +160,7 @@
 
 			function animate() {
 
-				if ( mesh ) {
-
-					mesh.rotation.y -= 0.001;
-
-				}
+				controls.update();
 
 				renderer.render( scene, camera );