Компонент cursor

Компонент cursor отвечает за управление взаимодействием пользователя с объектами сцены в виртуальной реальности и 3D-интерфейсах. Он позволяет определять точку взаимодействия на поверхности объектов, реагировать на клики, наведении и другие события, обеспечивая функционал “указателя” внутри сцены.

В A-Frame компонент cursor обычно используется совместно с camera или hand-controls, чтобы визуализировать положение указателя в пространстве. Типичная структура подключения:

<a-entity camera look-controls>
  <a-entity cursor="fuse: true; fuseTimeout: 1500"
            position="0 0 -1"
            geometry="primitive: ring; radiusInner: 0.01; radiusOuter: 0.02"
            material="color: black; shader: flat">
  </a-entity>
</a-entity>

Здесь ключевые параметры:

fuse — включает автоматическое срабатывание события после наведённого времени.
fuseTimeout — время ожидания в миллисекундах перед срабатыванием при активированном fuse.
geometry — форма указателя. Чаще всего используется кольцо (ring) для VR-интерфейсов.
material — внешний вид указателя, включая цвет и тип шейдера.

Типы курсоров

Прямой курсор (raycast) Основной тип курсора, который создаёт невидимую линию (луч) из позиции камеры или контроллера к объектам сцены. С его помощью можно определять пересечения с объектами. Этот метод является стандартным в VR и AR.
Курсор с fuse (автоклик) Используется в устройствах без физической кнопки, например в очках VR. При наведении на объект курсор запускает таймер и автоматически инициирует событие после истечения заданного времени (fuseTimeout).
Курсор с событием клика Позволяет привязывать события к действию пользователя, например click, mouseenter, mouseleave. Это позволяет создавать интерактивные интерфейсы.

Настройка событий курсора

События курсора обрабатываются через стандартные DOM-события. Основные события:

mouseenter — срабатывает при наведении на объект.
mouseleave — срабатывает при уходе курсора с объекта.
click — активация объекта при клике или завершении fuse.
fusing — срабатывает на каждом кадре во время активного fuse.
fuseend — завершение таймера fuse.

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

<a-box position="0 1 -3" color="#4CC3D9"
       event-set__mouseenter="_event: mouseenter; color: red"
       event-set__mouseleave="_event: mouseleave; color: #4CC3D9">
</a-box>

Здесь через компонент event-set меняется цвет объекта при наведении и уходе курсора.

Взаимодействие с raycaster

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

<a-entity camera look-controls>
  <a-entity cursor="rayOrigin: mouse" raycaster="objects: .clickable">
  </a-entity>
</a-entity>

Параметры rayOrigin:

entity — луч создаётся от позиции сущности.
mouse — луч следует за положением курсора мыши (для 2D-интерфейсов).

Параметр objects указывает, с какими объектами должен взаимодействовать луч (.clickable — класс объектов).

Визуальные индикаторы курсора

Для повышения UX курсор часто визуализируется в виде кольца, точки или другой формы. Настройка внешнего вида осуществляется через geometry и material:

<a-entity cursor="fuse: true"
          geometry="primitive: ring; radiusInner: 0.005; radiusOuter: 0.01"
          material="color: yellow; shader: flat">
</a-entity>

Можно использовать анимацию для изменения размера или цвета курсора при наведении:

<a-entity cursor="fuse: true" geometry="primitive: ring; radiusInner: 0.005; radiusOuter: 0.01"
          material="color: yellow; shader: flat"
          animation__mouseenter="property: scale; to: 1.5 1.5 1; startEvents: mouseenter"
          animation__mouseleave="property: scale; to: 1 1 1; startEvents: mouseleave">
</a-entity>

Особенности работы в VR и WebXR

VR-контроллеры: Курсор можно подключить к контроллерам для имитации лазерной указки. Это расширяет функционал стандартного gaze-курсор.
WebXR: Компонент полностью совместим с WebXR API, позволяя использовать как голову пользователя для наведения, так и ручные контроллеры.