three.js 入門 (8) - アニメーションシステム

以下の記事が面白かったので、ざっくり翻訳しました。

・Animation system – three.js docs

前回

1. アニメーションシステム

「three.js」のアニメーションシステムによって、スキンとリグモデルのボーン、モーフターゲット、マテリアル、表示・非表示、Matrixなど、モデルの様々なプロパティをアニメーションさせることができます。オブジェクトのアニメーションの重みと時間スケールは、個別に変更でき、異なるオブジェクトの様々なアニメーションを同期できます。

「three.js」のアニメーションシステムは2015年に一新され、Unity / Unreal Engine 4と同様のアーキテクチャになりました。

2. AnimationClip

AnimationClipは、アニメーションのタイムライン情報を持つオブジェクトです。例えばキャラクターの場合、歩行サイクル用に1つ、ジャンプ用に2つ、サイドステップ用に3つのAnimationClipを持ちます。

アニメーション化された3Dオブジェクトを正常にインポートした場合、応答フィールドの1つは、モデルのAnimationClipを含むanimationsという名前の配列である必要があります。

3. KeyframeTrack

AnimationClipの内部では、各アニメーションプロパティが個別のKeyframeTrackに保存されます。キャラクターにskeletonがあるとすると、1トラック目に位置、2トラック目に回転、3トラック目のスケールの変化量を保存できます。

モデルにモーフターゲットがあるとすると、各トラックは、クリップの実行中に特定のモーフターゲットのinfluenceがどのように変化するかに関する情報を保持します。

4. AnimationMixer

AnimationMixerは、実際のアニメーションの再生を行うオブジェクトです。複数のアニメーションを同時に制御してミックスすることもできます。

5. AnimationAction

AnimationActionは、実際に実行するアニメーションの状態やパラメータを管理するオブジェクトです。特定のAnimationClipをどのAnimationMixerで再生、一時停止、停止するか、クリップを繰り返す必要があるかどうか、フェードまたはタイムスケーリングのどちらで実行するかなどを決定できます。

6. AnimationObjectGroup

オブジェクトグループが共有アニメーションの状態を受け取るようにしたい場合は、AnimationObjectGroupを使用できます。

7. サポートされているフォーマットとローダー

全てのモデル形式にアニメーションが含まれているわけではなく（OBJには特に含まれていません）、一部のthree.jsローダーのみがAnimationClipシーケンスをサポートしていることに注意してください。このアニメーションタイプをサポートするものはいくつかあります。

・THREE.ObjectLoader
・THREE.BVHLoader
・THREE.ColladaLoader
・THREE.FBXLoader
・THREE.GLTFLoader
・THREE.MMDLoader

【注意】 3ds maxとMayaは現在、複数のアニメーション（同じタイムライン上にないアニメーションを意味する）を単一のファイルに直接エクスポートできません。

8. サンプル

let mesh;

// AnimationMixerを作成しAnimationClipのリストを取得
const mixer = new THREE.AnimationMixer(mesh);
const clips = mesh.animations;

// 各フレームのミキサーを更新
function update() {
  mixer.update(deltaSeconds);
}

// 特定のアニメーションを再生
const clip = THREE.AnimationClip.findByName(clips, 'dance');
const action = mixer.clipAction(clip);
action.play();

// 全てのアニメーションを再生
clips.forEach( function(clip) {
  mixer.clipAction(clip).play();
});

Three.jsでボーンアニメーションをする！ - KAYAC engineers' blog

次回