AR.js

Эта библиотека с бесплатным открытым кодом, предназначенная для создания дополнительной реальности и не требующая больших усилий для настройки, дает возможность даже новичку, который ни разу не сталкивался с этим понятием, использовать данный инструмент прямо у себя в смартфоне.
Для обнаружения и отображения объекта, используются специальные маркеры, а для полноценного использования достаточно просто вставить готовый код. Скачивать приложения при этом не потребуется, а все задачи будут осуществляться в интернет пространстве, одинаково корректно функционируя на любых моделях смартфонов. В основе AR.js лежат принципы построения jsartoolkit и three.js, которые прекрасно сочетаются с  A-frame.

1. Для начала работы нужно позаботиться о нескольких вещах. В первую очередь важно настроить веб-сервер, на котором будет размещен код. Для этого можно создать песочницу на codepen.io или разместиться на любом шаред/vds хостинге
2. Вторым шагом будет вставка в свой файл index.html данного кода:
   
   

     3. Ну, и, наконец, открыть полученную ссылку на своем устройстве и навести камеру на картинку.

Если присмотреться к коду, то становится понятно, что два начальных скрипта отвечают за импорт библиотек A-frame и AR.js, а команда  сообщает первой из них об инициализации embedded arjs с AR.js. То есть фактически A-frame отвечает за работу в веб-пространстве, а AR.js – преобразует готовую веб-сцену в AR-пространство.

Для того чтобы добавить объект, который будет включен в , можно использовать примитивы A-frame, и менять их по желанию. А финальный , позволит инструменту управлять камерой телефона.
Для продвинутых пользователей, существует возможность добавления анимации, авторской 3д модели или взаимодействия между ними.

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

1. Изображения должны иметь квадратную форму

   Фон не должен быть прозрачным или белым

   Ассиметричные маркеры работают эффективнее

 
Подготовленное изображение нужно загрузить с помощью кнопки «Upload», перейдя по ссылке 


Обратите внимание, что оптимальным дефолтным значением для рисунка является 0,50. Его можно изменить, но это может привести к необходимости внесение дополнительных строчек в код, в частности отметить это в embedded arjs, указав значение.

После этого результат можно скачать в виде .patt файла и сохранить его в тот же каталог, где находится index.html.
 
Теперь нужно сделать изменения в 

И добавить отдельную a-entityкамеру, на освободившееся место

Теперь код выглядит так:

На самом деле не так уж и сложно в этом разобраться! Технология AR-пространства только набирает обороты и продолжает стремительно развиваться. Так что самое время вникнуть и начать с помощью AR.js