用意するもの
・マーカーになるpattファイル
・htmlファイル
以上！超簡単
pattファイルの作成
以下で簡単に作成できる。
https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html
pattファイルとimgファイルを両方ダウンロードするのがベター。
htmlファイルの作成
<!DOCTYPE html>
<html>
<script src="https://aframe.io/releases/1.0.0/aframe.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
<body style="margin: 0px; overflow: hidden;">
<a-scene embedded arjs>
<a-marker type="pattern" url="patt.patt">
<a-box position="0 -1 0" scale="1 1 1" color="grey"></a-box>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>
<a-marker type="pattern" url="patt.patt">に作成したpattファイルのパスを上げる。
ARを体験してみる。
上記で作成したhtmlにアクセスすると、カメラが起動する。
そのカメラでpattファイルを作成した時にダウンロードしたimageファイルを映してみると、3DのBOXが出てくる。
すっごい簡単。