VR Inside

VRの未来を創るビジネスメディア

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

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

        2017/01/18

※本記事は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ファイルを読み込みます。

<!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メッシュにまとめたほうが軽くて良いですね

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

©VOYAGE GROUP, inc. All Rights Reserved

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

TwitterでVRInsideをフォローしよう!

VOYAGE GROUP VR室

Writer: 渋谷で非ゲームVRコンテンツを日々開発しています。 VRの開発技術について、ためになる情報を分かりやすく書いていきたいと思います。よろしくお願いします! VOYAGE GROUP VR室ブログ

技術開発関連の寄稿受け付けています VRに関する開発メモやブログ、関連記事の寄稿をしていただける方は以下のフォームよりご連絡ください。
技術開発記事の寄稿フォーム