three.jsで３Dモデルをボーンアニメーションさせるには

ボーンアニメーションとは

ボーンアニメーションとは、
３Dツールで骨のように連なる軸を基準として
それに合わせてメッシュをアニメーションさせる技法のことを言います。

three.jsでは主にBlenderという３Dソフトからアニメーションつきのthree.js用の３Dモデルを書き出すことで用意することができます。
Unityのようなゲームエンジンと違い、three.jsではBlenderファイルを放り込んだらパースしてくれるような便利な機能はありません。
ここがもっとやりやすければthree.jsももっと流行りそうなものなのですが・・・

three.jsでボーンアニメーションさせるのに必要なもの

Blender

Blenderとはオープンソースの３Dソフトのことで、以下のサイトから無料でダウンロードできます。
Blenderの公式サイトへ

Blender three.jsエクスポーター

エクスポーターとは３Dソフトから three.jsで使用できる３Dモデルを書き出すためのプラグインのことです。
three.jsをダウンロードした際に解凍したファイルの以下のディレクトリにあります。
three.js-master\utils\exporters\blender\addons\io_three

three.jsから３Dモデルを書き出す順序

• １．Blenderにエクスポーターをインストール
• ２．Blenderでアニメーションモデルを用意
• ３．Blenderからthree.js用のモデルを書き出す
• ４．three.jsのjsonLoaderで書き出したモデルを読み込み、アニメーションを再生する

１．Blenderにエクスポーターをインストール

エクスポーターをBlenderにインストール

上に書いたようにthree.jsをダウンロードしたときに入っている以下のエクスポーターを、
three.js-master\utils\exporters\blender\addons\io_three
（io_threeのフォルダリごと）以下のディレクトリに配置（2.78はBlenderのバージョンですので、インストールしているバージョンによってかわります）
C:\Program Files\Blender Foundation\Blender\2.78\scripts\addons

Blenderを起動し、エクスポーターを有効化する

Blenderを起動し、左下のボタンでエディターのウィンドウタイプをUser Preferencesに変更する。

次に以下の画像上部メニューから「Add-ons」を選び、左の検索窓に「three」を入力しEnter、「Import-Export: three.js format」横のチェックボックスを入れる。
この設定を保存する場合は、下の「Save User Settings」をクリックする。こうすることでBlenderを再度立ち上げてもthree.jsのエクスポーターが有効化された状態になります。
これでthree.jsエクスポーターのインストールがされました。

２．Blenderでアニメーションモデルを用意

次にBlenderでアニメーションモデルを用意します。今回は割合します。
注意として、以下を気をつけてモデリングしてください。
書き出しエラーになったり、思ったとおりのアニメーションにならなかったり、やたら大きなサイズで書き出されてしまったり、やたら動作が重くなってしまう原因になります。

• 一つのArmatureに一つのメッシュ
• 原点は必ずx:0 y:0 z:0の位置にする
• ３DモデルのサイズはBlenderの升目以内に入るサイズにする
• ポリゴン数は5万以内程度
• IKは書き出し時に無視される
• 必ず頂点を取りこぼすことなくウェイトペイントすること

３．Blenderからthree.js用のモデルを書き出す

いよいよBlenderから３Dモデルを書き出します。
注意点としては・・・

ClearTransformする

PoseModeでボーン全てを選択後、以下の画像のようにPose→ClearTransform→Allを実行します
この工程は地味ですが、これをやらないとアニメーションがハチャメチャになることがあります。

書き出し時にObjectModeにしてメッシュを選択すること

これをやらないとエラーがでることがあります。

注意事項を読んだら早速書き出しましょう

書き出す

File→Export→Three(.json)をクリックして書き出しましょう。

書き出し設定は以下のとおりです。
※three.jsのエクスポーターはr73バージョン以降とそれ以前では違いがあります。

r73以前

r73以降

４．three.jsのjsonLoaderで書き出したモデルを読み込み、アニメーションを再生する

r73以前とr73以降ではアニメーションの実行の仕方が大幅に違い、ここが大いにはまるポイントだったりします。

r73以前

animationsというオブジェクトにアニメーションデータを格納し、play関数でアニメーションの再生をしています。
毎フレーム処理の中でTHREE.AnimationHandler.update関数を実行する必要があります。

  
var mesh;
var animations = {};

var jsonLoader = new THREE.JSONLoader();
var url = 'models/hellknight/hellknight.json';
jsonLoader.load(url, function( geometry, materials ){
  
  var material = new THREE.MeshFaceMaterial( materials );
        mesh = new THREE.SkinnedMesh( geometry, material );
        animations[ 'animName0' ] = new THREE.Animation( mesh, geometry.animations[0] );
        animations[ 'animName1' ] = new THREE.Animation( mesh, geometry.animations[1] );
  animations[ 'animName0' ].play();
});


//毎フレーム処理
function animate() {
    
    if( mesh ){
        THREE.AnimationHandler.update( .03 );
    }

}
setInterval( animate, 1000 / 30 );
  

r73以降

r73以降ではTHREE.Animationクラスが廃止され、THREE.AnimationMixerに変更されました。setEffectiveWeightはアニメーションを２つ同時に再生した場合に２つのアニメーションをどのぐらいのブレンド具合で混ぜるかを設定します。
こちらも毎フレーム処理でanimationMixer.update関数を実行する必要があります。

  
var clock = new THREE.Clock();

var mesh;
var animationMixer;

var jsonLoader = new THREE.JSONLoader();
var url = 'models/hellknight/hellknight.json';
jsonLoader.load(url, function( geometry, materials ){
  
  var material = new THREE.MeshFaceMaterial( materials );
        mesh = new THREE.SkinnedMesh( geometry, material );

        animationMixer = new THREE.AnimationMixer( mesh );
        for ( var i = 0; i < geometry.animations.length; ++ i ) {
            animationMixer.clipAction( geometry.animations[ i ] );
        }
        animationMixer.clipAction( 'animName0' ).setEffectiveWeight( 1 ).play();
});


//毎フレーム処理
function animate() {
    
    var delta = clock.getDelta();
    if( animationMixer ){
     animationMixer.update( delta );
    }

}
setInterval( animate, 1000 / 30 );
  

編集後記

three.jsでのアニメーション再生の流れをざっと説明しました。如何でしたでしょうか。おそらく多くの人がつまづくのはBlenderとthree.jsの連携だと思います。
今までhtmlやjavaScriptだけ書いていればよかったのが、急に３Dソフトを使う必要があり、しかもそれが癖のあるBlenderとなれば少し躊躇してしまうかもしれません。
しかし、three.jsはwebGLのコードを直接書くのに比べかなり簡略化されており、それに比べればかなり楽にはなっているとは思います（シェーダーも触る必要がありませんし・・・）
３Dコンテンツを作る以上、３Dソフトとの連携はUnityなどの環境でも必ず必要になっているので、やっといて損はないかと
さくっと説明するつもりがかなり長くなってしまった・・・