Three.jsのキーフレームアニメーションを絶対時間で再生

概要

glTFに書き出したモデルのアニメーションを動画に合わせて再生したかったのだけど、指定した時間のフレームを再生させる方法が見つからなかったので備忘録。
delta指定めんどくさいねん...

ちなみにこのデモに使いました。

コード

var mixer;
var action;
var video = document.getElementById('video');

function init(){
    var loader = new THREE.GLTFLoader();
	loader.load( 'models/model.glb', function ( gltf ) {
		var model = gltf.scene;
		var animations = gltf.animations;
		
		scene.add(model);
		
		mixer = new THREE.AnimationMixer(model);
		action = mixer.clipAction(animations[0]);
		
		action.play();
		video.play();

		animate();
	}
}

function animate() {
    var time = video.currentTime;
    action.time = time;
    mixer.time = time;
	mixer.update(0);
	
	renderer.render( scene, camera );
	requestAnimationFrame( animate );
}

だいぶ端折ってますが、モデルをロードしたときにclipActionを取り出しておいて、フレームを更新するたびに時間を指定してからミキサーを時間差0でアップデートしてます。

このデモでは動画とキーフレームアニメーションをリンクさせたかったため動画の再生時間を渡しています。

この方法で良いのかな...?