概要

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でアップデートしてます。

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

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

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

概要

コード