読者です 読者をやめる 読者になる 読者になる

VOYAGE GROUP VR室ブログ

VOYAGE GROUP VR室のブログです。コンテンツの紹介や制作方法、イベントレポートなどについて書きます。原則毎週水曜日更新。

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

A-Frame

こんにちは。買った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ファイルを読み込みます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>obj sample</title>
    <script src="js/aframe.min.js"></script>
</head>
<body>
    <a-scene>

        <a-assets>
            <a-asset-item id="kirin-obj" src="model/kirin.obj"></a-asset-item>
            <a-asset-item id="kirin-mtl" src="model/kirin.mtl"></a-asset-item>
        </a-assets>

        <a-entity id="kirin" obj-model="obj:#kirin-obj; mtl:#kirin-mtl;" position="-5 0 -20" scale="2 2 2" rotation="0 0 0"></a-entity>    

</a-scene>    
</body>
</html>

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

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

f:id:jujunjun110:20161019192726p:plain

あれ...

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

f:id:jujunjun110:20161019192917p:plain

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

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

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

f:id:jujunjun110:20161019194351p:plain

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

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

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

f:id:jujunjun110:20161019194356p:plain

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

f:id:jujunjun110:20161019193626p:plain

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

f:id:jujunjun110:20161019194645g:plain

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


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

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

それでは!

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