fix

.gitignore

@@ -1,2 +1,3 @@
 node_modules
 package-lock.json
+example

package.json

@@ -16,6 +16,7 @@
 	"dependencies": {
 		"@pixiv/three-vrm": "^2.1.1",
 		"@pixiv/three-vrm-animation": "^2.1.1",
+		"@pixiv/three-vrm-springbone": "^2.1.1",
 		"three": "^0.162.0"
 	}
 }

src/index.ts

@@ -7,6 +7,8 @@ import { createVRMAnimationClip, VRMAnimationLoaderPlugin } from "@pixiv/three-v
 import { Color, DirectionalLight, Fog, HemisphereLight } from 'three';
 import { GridHelper, Mesh, MeshLambertMaterial, BoxGeometry, Vector3 } from 'three';
 
+import { VRMSpringBoneManager, VRMSpringBoneJoint, VRMSpringBoneJointHelper } from '@pixiv/three-vrm-springbone';
+
 window.addEventListener("DOMContentLoaded", () => {
   const canvas = document.getElementById("canvas");
   if (canvas == null) return;
@@ -17,19 +19,23 @@ window.addEventListener("DOMContentLoaded", () => {
     30, canvas.clientWidth/canvas.clientHeight, 0.1, 20);
   camera.position.set(0.0, 0.9, -4.0)
   camera.rotation.set(0.0, Math.PI, 0.0)
-
 		camera.lookAt(new THREE.Vector3(0, 0, 0));
+
+		// https://threejs.org/docs/#api/en/constants/Renderer
 		const renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
   renderer.setPixelRatio(window.devicePixelRatio);
   renderer.setSize(canvas.clientWidth, canvas.clientHeight);
   renderer.setClearColor(0x7fbfff, 1.0);
 		renderer.shadowMap.enabled = true;
 		renderer.outputColorSpace = THREE.SRGBColorSpace;
-		//renderer.toneMapping = THREE.ACESFilmicToneMapping;
-		//renderer.toneMappingExposure = 1;
+		renderer.toneMapping = THREE.ReinhardToneMapping;
+		renderer.toneMapping = THREE.NeutralToneMapping;
 		canvas.appendChild(renderer.domElement);
+		renderer.toneMappingExposure = 1.5;
 		
-  const light = new THREE.DirectionalLight(0xffffff, Math.PI);
+		//renderer.toneMapping = THREE.ACESFilmicToneMapping;
+		
+		const light = new THREE.DirectionalLight(0xffffff, Math.PI);
   light.position.set(1.0, 1.0, 1.0);
   scene.add(light);
 
@@ -54,13 +60,13 @@ window.addEventListener("DOMContentLoaded", () => {
 
   function tryInitVRM(gltf: any) {
     const vrm = gltf.userData.vrm;
-    if ( vrm == null ) {
+				if ( vrm == null ) {
         return;
     }
     currentVrm = vrm;
     scene.add(vrm.scene);
     initAnimationClip();
-  }
+		}
 
   function tryInitVRMA(gltf: any) {
     const vrmAnimations = gltf.userData.vrmAnimations;
@@ -94,6 +100,7 @@ window.addEventListener("DOMContentLoaded", () => {
 		clock.start();
 
 		const update = () => {
+
 			controls.update();
 			requestAnimationFrame(update);
 			const deltaTime = clock.getDelta();
@@ -131,7 +138,9 @@ window.addEventListener("DOMContentLoaded", () => {
 			);
 			floor.position.y = -1.0;
 			floor.rotation.x = -Math.PI / 2;
+			floor.name = "floor";
 			scene.add(floor);
+
 		}
 
 		function floor_grid(){
@@ -150,6 +159,49 @@ window.addEventListener("DOMContentLoaded", () => {
 
 		update();
 
+		function animate() {
+			requestAnimationFrame(animate);
+			scene.rotation.y += 0.005;
+			renderer.render(scene, camera);
+		}
+		animate();
+
+		function random_happy() {
+			// https://github.com/vrm-c/vrm-specification/blob/master/specification/VRMC_vrm-1.0/expressions.ja.md
+			currentVrm.expressionManager.setValue('relaxed', 0.5);
+		}
+
+		function random_head() {
+			// https://github.com/vrm-c/vrm-specification/blob/master/specification/VRMC_vrm-1.0/lookAt.ja.md
+			currentVrm.lookAt.target = camera;
+			currentVrm.VRMLookAtBoneApplier = camera;
+			currentVrm.VRMLookAtExpressionApplier = camera;
+
+			// https://github.com/vrm-c/vrm-specification/blob/master/specification/VRMC_vrm-1.0/humanoid.ja.md
+			const head = currentVrm.humanoid.getRawBoneNode("head");
+			head.target = camera;
+		}
+
+		function random_blink(){
+			setInterval(() => {
+				currentVrm.expressionManager.setValue('relaxed', 0);
+				currentVrm.expressionManager.setValue('blink', 0);
+				random_head();
+				const r = Math.floor(Math.random() * 3);
+				if (r == 1) {
+					setTimeout(() => { currentVrm.expressionManager.setValue('blink', 1); }, 5000);
+					setTimeout(() => {
+						currentVrm.expressionManager.setValue('blink', 0);
+					}, 5500);
+				};
+				setTimeout(() => {
+					currentVrm.expressionManager.setValue('relaxed', 0.5);
+					currentVrm.expressionManager.setValue('blink', 1);
+				}, 6000);
+			}, 6500);
+		}
+		random_blink();
+
 		setInterval(() => {
 			const r = Math.floor(Math.random() * 4 + 1);
 			load("/vrma/" + r + ".vrma");	
@@ -158,4 +210,11 @@ window.addEventListener("DOMContentLoaded", () => {
 			}, 10000);
 		}, 15000);
 
+		function light_off(){
+			renderer.toneMapping = THREE.ACESFilmicToneMapping;
+			light.intensity = -0.5;
+			scene.background = new THREE.Color(0x000000);
+			scene.fog = new Fog(0x000000, 3, 20);
+		}
+		//light_off();
 })