ダンバルファンページ開発記 23

入場からアイドリングアニメーションまでを繋げます

複数のアニメーションを用意する

アニメーションを複数エクスポートするために今回はNLA Editor (NonLinear Animation Editor)というアニメーションエディタを使います

_btがつくトラックはブレンダー上でテストする用

NLAはアニメーションをいくつか重ねたり、時間をかけて変異させることで従来のキーフレームでは難しいアニメーションどうしの組み合わせをつくるツールです。
それだけでなく、Three.jsで使用するためのgltfファイルにアニメーションをエクスポートする際も、アニメーションごとに名前をつけてまとめて管理ができるので大変便利です。今回はNLAで個別に名付けられた複数のアニメーションをThree.jsでインポートしてから繋げることにしました

NLAを使うのは初めてだったのですが、この動画が大変参考になりました

アイドリングアニメーションをつくる

特に何もしない、待ち状態のアニメーションです。ダンバルは浮遊しているポケモンなので、ランダムに少し位置をずらし続けることで浮いている感を出します。首もちょっと振ってもらって待っている感も出します

ランダムな動きをつける

首の動きとは異なり、体全体の揺れはキーフレームで手動で動きをつけるのではなく、Graph EditorでNoise Modifierを使います。下はX軸（赤）とY軸（緑）にNoise Modifierを使用した画像です。Z軸にも同様のモディファイアをつけ、揺れの量を調整します

ループに対応させる

ループ時にぴょんっと飛ぶ

アニメーション全体にランダムな動きを足すと、ループする際に位置が飛んでしまいます。これを防ぐためにNoise ModifierのRestrict Frame Rangeを使ってノイズを付与するフレームの範囲と量の遷移を指定します

最初と最後のフレームはノイズなし、Blend InとOutは目視で大体の値を入れます

スムーズになった！

これでアイドリングアニメーションがひとまず用意できました。

Three.jsでアニメーションを再生する

three.js docs

Three.jsのAnimationMixerを使ってアニメーションを再生します

AnimationMixerインスタンスにはHTMLのDOMエレメントのように`addEventListener`でイベントリスナーを付与できます

mixerにはすでに入場アニメーション（"enter")とアイドリングアニメーション（"idle"）を登録してあり、mixer内のアニメーションが終わるタイミング（"finished"）が感知されると波カッコ内のコードブロックが実行されます。

ざっくり言うと、入場後はアイドリングアニメーションを、アイドリングアニメーションが終わったら同じアニメーションをループしてね、というコードです
果たして

なめらか！

入場してからその場で留まってくれるようになりました。

次回

入場->待ちの動きまでできたので、次はクリックに反応して再生するアニメーションを作ります。今年があとほぼひと月しかないことに驚きを隠せませんが、ひと月はひと月なのでページを公開した状態で大晦日を迎えられるよう頑張ります