three.jsでanimation system その10

概要

three.jsでanimation systemを、理解したかった。
練習問題、やってみた。

練習問題

vrmの表情を決めよ。

写真

サンプルコード

let currentVrm = null;
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(25, 500 / 400, 0.1, 1000)
camera.position.set(0, 1.3, -1.9)
camera.rotation.set(0, Math.PI, 0)
const renderer = new THREE.WebGLRenderer()
renderer.setSize(500, 400)
document.body.appendChild(renderer.domElement)
const directionalLight = new THREE.DirectionalLight('#ffffff', 1)
directionalLight.position.set(1, 1, 1)
scene.add(directionalLight)
const loader = new THREE.GLTFLoader();
loader.load('https://drumath2237.github.io/three-vrm-test/models/undefined-chan-toon.vrm',
	(gltf) => {
		THREE.VRM.from(gltf).then((vrm) => {
			currentVrm = vrm;
			scene.add(vrm.scene);
			const i = Math.random();
		  if (i < 0.7)
			{
				vrm.blendShapeProxy.setValue(THREE.VRMSchema.BlendShapePresetName.Joy, 1.0);
				//vrm.blendShapeProxy.setValue(THREE.VRMSchema.BlendShapePresetName.Blink, 1.0)
				//vrm.blendShapeProxy.setValue(VRMSchema.BlendShapePresetName.A, 0.95)
				//vrm.blendShapeProxy.setValue(VRMSchema.BlendShapePresetName.I, 0.85)
				//vrm.blendShapeProxy.setValue(VRMSchema.BlendShapePresetName.A, 0.95)
				//vrm.blendShapeProxy.setValue(VRMSchema.BlendShapePresetName.Fun, 1.0);
				//vrm.blendShapeProxy.setValue(VRMSchema.BlendShapePresetName.Sorrow, 1.0);
			}
			vrm.blendShapeProxy.update();
		});
	},
	(progress) => console.log('Loading model...', 100.0 * (progress.loaded / progress.total), '%'),
	(error) => console.error(error)
)
function tick() {
	requestAnimationFrame(tick)
	renderer.render(scene, camera)
}
tick()

成果物

以上。