はじめに
Blenderを触る機会があり、WebGLやthree.js等の3D系統の分野に興味を持ち始めたので、この記事を通して3Dモデルへの理解を深めたいと思います。
今回やること
やりたいこととしては、
- blenderで3Dモデルを作成
- アニメーション作成
- three.jsでWeb上に表示
- ボタンクリックなどのアクションを実行することで3Dモデルのアニメーションを再生
を想定しています。
3Dモデル作成
モデル作成
ざっくりとで良いので人型のモデルを作成していきます。
まずは、頭と胴体を作成して、
腕を作成します。
今のままだとただの直方体になっています。
今回は腕を曲げたいので、作成した腕にループカットをし、直方体の内部に面を作成していきます。
作成した腕を複製し、位置を調整して足を作成します。
めちゃくちゃざっくりですが、人型のモデルが完成しました。
骨格を作る
続いて動きをつけるために必要な骨格（アーマチュア）を先ほど作成したモデルに埋め込んでいきます。
Shift+Aでアーマチュアを選択します。
ボーンが一つ生成されたので位置とサイズを調整します。
このボーンはモデルの全体的な位置を調整し、基準として扱います。（今回はこのボーンの名称を「Root」とします。）
また、ボーンの先端の丸は、青枠の根元に近い方は「ヘッド」と呼び、赤枠の方は「テール」と呼ばれます。
骨格を作る際はこのヘッドを関節の根元に置くのが基本となります。
次に、「Root」のテールを選択し、Eで新しいボーンを押し出します。これを背骨とし、「Spine」として扱います。このSpineのテールを選択し、先ほどと同じようにEで新しいボーンを押し出します。これを頭の位置に調整し、「Head」として扱います。
次に腕を作成します。
Spineのヘッドを選択し、Eで押し出して胴体から腕の間にボーンを作成します。
このボーンのテールからさらにボーンを押し出し、腕のボーンを作成し、「Arm」として扱います。その後、一つ前に作成したボーンは不要なので削除します。
このArmを選択した状態で右クリックから「細分化」を選択し、二分割します。上腕に当たる部分を「UpperArm」とし、前腕に当たる部分を「LowerArm」とします。
脚も腕と同じような工程で作成していきます。
Spineのヘッドを選択して押し出しボーンを作成します。このボーンのテールから新たにボーンを押し出し作成します。このボーンを「Leg」として扱います。
その後、一つ前に作成したボーンは削除します。続いて「Leg」を選択した状態で細分化し、二分割します。太ももに当たる部分を「UpperLeg」、膝から脛に当たる部分を「LowerLeg」として扱います。
次に、反対側の腕と脚を作成していきます。
腕と脚を選択した状態で、「名前」から「自動ネーム（左右）」を選択します。これにより、作成したボーンの名称の末尾に「.L」がつきます。
その後、腕と足のボーンを選択した状態で、右クリックから「対象化」を選択します。
左側の腕と脚が作成され、名称の末尾には「.R」が付いています。
スキニング
先ほどまでの工程でボーンは作成し終わりました。
ですが、今の状態だとアーマチュアとモデルが関連付いておらず、アーマチュアとモデルが別々に動いてしまう状態です。
そのため、アーマチュアとモデルを関連づける「スキニング」という工程に入ります。
オブジェクトモードに入り、モデル、アーマチュアの順番で選択します。ctrl+Pで「自動のウェイト」でを選択します。
アニメーション
今回はお辞儀のアニメーションを作成していきます。
動きを左右対称にするため、Xの部分にチェックを入れてミラーを有効化します。
最初に、腕の位置と角度を調整します。
この状態でアーマチュアを全選択し、Kで「位置・回転・スケール」を選択します。
同じ手順で、お辞儀の状態にアーマチュアを調整し、タイムラインの位置を20に合わせ、アニメーションを登録します。
お辞儀のアニメーションは大まかに出来ましたが、このままだとお辞儀したままなので、最初に作成したフレームを複製し、お辞儀から戻る状態にします。
Web上に表示
次にアニメーションをつけたモデルをWeb上に表示させます。
まず、モデルをglTF形式でエクスポートし、テキストエディタのJS上で読み込みます。
今回は、orbitControlsでカメラを操作できるようにし、床と照明を追加しています。
無事にブラウザ上に表示されています。
アニメーション再生ボタンを押すことでアニメーションが再生されます。
