Examples: Improve GLTFLoader examples. (#32406)

Author: mrdoob

examples/webgl_loader_gltf.html

@@ -32,7 +32,10 @@
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
 			let camera, scene, renderer, controls;
-			let currentModel;
+			let currentModel, mixer;
+			let currentLoadId = 0;
+
+			const timer = new THREE.Timer();
 
 			init();
 
@@ -80,6 +83,8 @@
 
 								} );
 
+								gui.add( scene, 'backgroundBlurriness', 0, 1 );
+
 								const initialModel = models.find( m => m.name === params.model );
 								if ( initialModel ) loadModel( initialModel );
 
@@ -90,12 +95,12 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( render );
 				renderer.toneMapping = THREE.ACESFilmicToneMapping;
-				renderer.toneMappingExposure = 1;
 				container.appendChild( renderer.domElement );
 
 				controls = new OrbitControls( camera, renderer.domElement );
-				controls.addEventListener( 'change', render ); // use if there is no animation loop
+				controls.enableDamping = true;
 				controls.minDistance = 2;
 				controls.maxDistance = 10;
 				controls.target.set( 0, 0, - 0.2 );
@@ -115,31 +120,48 @@
 
 					scene.remove( currentModel );
 					currentModel = null;
-					render();
 
 				}
 
+				if ( mixer ) {
+
+					mixer.stopAllAction();
+					mixer = null;
+
+				}
+
+				const loadId = ++ currentLoadId;
+
 				const loader = new GLTFLoader();
 				loader.load( url, async function ( gltf ) {
 
+					if ( loadId !== currentLoadId ) return;
+
 					currentModel = gltf.scene;
 
 					// wait until the model can be added to the scene without blocking due to shader compilation
 
 					await renderer.compileAsync( currentModel, camera, scene );
 
+					if ( loadId !== currentLoadId ) return;
+
 					scene.add( currentModel );
 
-					// scale to 1.0
+					fitCameraToSelection( camera, controls, currentModel );
 
-					const box = new THREE.Box3().setFromObject( currentModel );
-					const size = box.getSize( new THREE.Vector3() );
-					const maxSize = Math.max( size.x, size.y, size.z );
-					currentModel.scale.multiplyScalar( 1.0 / maxSize );
+					// animations
 
-					fitCameraToSelection( camera, controls, currentModel );
+					if ( gltf.animations.length > 0 ) {
+
+						mixer = new THREE.AnimationMixer( currentModel );
+
+						for ( const animation of gltf.animations ) {
+
+							mixer.clipAction( animation ).play();
+
+						}
 
-					render();
+					}
 
 				} );
 
@@ -190,6 +212,12 @@
 
 			function render() {
 
+				timer.update();
+
+				controls.update();
+
+				if ( mixer ) mixer.update( timer.getDelta() );
+
 				renderer.render( scene, camera );
 
 			}

examples/webgpu_loader_gltf.html

@@ -43,7 +43,10 @@
 			import { Inspector } from 'three/addons/inspector/Inspector.js';
 
 			let camera, scene, renderer, controls;
-			let currentModel;
+			let currentModel, mixer;
+			let currentLoadId = 0;
+
+			const timer = new THREE.Timer();
 
 			init().then( render );
 
@@ -91,6 +94,8 @@
 
 								} );
 
+								gui.add( scene, 'backgroundBlurriness', 0, 1 );
+
 								const initialModel = models.find( m => m.name === params.model );
 								if ( initialModel ) loadModel( initialModel );
 
@@ -109,6 +114,7 @@
 				await renderer.init();
 
 				controls = new OrbitControls( camera, renderer.domElement );
+				controls.enableDamping = true;
 				controls.minDistance = 2;
 				controls.maxDistance = 10;
 				controls.target.set( 0, 0, - 0.2 );
@@ -131,25 +137,45 @@
 
 				}
 
+				if ( mixer ) {
+
+					mixer.stopAllAction();
+					mixer = null;
+
+				}
+
+				const loadId = ++ currentLoadId;
+
 				const loader = new GLTFLoader();
 				loader.load( url, async function ( gltf ) {
 
+					if ( loadId !== currentLoadId ) return;
+
 					currentModel = gltf.scene;
 
 					// wait until the model can be added to the scene without blocking due to shader compilation
 
 					await renderer.compileAsync( currentModel, camera, scene );
 
+					if ( loadId !== currentLoadId ) return;
+
 					scene.add( currentModel );
 
-					// scale to 1.0
+					fitCameraToSelection( camera, controls, currentModel );
+
+					// animations
 
-					const box = new THREE.Box3().setFromObject( currentModel );
-					const size = box.getSize( new THREE.Vector3() );
-					const maxSize = Math.max( size.x, size.y, size.z );
-					currentModel.scale.multiplyScalar( 1.0 / maxSize );
+					if ( gltf.animations.length > 0 ) {
 
-					fitCameraToSelection( camera, controls, currentModel );
+						mixer = new THREE.AnimationMixer( currentModel );
+
+						for ( const animation of gltf.animations ) {
+
+							mixer.clipAction( animation ).play();
+
+						}
+
+					}
 
 				} );
 
@@ -198,6 +224,12 @@
 
 			function render() {
 
+				timer.update();
+
+				controls.update();
+
+				if ( mixer ) mixer.update( timer.getDelta() );
+
 				renderer.render( scene, camera );
 
 			}