Показывать контент AR на веб-сайте приятно, но добавление взаимодействия с пользователем открывает совершенно новый мир возможностей.

Это часть серии статей об AR.js. Ниже приводится список статей, написанных на данный момент:

Чтобы быть в курсе последних новостей о AR.js и Web AR, вы можете следить за мной!

Отказ от ответственности: AR.js v3 отсутствует, с новой документацией, которую можно найти по адресу: https://ar-js-org.github.io/AR.js-Docs/. Узнайте больше там, если вы обнаружили проблемы с этим руководством.

В прошлых статьях Я писал про AR.js и Как мы можем доставлять AR-контент только с помощью QR-кода. Но как насчет взаимодействия с 3D-объектами, которые мы уже можем показать пользователю? Это откроет новый мир приложений для этой замечательной технологии.

Краткий поиск в репозитории AR.js на Github показывает несколько проблем, связанных с событиями, большинство из которых не решены. AR.js построен в верхней части кадра, и непросто понять, как обрабатывать простые события на 3D-объектах, то есть события щелчка.

Я попытался собрать все рабочие подсказки, которые я нашел, и организовать их в этой статье, в которой есть полный рабочий пример щелчка при взаимодействии с пользователем.

Итак, начнем!

Создайте точку входа HTML

Как всегда, приложение AR.js начинается с HTML-файла, который определяет маркеры, модели и так далее. В этом файле для обработки событий нам необходимо определить дополнительные свойства элементов. Посмотрим на них подробнее.

  • В строке 10 мы импортируем внешний файл Javascript, используемый для настройки обработчика событий. Мы увидим это позже
  • В строке 21 наш маркер определяется с дополнительными свойствами: markerhandler используется как зарегистрированное имя компонента, а emitevents и cursor определяют возможность генерирования событий, в частности, на основе мыши / касания.
  • Важно определить id или добавить очень конкретный класс CSS, чтобы позже получить наш маркер и элементы сущности.

Посмотрим, как выглядит наш events.js файл

Я уже прокомментировал inline, и код довольно самоочевиден: мы регистрируем наш компонент и при инициализации добавляем прослушиватель событий при нажатии.

В строке 10 я добавил дополнительную проверку: на самом деле, без нее события проверки запускаются несколько раз, один для маркера и один для объекта. С помощью этой проверки мы реагируем на событие только тогда, когда cursorEl, наш элемент-маркер, является видимым и является элементом, связанным с событием.

Вот и все! Оказавшись внутри слушателя событий, вы можете делать все, что захотите; Я увеличиваю объем 3D-модели с каждым щелчком мыши. Вы, конечно, можете сделать что-то более интересное и полезное, чем это :)

Изменить: в настоящее время я работаю над обновлением этой статьи до новых версий в рамке и отвечу всем, кто просит подробностей по этой теме. Будьте на связи!

Chialab - дизайнерская компания. Разрабатывая стратегию, дизайн, программное обеспечение и контент, мы налаживаем захватывающие отношения между брендами и людьми.

https: //www.chialab.i т.