three.jsでanimation system その4

概要

three.jsでanimation systemを、理解したかった。
bvhの表示、やってみた。

写真

サンプルコード

const clock = new THREE.Clock();
let camera, 
	controls, 
	scene, 
	renderer,
	mixer, 
	skeletonHelper;
const loader = new THREE.BVHLoader();
loader.load("https://cdn.rawgit.com/perfume-dev/example-max/3f383158/example-bvh/A_test.bvh", function(result) {
	skeletonHelper = new THREE.SkeletonHelper(result.skeleton.bones[0]);
	skeletonHelper.skeleton = result.skeleton;
	const boneContainer = new THREE.Group();
	boneContainer.add(result.skeleton.bones[0]);
	scene.add(skeletonHelper);
	scene.add(boneContainer);
	mixer = new THREE.AnimationMixer(skeletonHelper);
	mixer.clipAction(result.clip).setEffectiveWeight(1.0).play();
});
function init() {
	camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
	camera.position.set(0, 200, 300);
	scene = new THREE.Scene();
	scene.background = new THREE.Color(0xeeeeee);
	scene.add(new THREE.GridHelper(400, 10));
	renderer = new THREE.WebGLRenderer({ 
		antialias: true 
	});
	renderer.setPixelRatio(window.devicePixelRatio);
	renderer.setSize(window.innerWidth, window.innerHeight);
	document.body.appendChild(renderer.domElement);
	controls = new THREE.OrbitControls(camera, renderer.domElement);
	controls.minDistance = 300;
	controls.maxDistance = 700;
}
function tick() {
	requestAnimationFrame(tick);
	const delta = clock.getDelta();
	if (mixer) 
		mixer.update(delta);
	renderer.render(scene, camera);
}

init();
tick();

成果物

以上。