昨日紹介した「webgl-loader」を使ってみました。
objファイルを独自形式に変換
まずは.objファイルをこのライブラリ向けの形式に変換する必要が有ります。変換ツールのソースコードが bin フォルダに有るのでこのフォルダで ./build.sh を実行し、ビルドします。
objcompress が変換(独自形式に圧縮)するツールです。以下の様に使用します。
./objcompress test.obj test.utf8
この例の場合は変換後のファイルは test.utf8 となります。
今回、テストのための3Dモデルはこちらのサイトの「ケルプバス」のモデルデータを使わせて貰いました。
Free 3D Models
http://toucan.web.infoseek.co.jp/3DCG/3ds/FishModels.html
こちらは.3dsファイルで公開されていたのでCheetah3Dで.obj形式に変換をした後に objcompress で変換しました。
./objcompress KelpBass0.obj KelpBass0.utf8
今回使ったファイルの場合、 545KB のものが 66KB に圧縮されました(Finderで確認)。
テクスチャファイルが.bmpファイルだったのでこちらは.jpgファイルに変換をかけました。
【最終的な3Dモデルとテクスチャファイル】
- KelpBass0.obj
- KelpBaT.jpg
必要なHTMLやJSファイルを準備
HTMLやJSファイルは example フォルダのものをコピーして使用しました。コピー＆リネームは以下の通りです。
- hand.html → KelpBass0.html
- hand.js → KelpBass0.js
HTMLファイルの内容変更
以下のテクスチャと.jsファイルを指定している所を変更しました。
<div style="display:none"> <img id="texture" src="checker.png"/> </div> <script src="hand.js" type="text/javascript"></script>
↓
<div style="display:none"> <img id="texture" src="KelpBaT.jpg"/> </div> <script src="KelpBass0.js" type="text/javascript"></script>
jsファイルの内容変更
KelpBass0.jsファイルは以下の.utf8ファイルの記述を変更しました。
req.open('GET', 'hand_00.utf8', true);↓
req.open('GET', 'KelpBass0.utf8', true);
