強火で進め

このブログではプログラム関連の記事を中心に書いてます。

「webgl-loader」を使ってみた


昨日紹介した「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);

サーバへアップロードするファイル

サーバへアップロードするファイルは今までの作業で使った以下のファイル

  • KelpBass0.html
  • KelpBass0.js
  • KelpBass0.utf8
  • KelpBaT.jpg

加えて以下の2つのファイルを同じフォルダに置いておく必要が有ります。
※このファイルは samples フォルダに有ります。

出来上がったサンプルはこちら