Примитив a-cursor

Примитив a-cursor используется для управления точкой взаимодействия в виртуальной реальности, обычно в сценах с использованием VR-контроллеров или глазного отслеживания (gaze-based interaction). Он обеспечивает возможность выбора объектов, активации событий и навигации в 3D-среде.

a-cursor обычно располагается внутри сущности a-camera, так как именно камера определяет положение наблюдателя в сцене. Простейшая структура выглядит следующим образом:

<a-scene>
  <a-camera>
    <a-cursor></a-cursor>
  </a-camera>
</a-scene>

В этом случае a-cursor будет отображаться как маленький сферический объект в центре поля зрения, указывая точку, куда направлен взгляд пользователя.

Основные атрибуты a-cursor

fuse Позволяет включить режим «затяжного наведения» для взаимодействия без клика. Значение true активирует автоматическое срабатывание события click после удержания курсора на объекте заданное время.

<a-cursor fuse="true" fuse-timeout="1500"></a-cursor>
  • fuse-timeout — время в миллисекундах до активации события.

rayOrigin Определяет точку начала луча (Raycaster), которым управляет курсор. Возможные значения:

  • "entity" — луч исходит из позиции курсора или сущности;
  • "mouse" — луч следует за курсором мыши (удобно для десктопного взаимодействия).

color и opacity Позволяют настроить визуальное отображение курсора:

<a-cursor color="#FF0000" opacity="0.8"></a-cursor>

geometry Позволяет задать форму курсора, например сферу, цилиндр или плоскость. По умолчанию используется маленькая сфера. Настройка может выглядеть так:

<a-cursor geometry="primitive: ring; radiusInner: 0.01; radiusOuter: 0.02"></a-cursor>

Взаимодействие с объектами сцены

a-cursor тесно интегрируется с компонентом raycaster, который определяет, какие объекты в сцене могут быть выбраны. Для того чтобы объект реагировал на курсор, необходимо добавить компонент class или raycaster:

<a-box position="0 1.5 -3" color="#4CC3D9" class="clickable"></a-box>

Курсор может использовать события mouseenter, mouseleave и click для взаимодействия:

document.querySelector('.clickable').addEventListener('mouseenter', () => {
  console.log('Курсор наведён на объект');
});

document.querySelector('.clickable').addEventListener('mouseleave', () => {
  console.log('Курсор покинул объект');
});

document.querySelector('.clickable').addEventListener('click', () => {
  console.log('Объект выбран');
});

Fuse и интерактивные элементы

Режим fuse особенно полезен для VR-гарнитур без контроллеров. Он позволяет пользователю выбирать объекты взглядом, без необходимости физического нажатия. Настройка временной задержки позволяет гибко регулировать отклик:

<a-cursor fuse="true" fuse-timeout="2000" color="#00FF00"></a-cursor>

В этом примере курсор становится зелёным, а событие click срабатывает после двух секунд удержания на объекте.

Настройка анимаций при наведении

a-cursor может быть использован совместно с компонентом animation для визуального отклика на взаимодействие:

<a-box position="0 1.5 -3" color="#4CC3D9" class="clickable"
       animation__mouseenter="property: scale; to: 1.2 1.2 1.2; startEvents: mouseenter"
       animation__mouseleave="property: scale; to: 1 1 1; startEvents: mouseleave">
</a-box>

Такой подход создаёт эффект увеличения объекта при наведении и возвращает его к исходным размерам при уходе курсора.

Интеграция с VR-контроллерами

Для работы с контроллерами курсор может быть прикреплён к сущности контроллера:

<a-entity laser-controls="hand: right">
  <a-cursor></a-cursor>
</a-entity>

В таком случае луч курсора будет исходить из контроллера и позволять интерактивное выделение объектов в пространстве. Поддерживаются события mouseenter, mouseleave и click, идентичные gaze-based взаимодействию.

Продвинутая настройка

Смена форм курсора при наведении на объект:

const cursor = document.querySelector('a-cursor');
const box = document.querySelector('.clickable');

box.addEventListener('mouseenter', () => {
  cursor.setAttribute('geometry', 'primitive: ring; radiusInner: 0.015; radiusOuter: 0.03');
});

box.addEventListener('mouseleave', () => {
  cursor.setAttribute('geometry', 'primitive: sphere; radius: 0.01');
});

Использование кастомных материалов:

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

Практические рекомендации

  • Размещать a-cursor только внутри a-camera или контроллера.
  • Использовать fuse для устройств без контроллеров.
  • Применять события mouseenter и mouseleave для интерактивной анимации объектов.
  • Комбинировать с кастомной геометрией и материалами для улучшения визуального восприятия.
  • Тестировать сцены как на десктопе, так и в VR, чтобы убедиться в корректной работе всех событий и задержек.

a-cursor является ключевым инструментом для интерактивности в A-Frame, обеспечивая гибкость и точность взаимодействия с 3D-сценами. Он легко комбинируется с анимациями, кастомными материалами и контроллерами, создавая полноценный опыт виртуальной реальности.

Оглавление