【A-Frame】objファイルを表示させる
2017年5月12日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使って作成しました。
<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の書き出しはこんな感じである。
