three.jsでanimation system その9

概要

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

練習問題

vrmのポーズを決めよ。

写真

サンプルコード

let currentVrm = null;
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(45, 500 / 400, 0.1, 1000)
camera.position.set(0, 1.2, -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 pose = {	
				hips: {
					rotation: [0.0, -0.454, 0.0, 0.891]
				},
			};
			vrm.humanoid.setPose(pose);
		});
	},
	(progress) => console.log('Loading model...', 100.0 * (progress.loaded / progress.total), '%'),
	(error) => console.error(error)
)
function tick() {
	requestAnimationFrame(tick)
	renderer.render(scene, camera)
}
tick()

成果物

以上。