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

2016年12月14日 11:50:00
テクノロジー
VR Inside
コメント

※本記事はVOYAGE GROUP VR室ブログの中からVRに関連する技術記事を寄稿いただいております。

こんにちは。買ったBluetoothイヤホンがわずか2週間で壊れた、VGの破壊王ことjujunjun110です。

今回はA-Frameについてのニッチ情報について更新します！

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

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

f:id:jujunjun110:20161019195246p:plain

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

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

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

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

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

Blenderからの書き出し

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

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

f:id:jujunjun110:20161019185225g:plain

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>