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>