free3dというサイトから素材を取得します。
https://free3d.com/ja/
試しにlow-poly-rockを選択しました。
https://free3d.com/ja/3d-model/low-poly-rock-4631.html
downloadしたファイル全部をrockフォルダに格納します。
サーバから読み取ります。※手っ取り早くgithub.ioから
– obj, mtlファイルは相対パスだと上手くいかないので、先頭に”https://arjs-cors-proxy.herokuapp.com/”をつけて絶対パスにしたら上手くいった。
<!doctype HTML>
<html>
<script src="https://aframe.io/releases/1.0.0/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/2.2.0/aframe/build/aframe-ar.js"></script>
<body style='margin:0px; overflow:hidden;'>
<a-scene embedded arjs>
<a-marker preset="hiro">
<a-entity
obj-model="obj: url(https://arjs-cors-proxy.herokuapp.com/https://fuga.github.io/rock/Rock1.obj);
mtl: url(https://arjs-cors-proxy.herokuapp.com/https://fuga.github.io/rock/Rock1.mtl)"
scale="0.2 0.2 0.2"
rotation="-90 0 0"
>
</a-entity>
<a-text value="Rock on Roll" position="0 0.8 0" align="center"></a-text>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>
お、良い感じ。
マーカーもhiroだとExileになってしまうので、別のに変えたい。
