STAFF BLOG スタッフブログ

ボーン入り3Dキャラクターを作ってTHREE.jsで動かす

WebGLに入門した記録です

こんにちは。
唐突ですがWebGLに入門しました。
これはある程度ゲームっぽいものが出来上がるまでの記録です。

こういうのを作ります

1. モデルを作る

この世にはBlenderという素晴らしい無料モデリングソフトが存在するので、これを導入して作ります。
Blender、自宅でも簡単なモデリングをして楽しんでいるのですが、「それなんで導入しようと思ったんですか……?」という機能が山盛りで面白いです。群シミュレーションの話とかしたいですがまた別の機会にでも……。

なぜか浅草の某老舗店の芋ようかんみたいな色になってしまった……。
そうだキミの名はウカンちゃんだ。今決めた。

2. THREE.jsを使って画面にモデルを表示する

THREE.jsをダウンロードしてきて、同梱されているio_threeプラグイン(utils/exporters/blender/addons/io_three/以下)をBlenderに導入しておきます。

このあたりを見ながらモデルにボーンを入れます。

しっぽのあるキャラなので、しっぽにもボーンを入れました。

3. アニメーションをつける

入力によってモデルのモーションを変えたいと思っているので、複数のアニメーションを設定していきます。

レストポーズ(棒立ち)の他にも、ジャンプとか、

ダッシュとか。

できたらテクスチャをつけて、JSON形式で書き出します。

テクスチャも別途PNGなどで書き出しておきましょう。

さてどんなファイルが書き出され……うわっ(数字の羅列に立ちくらみを起こす)

書き出されたJSONのフォーマットはJSON Model format 3を参照すると良いと思います。

次回はこのウカンちゃんをフィールドで動かしてみたいと思います。
どうぞよろしくお願いいたします。

INDEXブログ一覧へ
CONTACTお問い合わせはこちら