A-Frameにおける3Dモデル読み込み

Mozilaが中心となって開発するWeb-VRフレームワーク、A-Frame。

DOMベースで、ちょちょっと記述するだけで簡単にブラウザでVRコンテンツが作成できる、なかなかすごいやつです。

さて、3Dアプリケーションを作る際の一番の基本といえば3Dモデル。

Box や Sphere などのPrimitive 図形を利用することも多いですが、モデリングした3Dオブジェクトを読み込んで使うこともできます。

HTMLに3Dモデルを読み込む日がとうとう来たかとなかなか胸が熱くなりますね。

ちなみに対応している拡張子は .obj と .dae なのですが、UVメッシュ付きobjの読み込みでハマったので、その際注意すべき点について書いていきます。

Blenderからの書き出し

今回モデリングに使うのはフリーで高機能な3Dモデリングソフト、Blender。

このきりんピヨという生き物をA-Frame上にインポートしてみます。

blenderで普通にモデリングし、4つのマテリアル（うち一つにUVメッシュのテクスチャが設定されている）で構成されています。*1

まず、File >Export >Wavefront (.obj) でデフォルト設定のまま書き出すと…

.obj （モデルの形状を表現するデータ）

.mtl （モデルのマテリアルを表現するメタデータ）

の2ファイルが出力されます。

A-Frame への読み込み

obj-modelを読みながら、objファイルを読み込みます。

<span class="synComment">&lt;!DOCTYPE html&gt;</span>
 <span class="synIdentifier">&lt;</span><span class="synStatement">html</span><span class="synType">lang</span><span class="synIdentifier">=</span><span class="synConstant">"ja"</span><span class="synIdentifier">&gt;</span>
 <span class="synIdentifier">&lt;</span><span class="synStatement">head</span><span class="synIdentifier">&gt;</span>
 <span class="synIdentifier">&lt;</span><span class="synStatement">meta</span><span class="synType">charset</span><span class="synIdentifier">=</span><span class="synConstant">"utf-8"</span><span class="synIdentifier">&gt;</span>
 <span class="synIdentifier">&lt;</span><span class="synStatement">title</span><span class="synIdentifier">&gt;</span>obj sample<span class="synIdentifier">&lt;/</span><span class="synStatement">title</span><span class="synIdentifier">&gt;</span>
 <span class="synIdentifier">&lt;</span><span class="synStatement">script</span><span class="synType">src</span><span class="synIdentifier">=</span><span class="synConstant">"js/aframe.min.js"</span><span class="synIdentifier">&gt;&lt;/</span><span class="synStatement">script</span><span class="synIdentifier">&gt;</span>
 <span class="synIdentifier">&lt;/</span><span class="synStatement">head</span><span class="synIdentifier">&gt;</span>
 <span class="synIdentifier">&lt;</span><span class="synStatement">body</span><span class="synIdentifier">&gt;</span>
 <span class="synIdentifier">&lt;</span><span class="synStatement">a</span>-scene<span class="synIdentifier">&gt;</span>

 <span class="synIdentifier">&lt;</span><span class="synStatement">a</span>-assets<span class="synIdentifier">&gt;</span>
 <span class="synIdentifier">&lt;</span><span class="synStatement">a</span>-asset-item <span class="synType">id</span><span class="synIdentifier">=</span><span class="synConstant">"kirin-obj"</span><span class="synType">src</span><span class="synIdentifier">=</span><span class="synConstant">"model/kirin.obj"</span><span class="synIdentifier">&gt;&lt;/</span><span class="synStatement">a</span>-asset-item<span class="synIdentifier">&gt;</span>
 <span class="synIdentifier">&lt;</span><span class="synStatement">a</span>-asset-item <span class="synType">id</span><span class="synIdentifier">=</span><span class="synConstant">"kirin-mtl"</span><span class="synType">src</span><span class="synIdentifier">=</span><span class="synConstant">"model/kirin.mtl"</span><span class="synIdentifier">&gt;&lt;/</span><span class="synStatement">a</span>-asset-item<span class="synIdentifier">&gt;</span>
 <span class="synIdentifier">&lt;/</span><span class="synStatement">a</span>-assets<span class="synIdentifier">&gt;</span>

 <span class="synIdentifier">&lt;</span><span class="synStatement">a</span>-entity <span class="synType">id</span><span class="synIdentifier">=</span><span class="synConstant">"kirin"</span><span class="synIdentifier">obj-model=</span><span class="synConstant">"obj:#kirin-obj;mtl:#kirin-mtl;"</span><span class="synIdentifier">position=</span><span class="synConstant">"-5 0 -20"</span><span class="synIdentifier">scale=</span><span class="synConstant">"2 2 2"</span><span class="synIdentifier">rotation=</span><span class="synConstant">"0 0 0"</span><span class="synIdentifier">&gt;&lt;/</span><span class="synStatement">a</span>-entity<span class="synIdentifier">&gt;</span>

 <span class="synIdentifier">&lt;/</span><span class="synStatement">a</span>-scene<span class="synIdentifier">&gt;</span>
 <span class="synIdentifier">&lt;/</span><span class="synStatement">body</span><span class="synIdentifier">&gt;</span>
 <span class="synIdentifier">&lt;/</span><span class="synStatement">html</span><span class="synIdentifier">&gt;</span>

a-entityに直接ファイルパスを書いても良いのですが、一旦a-assetsのほうで読み込むことで使い回しの良さやパフォーマンスが上がるのがポイントですね。

これをブラウザで開いて実行！

あれ…

キリンがオレンジ一色に…

javascriptコンソールを開くと、UVマップのデータがNot Found であるとエラーが出ています。

これを修正するためには、.mtl データを編集します。

メタデータを直接編集するのは勇気がいりますが、.obj および.mtl は人間にも読める、優しいファイルフォーマットなので、テキストエディタで直接編集していきましょう。

どうやらこれがUVマップ画像のパスのようです。

UVマップモデリングをしていた際のパスが直接入ってしまっているせいでNot Foundになっているのですね。

そこで、こんな感じでパスを相対パスに書き換えるとともに、

ファイルを.obj や .mtl と同じ階層に配置してやると…

無事テクスチャを読み込めました！！！

ちなみにアニメーションに関しては、.objはそもそも対応していないですし、.dae のほうでもまだうまく動かないようです（未確認）

というわけで、日本全国で何人が必要としてるのかっていうレベルのマイナー情報ですが、A-Frameでのobj読み込みについて書いてみました。

次回は来週水曜、@DayBySay が超役立つ情報を更新してくれると思います。

それでは！

*1:ゲーム用なら、本当は1マテリアルで1枚のUVメッシュにまとめたほうが軽くて良いですね

※元記事：Blenderで出力したUVメッシュ付きobjファイルをA-Frameで読み込む方法 –VOYAGE GROUP VR室ブログ

情報提供元： VR Inside

記事名：「 Blenderで出力したUVメッシュ付きobjファイルをA-Frameで読み込む方法」

Blenderで出力したUVメッシュ付きobjファイルをA-Frameで読み込む方法

目次

A-Frameにおける3Dモデル読み込み

Blenderからの書き出し

A-Frame への読み込み