Компонент raycaster: параметры и настройка

Компонент raycaster предназначен для определения пересечений луча с объектами сцены, что позволяет реализовывать интерактивность в VR и 3D-пространствах. Луч создается от позиции сущности и может быть направлен в конкретном направлении. Наиболее часто используется для имитации указки, контроля движений или выделения объектов.

Синтаксис подключения компонента:

<a-entity raycaster="objects: .clickable; far: 10;"></a-entity>

Здесь objects определяет CSS-класс объектов, с которыми луч будет взаимодействовать, а far задает максимальную дальность луча.

Ключевые параметры raycaster

1. objects Определяет фильтр объектов, с которыми луч может пересекаться. Значение задается как CSS-селектор. Пример:

<a-entity raycaster="objects: .interactive;"></a-entity>

Только объекты с классом interactive будут отслеживаться. Можно указать несколько классов через запятую: ".interactive, .clickable".

2. far и near Определяют дальность действия луча:

  • far — максимальное расстояние пересечения.
  • near — минимальное расстояние, с которого луч начинает взаимодействовать.

Пример:

<a-entity raycaster="far: 20; near: 0.5;"></a-entity>

3. interval Частота обновления пересечений в миллисекундах. По умолчанию 0, что означает обновление на каждом кадре. Используется для оптимизации производительности.

4. showLine и lineColor Позволяют визуализировать луч:

  • showLine: true — отображает линию луча.
  • lineColor: red — задает цвет линии.
<a-entity raycaster="showLine: true; lineColor: blue;"></a-entity>

5. direction Определяет направление луча относительно локальной системы координат сущности. Формат: x y z.

<a-entity raycaster="direction: 0 0 -1;"></a-entity>

По умолчанию луч направлен вдоль отрицательной оси Z сущности.

6. objects vs recursive Параметр recursive: true позволяет лучу проверять пересечения с дочерними объектами группы. Без него пересечения фиксируются только на верхнем уровне объектов.

Взаимодействие с событиями

Raycaster генерирует несколько событий для работы с пересечениями:

  • raycaster-intersected — объект пересекается с лучом впервые.
  • raycaster-intersected-cleared — луч больше не пересекается с объектом.
  • raycaster-intersection — событие каждого кадра при пересечении объекта.

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

<a-entity id="cursor" raycaster="objects: .interactive"></a-entity>

<script>
  const cursor = document.querySelector('#cursor');
  cursor.addEventListener('raycaster-intersected', (evt) => {
    console.log('Пересечение с:', evt.detail.el);
  });
  cursor.addEventListener('raycaster-intersected-cleared', (evt) => {
    console.log('Прекращение пересечения с:', evt.detail.el);
  });
</script>

События evt.detail содержат объект el, с которым произошло пересечение, и массив всех объектов, находящихся в зоне действия луча.

Настройка интерактивности

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

<a-box class="interactive" position="0 1 -3"></a-box>
<a-sphere class="interactive" position="2 1 -4"></a-sphere>

Привязка к курсору или контроллеру: Луч чаще всего размещается на сущности курсора (a-cursor) или на VR-контроллере:

<a-entity laser-controls="hand: right" raycaster="objects: .interactive"></a-entity>

В таком случае raycaster динамически обновляется вместе с движением руки.

Использование нескольких лучей: Можно создать несколько сущностей с raycaster, чтобы отслеживать разные группы объектов. Это особенно удобно в сложных сценах с разными слоями интерактивности.

Оптимизация производительности

  • Установка interval > 0 уменьшает нагрузку на рендеринг.
  • Ограничение objects конкретными классами снижает количество проверок.
  • Параметр far следует использовать минимально необходимый для взаимодействия.
  • recursive: false, если нет вложенных объектов, ускоряет вычисления.

Продвинутые возможности

  • Dynamic Objects: луч может работать с объектами, создаваемыми и удаляемыми динамически. При добавлении новых объектов с нужным классом они автоматически попадут в область пересечения.
  • Комбинация с анимациями: события пересечения можно использовать для запуска анимаций animation или изменения материалов через material.color.
  • Множественные пересечения: свойство objects и события позволяют определить все объекты под лучом и обрабатывать их по приоритету или дистанции.
cursor.addEventListener('raycaster-intersection', (evt) => {
  evt.detail.els.forEach(el => {
    el.setAttribute('material', 'color', 'yellow');
  });
});
  • Использование с физикой: совместно с ammo.js или cannon.js луч может проверять столкновения объектов с физическими телами, расширяя возможности интерактивности.

Советы по проектированию

  • Лучшие практики включают явное назначение классов интерактивным объектам.
  • Для визуальной обратной связи лучше использовать showLine и lineColor.
  • Для VR-контроллеров важно учитывать локальные координаты направления луча.
  • При большом количестве объектов рекомендуется использовать оптимизацию interval и far.

Эффективное использование raycaster в A-Frame обеспечивает надежную интерактивность и гибкость управления взаимодействием с 3D-объектами.

Оглавление