Augmented Reality (AR) の時代或いは拡張現実の時代がやって来ようとしている。Pokemon GO などのアプリ、また最近発表されたiPhone X のおかげでスマホ上のARはこれからすごく発展していると考える。だからこそ、この間我々もブラウザー上のARを試した。ar.jsというライブラリを使って、10行だけでARを体験できた。驚くほどかんたんです。
CODE (index.html):
<script src="./libs/aframe.min.js"></script> <script src="./libs/aframe-ar.js"></script>
<body style='margin : 0px; overflow: hidden;'> <a-scene embedded arjs='sourceType: webcam;'> <a-assets> <a-asset-item id="duck" src="Duck.gltf"> </a-assets>
<!-- handle marker with hiro preset --> <a-marker preset='hiro'> <a-entity gltf-model="#duck" scale="0.5 0.5 0.5" position="0 0 0" rotation="0 180 0" > </a-marker>
<!-- add a simple camera --> <a-entity camera></a-entity> </a-scene> </body>
結果：
Markers:
ウェブコーディングの初心者でもできると思う。皆さん、是非試してください！
さらに調べたいなら（英）：https://aframe.io/blog/arjs/
