[HTML5] ブラウザー上のARを体験しましょう!

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/

タグ:

© 2020 by HACHIX Corporation​