ar-01/ar.html

<!DOCTYPE html>
<!-- Simple AR
  When in mobile (tested in Firefox, Chrome on Android),
  point to the Hiro marker, and the objects will appear
  in the screen (a red box exactly on the marker, the
  other objects a bit behind, according to their Z coordinates).
-->

<html>
  <head>
    <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
    <script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
  </head>
  <body style='margin : 0px; overflow: hidden;'>
    <a-scene embedded arjs>

      <a-box position='0 0.5 0' material='color: red;'></a-box>
      <a-box position="-1 0.5 -1" rotation="0 45 0" color="#4CC3D9" shadow></a-box>
      <a-sphere position="0 1.25 -3" radius="1.25" color="#EF2D5E" shadow></a-sphere>
      <a-cylinder position="1 0.75 -1" radius="0.5" height="1.5" color="#FFC65D" shadow></a-cylinder>
      <a-plane position="0 0 -2" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane>

      <a-marker-camera preset='hiro'></a-marker-camera>
    </a-scene>
  </body>
</html>