Toggle

CG制作

3DモデルをWebGLを使ってブラウザでプレビューする

3Dモデルをブラウザでプレビュー、マウス操作で拡大、縮小、視点変更でグリグリ回せるようにする手順を備忘録的にまとめてみます。

用意するもの
・CINEMA4D
・テキストエディタ
・ブラウザ
・Webサーバ

CINEMA4Dでなくても出来ますが、私のメインツールがC4Dなのでこれ前提で書きます。
C4Dでオブジェクトを作成します。
細かいものまで作りこむと最終的に重くなるので、そのあたりはファイルサイズを見つつ調整する方が良いんでしょうね。
今回は、簡単なモデルです。
SC_20151011_1734000
C4Dのライブラリにあるラプドルを使います。
ポリゴン数は5416です。
SC_20151011_18143100
ポリゴン数は、オブジェクトを選択して 右クリック> オブジェクト情報 で確認できます。
SC_20151011_18152700

さて、オブジェクトはobj形式でエクスポートします。
ファイル > エクスポート > Wavefront OBJ(*.obj)
SC_20151011_17342300
保存場所とファイル名を指定すると、エクスポートの設定画面が出ます。
C4Dはマテリアルを出力できなかったので、一旦blenderとかを経由していたのですが、今回R17からマテリアルがエクスポート出来るようになっています。
SC_20151011_17344600
ただ、単色以外のマテリアルは無視されるようなので、ここは今後の検討課題ですね。
出力されたobjとmtlはセットで使用します。

ここまででC4Dの作業は終了です。
続いて、Webの方を作っていきます。

必要なライブラリを用意します。

three.js http://threejs.org/

Webサイトにもサンプルコードがいっぱいあるので参考になると思います。
細かい説明はそちらに譲るとして、必要最低限なファイルは下記です。

DDSLoader.js
MTLLoader.js
OBJMTLLoader.js
OrbitControls.js マウスで視点を変えるために使います

サーバに置くファイルの構成です。
/obj/dino.obj
/obj/dino.mtl
/js/three.min.js
/js/loaders/DDSLoader.js
/js/loaders/MTLLoader.js
/js/loaders/OBJMTLLoader.js
/js/controls/OrbitControls.js
/objmtl.html(下のファイル)

このようになります。

今回はobj形式で作りましたが、fbx形式であればアニメーションも可能ですので、動きを視点を変えて見るようにもできそうです。
いろいろ試してみると面白そうです。

URL
TBURL

コメントを投稿する

*
*
* (公開されません)

Return Top