glTFのアニメーション

Question

glTF形式のアニメーションをthree.jsを使って表示させたいのです。
glTFをロードするところまでは出来ているのですが、glTFをアニメーションさせる事が出来ません。
アニメーション用のコードを教えていただきたいです。

Answer 1

three.js の公式サンプルにアニメーション用のコードがあるので参考にしてみて下さい。以下、コードの抜粋です。

https://threejs.org/examples/webgl_loader_gltf_extensions.html

loader.load( url, function ( data ) {
    gltf = data;
    var animations = gltf.animations;
    if ( animations && animations.length ) {
        mixer = new THREE.AnimationMixer( object );
        for ( var i = 0; i < animations.length; i ++ ) {
            var animation = animations[ i ];
            if ( sceneInfo.animationTime ) {
                animation.duration = sceneInfo.animationTime;
            }
            var action = mixer.clipAction( animation );
            if ( state.playAnimation ) action.play();
        }
    }
}

function animate() {
    requestAnimationFrame( animate );
    if ( mixer ) mixer.update( clock.getDelta() );
    render();
}