События курсора: click, mouseenter, mouseleave, fusing

В A-Frame взаимодействие с объектами в 3D-сцене осуществляется через компонент cursor, который позволяет отслеживать действия пользователя: нажатие, наведение, уход с объекта, а также фокусирование на объекте с помощью системы «fusing». Эти события являются ключевыми для создания интерактивных VR/AR-сцен.

Событие click

Событие click срабатывает, когда пользователь активирует объект с помощью курсора. Активация может происходить кликом мыши, тапом на сенсорном экране или с помощью VR-контроллера.

Пример использования:

<a-entity geometry="primitive: box" material="color: blue"
          position="0 1 -3"
          event-set__click="_event: click; _target: #box; material.color: red">
</a-entity>

<a-entity id="box"></a-entity>

В данном примере при клике на синий куб его цвет меняется на красный. Событие click можно привязывать через JavaScript для более сложной логики:

const box = document.querySelector('#box');
box.addEventListener('click', () => {
    box.setAttribute('material', 'color', 'green');
});

Ключевой момент: событие click срабатывает только после взаимодействия с курсором, если объект находится под его прицелом.

Событие mouseenter

mouseenter срабатывает, когда курсор наведен на объект. Это позволяет визуально подсвечивать объекты или запускать анимации при наведении.

Пример:

<a-entity geometry="primitive: sphere" material="color: yellow"
          position="2 1 -3"
          id="sphere">
</a-entity>
const sphere = document.querySelector('#sphere');
sphere.addEventListener('mouseenter', () => {
    sphere.setAttribute('material', 'color', 'orange');
});

При наведении на сферу её цвет меняется на оранжевый. Событие mouseenter полезно для создания эффекта наведения, который знаком из классических веб-интерфейсов.

Событие mouseleave

mouseleave срабатывает, когда курсор покидает объект. Часто используется совместно с mouseenter для восстановления исходного состояния объекта.

sphere.addEventListener('mouseleave', () => {
    sphere.setAttribute('material', 'color', 'yellow');
});

Вместе с mouseenter это создаёт динамическое поведение: объект реагирует на курсор, изменяя свои свойства при наведении и возвращая их при уходе.

Событие fusing

Fusing — уникальное для VR событие, которое срабатывает после фиксированного времени наведения курсора на объект. Это особенно важно для устройств без кнопок, где взаимодействие осуществляется только взглядом.

Подключение компонента:

<a-entity cursor="fuse: true; fuseTimeout: 2000"></a-entity>
  • fuse: true — активирует механизм фокусирования.
  • fuseTimeout — время в миллисекундах, необходимое для срабатывания события.

Пример использования события fusing:

const box = document.querySelector('#box');
box.addEventListener('click', () => {
    console.log('Сработало событие fusing или клик');
});

При включенном fuse событие click будет автоматически срабатывать после установленного времени, имитируя активацию объекта взглядом.

Особенности fusing:

  • Работает только с курсором, который поддерживает gaze-based взаимодействие.
  • fuseTimeout можно настраивать для различных объектов, создавая разное время отклика.
  • Используется для меню, интерактивных сцен и VR-панорам.

Комбинирование событий

Для сложной интерактивности события курсора можно комбинировать:

box.addEventListener('mouseenter', () => box.setAttribute('material', 'color', 'red'));
box.addEventListener('mouseleave', () => box.setAttribute('material', 'color', 'blue'));
box.addEventListener('click', () => console.log('Объект активирован'));

Такой подход позволяет реализовать:

  • Визуальную обратную связь — изменения цвета или размера при наведении.
  • Активацию действий — выполнение функции при клике или fusing.
  • VR-интерактивность — использование gaze для управления сценой без контроллера.

Рекомендации по использованию

  • Минимизировать перекрытие объектов: при наложении нескольких объектов события курсора могут срабатывать некорректно.
  • Использовать raycaster: он определяет точку пересечения курсора с объектами сцены и повышает точность событий.
  • Настраивать fuseTimeout в зависимости от сцены: для элементов управления меню — короткое время, для сложных действий — более длинное.
  • Объединять визуальные и функциональные эффекты: комбинирование изменения цвета и анимации при mouseenter делает интерактивность более наглядной.

Эти события образуют основу интерактивных VR-сцен в A-Frame, обеспечивая гибкое управление объектами и создавая эффект присутствия.

Оглавление