【A-Frame】objファイルを表示させる

A-Frameを利用して3D空間にObjファイルを表示させてみる。

Three.js( https://threejs.org/ )を使うとobjファイルを表示させるのに結構大変だったりしますが(それでもとても簡単になってるそうですが)A-Frameだとタグ3行くらい追加で表示できます。

【デモ】
https://ziyudom.github.io/aframe/aframe-obj/

先にコードだけ

とりあえずこんな感じ。
kinoko.objとkinoko.mtlはあらかじめBlender使って作成しました。

githubにコードある

<html>
  <head>
    <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
  </head>
  <body>
    <a-assets>
          <a-asset-item id="crate-obj" src="kinoko.obj"></a-asset-item>
          <a-asset-item id="crate-mtl" src="kinoko.mtl"></a-asset-item>
    </a-assets>
    <a-scene>
      <a-obj-model position="0 0.5 -5" src="#crate-obj" mtl="#crate-mtl"></a-obj-model>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

assetsがロードの色々をやってくれる

a-assetタグの内部に画像だったりobjだったりいれておき、IDを記載しておけば、ロード完了時に使えたり、本来わずらわしい処理を勝手にやってくれる。

a-obj-modelでsrc=”#crate-obj”、mtl=”#crate-mtl”に指定して表示完了。
素敵ですA-Frame。

余談:メッシュでのトラブル

今回のBlender制作ではメッシュ使ってませんが。というか使うとかいう高等技術なかったんですが。
メッシュ使った場合mtlファイルで、メッシュが当たらないトラブルがあるっぽい。

よく拝見させてもらってるVOYAGE GROUP VR室ブログの記事に対処方法が書いてあった。
僕もこんな感じでBlenderで可愛いの作りたい。

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

関係ない話:Blenderで頑張って作る

Blender始めて3日。
やっと身動きが取れるようになってきた。
3Dソフトの操作大変。。。。でも自分で作った3Dデータがweb上(特にスマホ)で見えると結構感動する。
頑張ってもちょっと勉強する。

ちなみにobjの書き出しはこんな感じである。

  • このエントリーをはてなブックマークに追加