three.jsで遊んでみる(2)

 プログラム,
 公開日:2012年8月29日 / 更新日:2014年8月27日

three.js の examples を眺めた結果、
どんな機能があって、どう書けば良いのか、
大体の要領がつかめて来た感じです。

そこで、
MMDなミクさんを表示してみることにしました。
同梱されているモデルファイル(PMD)を利用します。

ただ、
PMDまたはPMXなファイルを読み込むローダが
three.jsには無いので、
PmdEditorまたはPmxEditorColladaエクスポータを利用して
Collada(DAE)形式にいったん変換します。

あとは、
sceneを作って、
適当にcameraとlightを追加。
さらに、
ColladaLoaderで読み込んだDAEを追加。
WebGLRendererを作ってsceneとcameraを渡す。
基本的にはこれだけ。
あっさり表示できてしまいました(^_^;)

実際には、
モデルのスケールの調整とか、
地面のグリッドとか、
FPS表示のためのStatsや
カメラ操作のためのTrackballControlsなどを
導入していますが、
ちょっとの手間で簡単に出来ました。

ちなみに、
ミクさんは細かい所までよく出来ているので、
全体にテクスチャを貼ってるのかと思ってましたが、
実際に貼ってあるのは眼だけで、
基本的に単色ポリゴンで構成されてるのが意外でした。

ということで、
three.jsで表示させてみたWebGLなミクさんはこちらです。
マウスでグリグリ動かせます。
※WebGL対応のブラウザで見てください。Chromeが良いと思います。

mytest3

なお、
残念ながら現状では踊ったりしません(^_^;)
モーションファイルであるVMDを変換して導入する術が
現状ではみつかりませんでした。
ただ、PMDから変換されたDAEを見てみると、
ボーンっぽい情報が含まれているようなので、
VMDからフレーム情報を抽出して適用できれば、
もしかしたら動くようにできるかもしれない
というか、したいなぁ(^_^;)

参考までにソースは以下の通りです。(three.js r49)

タグ: ,

コメント投稿