Всем привет!
Моя первая заметка по существу в данном блоге. Скорее всего их будет много, так как программирование виртуальной реальности - это что-то очень объемное, непонятное, безграничное. Слишком много всего, о чем даже не подозреваешь. Поэтому по началу будут заметки чуть ли не на каждый чих, потому что даже простейшие на первый вид вещи делаются не так просто, освоение занимает часы, а через несколько дней можно забыть напрочь (пока осваиваешь другие непонятные вещи). До этого были некоторые задачи, но я их не стал описывать, ибо до этого времени вообще все слишком абстрактно было. А сейчас вот уже какие-то ощутимые шаги есть, боле менее понятные задачи и какие-то решения по ним найдены. Вот и решил, что уже можно.
Но данная статья пока еще не в формате мануала "виртуальная реальность с нуля", а просто личная заметка по событиям. Но, думаю, скорее всего какой-то цикл статей по этой теме появится скоро, когда боле менее сформируется понимание этой области. Пока что, кому интересно, можете начать с довольно простого примера: aframe-react, или вот еще очень хорошая вводная статья: https://habr.com/ru/post/439416/.
Итак, сегодняшняя тема: навесить события на отдельные объекты (кубы, конусы и т.п.) в нашей виртуальной реальности. Отдельная заметка возникла по причине того, что этот момент весьма неочевиден. Приводится множество примеров, но они в большинстве случаев не работают в браузере. Вероятно, в VR-шлеме оно и будет все работать, но пока что тесты проводятся в браузере, а там они не работают, события не срабатывают.
Методом проб и ошибок, а так же на основе отдельных примеров, вывел два варианта:
1. Добавить на сцену камеру с курсором. Пример:
<a-camera>
<a-cursor></a-cursor>
</a-camera>
// ....
Тогда на сцене по центру появится курсор. Когда двигаем сцену и курсор попадает на какой-нибудь объект, все события (клики и т.п.) в любой части сцены вызываются на целевом объекте.
2. Добавить атрибут cursor тегу сцены. Пример:
<a-scene
cursor="rayOrigin: mouse"
>
Тогда объекты становятся кликабельными, а при наведении мышкой появляется вполне привычный курсор. В таком случае события срабатывают на конкретных конечных объектах, что очень удобно.
Здесь есть момент: в таком виде выпоняемый код генерит предупреждения:
components:raycaster:warn [raycaster] For performance, please define raycaster.objects when using raycaster or cursor components to whitelist which entities to intersect with. e.g., raycaster="objects: [data-raycastable]".
Примерная суть сообщения: в целях улучшения производительности укажите с каким атрибутом объекты должны учитываться в событиях.
То есть для решения этого надо указать маску, а объектам добавить эти параметры. Пример:
<a-scene
cursor="rayOrigin: mouse"
raycaster="objects: [data-raycastable]"
>
<a-box
data-raycastable
position="1 1 1"
width="440.0"
height="1.0"
depth="443.0"
color="#969696"
onClick={function (event) {
console.log("onClick", event, event && event.target);
}}
/>
То есть если у вас на сцене несколько объектов, события будут срабатывать только на тех, которые имеют атрибут data-raycastable.
Николай, обязательно посмотрю статью на хабре (наверняка там это есть), но: у тебя есть предсталение, как эти технологии на сайтах можно эффективно использовать?
Дима, у меня пока нет четкого ответа тебе, то есть нет примеров, реализованных мной, я только осваиваю это. Но в жизни примеры есть. Наиболее перспективные решения:
- Выбор мебели (смена цвета кресел, диванов и т.п.). В шоуруме наводишь телефон на диван и меняешь цвета обивки из доступных.
- Вывод дополнительной информации на лобовое стекло автомобиля.
Вообще, вот довольно наглядная статья о перспективах AR/VR: https://hype.ru/@id103/3-prichiny-dlya-rosta-dopolnennoy-realnosti-v-2018-godu-9yomfqe7
Ну а лично для меня потребность вот в чем имеется на сегодня: есть проекты, в которых много сущностей и взаимосязей. К примеру, по недвижимости и контролю доступа. Вот есть площади, на них различные объекты (недвижимость, парковочные места, контрольно-пропускные пункты), отдельные объекты недвижимости в свою очередь состоят из этажей, помещений, подъездов и т.п. На отдельные помещения и объекты существуют договора, уровни доступов и т.п. В общем очень много связей. И вот как предоставить доступ к наиболее полному объему информации и какие инструменты дать для управления этой информацией? Классические HTML-страницы - не лучшее решение. Через них вполне нормально пошагово проваливаться от верхних информационных уровней до внутренних, но сразу все видеть - очень сложно. Мне кажется, что VR и 3D - это то, что может улучшить это. Вот пример: https://habr.com/ru/company/oleg-bunin/blog/354980/
Николай, спасибо за ссылки - интересные и наглядные данные для осмысления!
Не за что!
Дима, кстати, вот еще пример использования попался: https://habr.com/ru/company/pochtoy/blog/435344/
Да, тема)
добрый день, спасибо больше за статью!
а не пробовали ли вы клики на mindar-image-target ?
Клики на боксы/плейны и тд работают, но добавил ассет видео на a-plane, и хотел добавить клики на стоп/плей, но не работают (
Артем, к сожалению, я не являюсь экспертом в этом направлении. То есть время от времени я сталкиваюсь с кем-то интересным и описываю свой опыт, но далеко не всегда я углубляюсь очень глубоко.
Тем не менее, если вы выложите свой код в гитхаб и скинете ссылку и опишете в чем именно проблема, я с удовольствием поковыряюсь. Может что найду.