packages/three-vrm-animation/examples/loader-plugin.html

<!DOCTYPE html>

<html>
	<head>
		<meta charset="utf-8" />
		<title>three-vrm-animation example</title>
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
		/>
		<style>
			body {
				margin: 0;
			}
			canvas {
				display: block;
			}
		</style>
	</head>

	<body>
		<script type="importmap">
			{
				"imports": {
					"three": "https://cdn.jsdelivr.net/npm/three@0.169.0/build/three.module.js",
					"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.169.0/examples/jsm/",
					"@pixiv/three-vrm": "https://cdn.jsdelivr.net/npm/@pixiv/three-vrm@3/lib/three-vrm.module.js",
					"@pixiv/three-vrm-animation": "../lib/three-vrm-animation.module.js"
				}
			}
		</script>

		<script type="module">
			import * as THREE from 'three';
			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			import { VRMLoaderPlugin, VRMUtils } from '@pixiv/three-vrm';
			import { createVRMAnimationClip, VRMAnimationLoaderPlugin, VRMLookAtQuaternionProxy } from '@pixiv/three-vrm-animation';

			( async () => {

				// renderer
				const renderer = new THREE.WebGLRenderer();
				renderer.setSize( window.innerWidth, window.innerHeight );
				renderer.setPixelRatio( window.devicePixelRatio );
				document.body.appendChild( renderer.domElement );

				// camera
				const camera = new THREE.PerspectiveCamera( 30.0, window.innerWidth / window.innerHeight, 0.1, 20.0 );
				camera.position.set( 0.0, 1.0, 5.0 );

				// camera controls
				const controls = new OrbitControls( camera, renderer.domElement );
				controls.screenSpacePanning = true;
				controls.target.set( 0.0, 1.0, 0.0 );
				controls.update();

				// scene
				const scene = new THREE.Scene();

				// light
				const light = new THREE.DirectionalLight( 0xffffff, Math.PI );
				light.position.set( 1.0, 1.0, 1.0 ).normalize();
				scene.add( light );

				// gltf loader (which can be used to load both VRM and VRMA!)
				const loader = new GLTFLoader();
				loader.crossOrigin = 'anonymous';

				loader.register( ( parser ) => {

					return new VRMLoaderPlugin( parser );

				} );

				loader.register( ( parser ) => {

					return new VRMAnimationLoaderPlugin( parser );

				} );

				// load VRM
				const gltfVrm = await loader.loadAsync( './models/VRM1_Constraint_Twist_Sample.vrm' );
				const vrm = gltfVrm.userData.vrm;

				// calling these functions greatly improves the performance
				VRMUtils.removeUnnecessaryVertices( vrm.scene );
				VRMUtils.removeUnnecessaryJoints( vrm.scene );

				// Disable frustum culling
				vrm.scene.traverse( ( obj ) => {

					obj.frustumCulled = false;

				} );

				// Add look at quaternion proxy to the VRM; which is needed to play the look at animation
				const lookAtQuatProxy = new VRMLookAtQuaternionProxy( vrm.lookAt );
				lookAtQuatProxy.name = 'lookAtQuaternionProxy';
				vrm.scene.add( lookAtQuatProxy );

				// Add VRM to the scene
				console.log( vrm );
				scene.add( vrm.scene );

				// load VRMA
				const gltfVrma = await loader.loadAsync( './models/test.vrma' );
				const vrmAnimation = gltfVrma.userData.vrmAnimations[ 0 ];

				// create animation clip
				const clip = createVRMAnimationClip( vrmAnimation, vrm );

				// play animation
				const mixer = new THREE.AnimationMixer( vrm.scene );
				mixer.clipAction( clip ).play();

				// helpers
				const gridHelper = new THREE.GridHelper( 10, 10 );
				scene.add( gridHelper );

				const axesHelper = new THREE.AxesHelper( 5 );
				scene.add( axesHelper );

				// animate
				const clock = new THREE.Clock();
				clock.start();

				function animate() {

					requestAnimationFrame( animate );

					const deltaTime = clock.getDelta();

					mixer.update( deltaTime );

					vrm.update( deltaTime );

					renderer.render( scene, camera );

				}

				animate();

			} )();
		</script>
	</body>
</html>