Показывать контент AR на веб-сайте приятно, но добавление взаимодействия с пользователем открывает совершенно новый мир возможностей.
Это часть серии статей об AR.js. Ниже приводится список статей, написанных на данный момент:
- AR.js - самый простой способ получить кроссбраузерную дополненную реальность в Интернете
- Как доставлять AR в Интернете только с помощью QR-кода
- Как обрабатывать события кликов на 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 - дизайнерская компания. Разрабатывая стратегию, дизайн, программное обеспечение и контент, мы налаживаем захватывающие отношения между брендами и людьми.