Итак, у вас должен быть некоторый фундамент из моей предыдущей статьи о AR.js. Давайте рассмотрим еще несколько интересных моментов.

Уменьшите размер границы черного маркера

Лично я думаю, что толщина границы по умолчанию немного неприятна для маркеров, и я слышал то же самое, повторенное несколькими другими людьми, использующими AR.js. Однако, если вы используете последнюю версию фреймворка, отрегулировать размер границы по своему усмотрению проще, чем когда-либо!

В прошлой статье я обсуждал, как создавать маркеры и их изображения с помощью инструмента AR.js Marker Training. Если вы перейдете по ссылке, вы увидите, что в верхнем левом углу есть небольшой ползунок Соотношение узора (подсказка: это толщина черной границы). Вы можете думать об этом как о процентном соотношении маркера, занимаемого фактическим изображением маркера. Так, например, если для параметра Pattern Ratio установлено значение 0,75 (мое предпочтительное значение), это означает, что 75% маркера - это ваше изображение в центре, а оставшиеся 25% занимает черная рамка.

После того, как вы определите, где вы хотите, чтобы соотношение шаблонов было, сгенерируйте и сохраните как шаблон маркера, так и изображение маркера для своего приложения, как подробно описано в моей предыдущей статье AR.js. Вернувшись в свое приложение, все, что требуется, - это одна небольшая настройка, чтобы связать это. В вашем элементе ‹a-scene› добавьте patternRatio=0.75 (или любое другое желаемое значение) к параметру arjs.

Используйте свои собственные 3D-модели

Конечно, кубы, сферы, плоскости и цилиндры - это круто, но в большинстве случаев вы захотите использовать и отображать пользовательскую 3D-модель в создаваемой вами сцене дополненной реальности. К счастью, AR.js делает это довольно простым делом!

Самый простой способ начать с этого - убедиться, что ваши модели имеют формат obj или glTF. Они изначально работают с AR.js и a-frame, не требуя дополнительных настроек или настроек для начала работы. Вы можете найти огромный репозиторий бесплатных и доступных моделей obj на https://sketchfab.com.

Примечание. В следующих примерах вы увидите тег <a-entity>, это общая замена для <a-sphere> и т.п., позволяющая указать свою собственную геометрию / материалы и т. д. вместо использования готовых.

Для моделей obj:

Внутри нашего тега a-entity мы будем использовать свойство obj-model, которое потребует от вас указать пути как к файлу модели .obj, так и к сопутствующему ему .mtl файл материала. Конечный результат должен выглядеть так:

Для моделей glTF:

Это еще проще, потому что это всего лишь один путь! Замените опору obj-model на gtlf-model и укажите путь к вашей модели в качестве значения:

Анимировать свойства объекта

Используя a-frame версию AR.js, вы можете реализовать и использовать связанные с ней компоненты. Используя API анимации a-frame, мы можем довольно легко вращать, масштабировать и иным образом манипулировать нашими моделями и их свойствами.

В этом примере мы заставим нашу импортированную модель медленно мигать, изменяя непрозрачность материала от 0 до 1 и обратно до 0 бесконечное количество раз. Чтобы добавить это, мы просто вставляем тег <a-animation> между закрывающим и открывающим тегами <a-entity>. Установка атрибута prop в material.opacity позволяет a-frame знать, что мы хотим анимировать непрозрачность, from и to props - это значения, между которыми мы анимируем.

Установка опоры direction на «альтернативу» означает, что как только мы перешли от начального значения к новому значению, вместо того, чтобы сразу вернуться к начальному значению и начать заново, анимация меняет направление и вместо этого возвращается к начальному значению. . Наконец, мы устанавливаем свойство repeat на «неопределенный», что означает, что мы хотим, чтобы эта анимация работала вечно.

Создайте прослушиватель событий для маркеров

Просто небольшое предупреждение: вам потребуется покопаться в исходном коде AR.js, а затем повторно скомпилировать скрипты, используя make. Если вас это устраивает, давайте продолжим!

Итак, зачем нам вообще нужен слушатель событий? Я могу привести вам реальный пример: мой клиент хотел отображать простой блок контента всякий раз, когда на устройстве пользователя активен маркер. Контент должен был исчезать всякий раз, когда не было активного маркера. Чтобы реализовать это, нам нужно было добавить прослушиватель событий, который запускался бы всякий раз, когда маркер был найден / потерян, а затем мы подключались к нему в пакете JavaScript нашего основного сайта и отображали / скрывали контент всякий раз, когда это событие запускалось.

Благодаря пул реквесту Николаймихайлова мы можем точно увидеть, куда вносить эти правки. Есть только один файл, который нужно изменить, aframe / src / component-anchor.js, но это делается в нескольких разных местах. Если вы нажмете на эту ссылку, вы увидите зеленым цветом строки, которые необходимо добавить в текущий файл component-anchor.js. Как только это будет изменено, перейдите в корневой каталог aframe и запустите make build && make minify, чтобы создать и перезаписать сценарии .js и .min.js для ваших проектов.

Затем, вернувшись к вашему фактическому проекту, для реализации прослушивателей событий вам необходимо зарегистрировать компонент кадра, а затем установить прослушиватели событий для markerFound и markerLost. Внутри соответствующих функций обратного вызова напишите любой JS, который будет запускаться при обнаружении или потере маркера.

На этом пока все! Если у вас есть какие-либо вопросы или вы хотите дать мне несколько советов по статье № 3 AR.js, напишите мне в Twitter.