WebGL対応のJavaScriptフレームワークAway3Dのチュートリアル第5回では3Dモデリングソフトで制作したモデルデータの読み込み方を説明します。3Dのモデルデータには様々な形式が存在しますが、Away3Dは対応している形式が多いうえに、専用の調整アプリケーションが存在するため画面を見ながら調整することができるので初心者でも扱いやすいのが特徴です。今回はビデオでの操作方法とあわせてJavaScriptのコードを紹介していきます。

Away3Dが対応するモデルデータの形式

モデリングソフトで保存できる形式には様々な種類がありますが、Away3Dでは次の形式の読み込みに対応しています。

  • 3DMax (.3ds)形式
  • Wavefront OBJ形式
  • AWD(.awd)形式
  • Quake 2 MD2(.md2)形式
  • Doom 3 MD5(.md5anim / .md5mesh)形式

※この他にもCollada(dae)形式、AC3D(.ac)形式、DXF (.dxf)形式も後述のアプリケーション「AwayBuilder」を使うことで、AWD形式に変換してAway3Dで使うことができます。

AwayBuilderのワークフロー

Away Builderは簡易モデリング調整アプリケーションです。モデリングデータは事前にAwayBuilderを使って調整したうえで、Away3Dに読み込むワークフローをとります。直接3DモデルデータをAway3Dで読み込むことができるものの、AwayBuilderを使ってAWD形式に変換してから読み込むほうが、実行時のパース時間の短縮や高い互換性が確保できる利点があります。

away3d-tutorial-workflow

AwayBuilderの使い方

Away Builderのページから［Binary Release］のリンクをクリックしてダウンロードのうえインストールします。ちなみにAwayBuilderはAdobe Gaming SDKにも採用されているので、そちらからインストールしても構いません。AwayBuilderを起動した状態で、モデルデータ(例えばobjファイル)をドラッグアンドドロップで読み込みましょう。AwayBuilderの画面上に3Dのモデルが表示されるはずです。詳しくは次の操作ビデオ（1分30秒）をご覧ください。

Away3D TypeScriptではAWD形式のうち圧縮の適用されたファイルは読み込めないので、保存前に設定パネルから［Compression］の項目を「UNCOMPRESSED」(未圧縮)に設定します。AWDファイルにはメッシュ情報やマテリアル情報、テクスチャ画像も内包され、出力結果は一つのファイルになります。

away3d-tutorial-awaybuilder

Away3D TypeScriptでの読み込み方

Away3Dでモデルデータを読み込むには、JavaScriptでAway3Dの初期化を済ませたあとで、①モデルデータの読み込み機能を有効にしたうえで、②ファイルを読み込み画面に追加するという2つのステップをとります。

  1. AssetLibrary.enableParser()メソッドに引数を指定することで、指定したモデル形式の読み込みを有効にすることができます。AssetLibrary.enableParser()メソッドにAWDParserクラスを指定し、「AWD形式をパース可能な状態」にします。
  2. Away3Dのモデルデータを読み込む簡単な方法は、Loaderクラスを使用することです。Loaderクラスはモデルデータの読込機能と表示機能(コンテナ)を備えています。Loaderクラスのインスタンスを作成しload()メソッドでファイルパスを指定し、3D空間(view.sceneに対して)にaddChild()メソッドを使って追加します。
// AWDフォーマットの解析を有効にします
away.library.AssetLibrary.enableParser(away.parsers.AWDParser);

// 読込機能を有したLoaderインスタンスを作成
loader = new away.containers.Loader();
// 3Dモデリングデータを読み込む
loader.load(new away.net.URLRequest(".awdファイルのパス"));
// 3D空間に追加
view.scene.addChild(loader);

このコードの実行結果は次のとなります。自動的に水平方向に回転するようにしています。

あわせて操作ビデオ（1分25秒）を用意したので、もし再生がうまくいかない場合には参考にしてみてください。ちなみに操作ビデオでは無料で高機能のエディターBracketsを利用しています。WebGLではローカルアクセスのセキュリティ上の制約が存在するためWebサーバーを立ちあげてウェブページを読み込む必要がありますが、Bracketsであればボタン一つでWebサーバーを起動してページを確認することができ便利です。

カメラアングルも組み込んでみましょう

なお、連載の「第4回 カメラの制御方法」で説明した方法と組み合わせると、ドラッグアンドドロップでカメラアングルを自由に変えることが可能になります。

まとめ

今回はモデルデータの読み込み方について説明しました。類似のJSライブラリ「Three.js」では、AWDのように最適化されたデータ形式が存在しないためにパース時間や読み込みに時間がかかり3Dの表示に時間がかかることがあります。Away3DではAWD形式ではその点、一つのHTTPリクエストでファイルを読み込め、データ展開(パース)が素早いという利点があります。

第5回目の記事は以上です。今回のソースファイルはこちらからダウンロードできます。次回の記事では、3Dのスライドショーの作り方を説明します。お楽しみに。

連載目次