Вчера решил посмотреть, что нового в AR и наткнулся на AR.js. AR.js отличается от многих других платформ дополненной реальности тем, что он полностью основан на браузере и не требует от пользователя загрузки или установки чего-либо. Его просто реализовать, и для начала работы требуется всего несколько строк HTML.

<!doctype HTML>
<html>
<script src="https://aframe.io/releases/0.9.1/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.7.1/aframe/build/aframe-ar.js"></script>
  <body style='margin : 0px; overflow: hidden;'>
    <a-scene embedded arjs>
      <a-marker preset="hiro">
          <a-box position='0 0.5 0' material='color: yellow;'></a-box>
      </a-marker>
      <a-entity camera></a-entity>
    </a-scene>
  </body>
</html>

Если вы хотите попробовать это сами, просто отсканируйте QR-код, чтобы перейти к приложению AR, а затем посмотрите на маркер Hiro через приложение.

Поиграв с ним некоторое время, я смог понять, как использовать как пользовательские маркеры AR, так и пользовательские 3D-модели. Хотя в качестве маркера можно использовать изображение или текст, я обнаружил, что матрицы данных 3x3 имеют гораздо лучшее отслеживание. Я сделал простой логотип для своей школы и использовал его в качестве модели. Затем я поместил свой маркер на QR-код, ведущий на страницу AR.js, которая использует мою модель. Я смог доставить опыт AR с помощью только QR-кода. Никаких загрузок или настроек, это просто и легко!

Попробуйте!