Как создать свой маркер на AR.js

Итак, после создания нашего первого AR.js-приложения, нам стоит заменить стандартный маркер hiro на свой, более подходящий для нашей цели. Это сделать легко — с помощью AR.js Marker Training.

Алгоритм

1. Заходим на сайт AR.js Marker Training

2. Нажимаем на UPLOAD, чтобы загрузить картинку, которая станет маркером. Я загрузил иконку авокадо.

   Мы также можем изменить внешний вид, меняя значения Pattern Ratio и Image size, где Pattern Ratio регулирует толщину обрамляющего квадрата, а Image size позволяет настроить чёткость изображения

   Но я Вам не советую менять эти значения. Потому что маркер может сломаться. Так было у меня, когда я сделал Pattern Ratio максимальным

3. Скачиваем созданный маркер нажатием по DOWNLOAD MARKER. И переносим его в папку с проектом, чтобы приложение знало какой маркер искать. Я создал директорию custom_marker, куда и поместил созданный маркер.

4. Также скачиваем изображение маркера, чтобы было на что наводить. Для этого кликаем на DOWNLOAD IMAGE. Скачанное изображение мы можем либо перенести в свой проект, либо распечатать. Второй вариант прекрасен тем, что позволяет взаимодействовать с виртуальным миром через реальные объекты. Я же выбрал оба варианта: и распечатал, и сохранил в ту же директорию, что и раньше.

   Если у Вас цветной маркер, но чёрно-белый принтер, сделайте маркер чёрно-белым. Иначе приложение может не найти Ваш маркер по цвету.

   В итоге у меня получился следующий маркер. Можете использовать его в своём проекте с целью понимания данной статьи.

   

   Авокадо иконка от Icons8

5. Теперь нам нужно поменять код, чтобы приложение искало вместо стандартной метки нашу.

   Для этого нам нужно только заменить строку <a-marker preset="hiro"> на <a-marker preset="custom" type="pattern" url="custom_marker/custom.patt">, где перечисленные атрибуты вывполняют следующие функции:

   • preset="custom" - показывает, что маркер не дефолтный (обозначаемый preset="hiro"), а личный, созданный нами

   • type="pattern" - определяет использование шаблона для отслеживания объектов в AR. Это помогает системе распознавать и отслеживать определённые изображения, а камере — правильно размещать и показывать 3D-объекты.

   • url="custom_marker/custom.patt" - адрес расположения маркера, в нашем случае маркер custom.patt хранится в папке custom_marker репозитория проекта

6. Ну и напоследок - замените модель на подходящую, либо не меняйте, если лень. Я же заменю, чтобы достичь своей цели. А также увеличю, чтобы моя модель, которая изначально слишком мелкая, была хорошо видна. Кстати, если Вы не увидите новую модель после внедрения на свой сайт, присмотритесь повнимательнее. Вдруг она очень мелкая, как и в моём случае.

   Кстати, бонус - добавим код вращения модели. То есть ответим на вопрос: "Как сделать вращение модели на AR.js вокруг себя?"

   Тут всё просто - нам нужно добавить параметры rotation и animation к тегу a-entity. Вот что каждый из них делает:

   • rotation задает начальную позицию для будущей анимации

   • animation как раз и отвечает за анимацию. нет нужды писать код js, который может быть длиннее и который надо ещё придумать, в котором нужно ещё разобраться.

     У animation есть следующие свойства:

     1. property: rotation; — этот параметр указывает, какое свойство 3D-объекта будет анимироваться. В данном случае это rotation, то есть углы поворота куба вокруг его осей (X, Y, Z).

     2. to: 0 360 0; — этот параметр задает конечные значения анимации. Здесь означает, что куб будет поворачиваться от своего начального положения до 360 градусов вокруг оси Y. Значения представляют собой углы в градусах для каждой из трех осей: X, Y и Z.

     3. loop: true; — этот параметр указывает, что анимация должна повторяться бесконечно. Если установить значение в false, анимация выполнится только один раз.

     4. dir: alternate; — этот параметр задает направление анимации. Значение alternate означает, что анимация будет воспроизводиться сначала до конечного значения, затем обратно до начального положения. Это создаст эффект пульсации. Если бы вы установили dir: normal, анимация бы выполнялась только в одном направлении (от начального до конечного).

     5. dur: 3000; — этот параметр определяет продолжительность анимации в миллисекундах. Значение 3000 означает, что анимация займет 3 секунды. Этот параметр можно изменить для изменения скорости анимации. Меньшее значение увеличит скорость, а большее — замедлит ее.

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

   А вот список всех свойств атрибута animation, с помощью которых можно создавать любую анимацию на AR.js

   Итак, возьмём код с первого урока и заменим в нём тег a-marker на следующий:

                                                       
   <a-marker preset="custom" type="pattern" url="custom_marker/custom.patt">
       <a-entity 
           gltf-model="https://cdn.rawgit.com/KhronosGroup/glTF-Sample-Models/master/2.0/Avocado/glTF/Avocado.gltf"
           scale="15 15 15"
           rotation="0 0 0"
           animation="property: rotation; to: 0 360 0; loop: true; dur: 3000;"
       >
       </a-entity>
   </a-marker>
                                                       
                                                   

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