Use a skinned model that shows off skinning

Author: greggman

examples/models/gltf/Michelle.glb

@@ -27,9 +27,9 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { toneMapping, MeshStandardNodeMaterial } from 'three/nodes';
+			import { toneMapping } from 'three/nodes';
 
-			import { FBXLoader } from 'three/addons/loaders/FBXLoader.js';
+			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
 			import WebGPU from 'three/addons/capabilities/WebGPU.js';
 			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
@@ -54,38 +54,27 @@
 				camera.position.set( 1, 2, 3 );
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 'lightblue' );
 				camera.lookAt( 0, 1, 0 );
 
 				clock = new THREE.Clock();
 
 				//lights
 
 				const light = new THREE.PointLight( 0xffffff, 1, 100 );
-				light.power = 1700; // 100W
+				light.power = 2500;
 				camera.add( light );
 				scene.add( camera );
 
-				const loader = new FBXLoader();
-				loader.load( 'models/fbx/Samba Dancing.fbx', function ( object ) {
-
-					object.scale.setScalar( .01 );
+				const loader = new GLTFLoader();
+				loader.load( 'models/gltf/Michelle.glb', function ( gltf ) {
 
+					const object = gltf.scene;
 					mixer = new THREE.AnimationMixer( object );
 
-					const action = mixer.clipAction( object.animations[ 0 ] );
+					const action = mixer.clipAction( gltf.animations[ 0 ] );
 					action.play();
 
-					object.traverse( function ( child ) {
-
-						if ( child.isMesh ) {
-
-							child.material = new MeshStandardNodeMaterial();
-							child.material.roughness = .1;
-
-						}
-
-					} );
-
 					scene.add( object );
 
 				} );

examples/webgpu_skinning.html

@@ -29,7 +29,7 @@
 			import * as THREE from 'three';
 			import { mix, range, color, oscSine, timerLocal, toneMapping, MeshStandardNodeMaterial } from 'three/nodes';
 
-			import { FBXLoader } from 'three/addons/loaders/FBXLoader.js';
+			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
 			import WebGPU from 'three/addons/capabilities/WebGPU.js';
 			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
@@ -71,14 +71,14 @@
 				camera.add( cameraLight );
 				scene.add( camera );
 
-				const loader = new FBXLoader();
-				loader.load( 'models/fbx/Samba Dancing.fbx', ( object ) => {
+				const loader = new GLTFLoader();
+				loader.load( 'models/gltf/Michelle.glb', function ( gltf ) {
 
-					object.scale.setScalar( .01 );
+					const object = gltf.scene;
 
 					mixer = new THREE.AnimationMixer( object );
 
-					const action = mixer.clipAction( object.animations[ 0 ] );
+					const action = mixer.clipAction( gltf.animations[ 0 ] );
 					action.play();
 
 					const instanceCount = 30;
@@ -108,7 +108,7 @@
 							for ( let i = 0; i < instanceCount; i ++ ) {
 
 								dummy.position.x = - 200 + ( ( i % 5 ) * 70 );
-								dummy.position.z = Math.floor( i / 5 ) * - 200;
+								dummy.position.y = Math.floor( i / 5 ) * - 200;
 
 								dummy.updateMatrix();
 

examples/webgpu_skinning_instancing.html

@@ -29,7 +29,7 @@
 			import * as THREE from 'three';
 			import { uniform, skinning, PointsNodeMaterial } from 'three/nodes';
 
-			import { FBXLoader } from 'three/addons/loaders/FBXLoader.js';
+			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
 			import WebGPU from 'three/addons/capabilities/WebGPU.js';
 			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
@@ -51,19 +51,20 @@
 				}
 
 				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
-				camera.position.set( 100, 200, 300 );
+				camera.position.set( 0, 300, -85 );
 
 				scene = new THREE.Scene();
-				camera.lookAt( 0, 100, 0 );
+				camera.lookAt( 0, 0, -85 );
 
 				clock = new THREE.Clock();
 
-				const loader = new FBXLoader();
-				loader.load( 'models/fbx/Samba Dancing.fbx', function ( object ) {
+				const loader = new GLTFLoader();
+				loader.load( 'models/gltf/Michelle.glb', function ( gltf ) {
 
+					const object = gltf.scene;
 					mixer = new THREE.AnimationMixer( object );
 
-					const action = mixer.clipAction( object.animations[ 0 ] );
+					const action = mixer.clipAction( gltf.animations[ 0 ] );
 					action.play();
 
 					object.traverse( function ( child ) {