Three.jsでアニメーション

threejs-animation.png

ポイント

用意するファイル

用意したモンスターのjsonファイルでは

 "morphTargets": [{ "name": "animation_000000", "vertices": [1483,794....
{ "name": "animation_000001", "vertices": [1509,828,111,1282,980...
...
{ "name": "animation_000023", "vertices": [1453,764,215,1284,925,112,1113,1045

と23個の頂点群が用意されています。

初期化関数にて

var clock = new THREE.Clock();

モデルロード関数内にて

    mixer = new THREE.AnimationMixer( json);
    mixer.addAction( new THREE.AnimationAction( geometry.animations[0] ).warpToDuration( 1
     ) );

jsonファイルでmorphTargetsにある複数の頂点データは
geometry.animations[i]を通じてアクセスできるようです。
AnimationActionの第一引数には先頭のアニメーションだけを渡すようです

animate関数にて

   var delta = clock.getDelta();
   mixer.update( delta );
}

threejs

サポートサイト Wikidot.com threejs