Обзор WebXR Input API

WebXR Input API предназначен для обработки пользовательского ввода в виртуальной и дополненной реальности. В A-Frame интеграция с WebXR позволяет отслеживать действия контроллеров, движения головы и другие интерактивные события, создавая полноценный опыт погружения.

A-Frame использует сущность <a-entity> для представления контроллеров и источников ввода. Ключевыми атрибутами являются hand-controls, laser-controls и tracked-controls. Эти компоненты обеспечивают автоматическое распознавание устройства и подключение к API WebXR.

Компоненты для работы с контроллерами

1. tracked-controls Компонент tracked-controls предоставляет низкоуровневый доступ к информации о контроллерах, получаемой от WebXR. Он отслеживает позиции, ориентацию и события кнопок конкретного устройства. Основные параметры:

  • controller: строка, идентифицирующая устройство (например, oculus-touch, vive).
  • hand: левый или правый контроллер.

Пример:

<a-entity tracked-controls="controller: oculus-touch; hand: left"></a-entity>

2. hand-controls hand-controls упрощает работу с жестами и кнопками, автоматически сопоставляя действия с моделью устройства. Он предоставляет визуальные модели рук и контроллеров, а также события нажатия кнопок.

  • События: gripdown, gripup, triggerdown, triggerup.
  • Атрибут hand: левый или правый.

Пример:

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

3. laser-controls laser-controls добавляет визуальный лазерный указатель для взаимодействия с объектами. Позволяет реализовать выбор объектов дистанционно, обеспечивая точное попадание курсора.

  • Автоматическое определение устройства и настройка модели контроллера.
  • События click, mouseenter, mouseleave для взаимодействия с объектами сцены.

Пример:

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

Работа с событиями WebXR

A-Frame обрабатывает события ввода через стандартные DOM-события, расширенные под VR/AR:

  • selectstart / selectend / select — инициируют действия при нажатии кнопок взаимодействия.
  • squeezestart / squeezeend — события сжатия или удержания контроллера.
  • axismove — отслеживание перемещений джойстика или тачпада.

Пример прослушивания событий:

const controller = document.querySelector('#rightController');
controller.addEventListener('triggerdown', () => {
    console.log('Триггер нажат');
});
controller.addEventListener('axismove', (evt) => {
    console.log('Ось джойстика:', evt.detail.axis);
});

Отслеживание положения и ориентации

WebXR Input API позволяет получать точные координаты и ориентацию контроллеров. В A-Frame это реализуется через компоненты:

  • object3D.position — трехмерная позиция контроллера.
  • object3D.rotation — ориентация в сцене.
  • object3D.quaternion — кватернион для плавного вращения без глюков углов Эйлера.

Пример обновления позиции объекта в реальном времени:

AFRAME.registerComponent('follow-controller', {
  init: function () {
    this.controller = document.querySelector('#leftController');
  },
  tick: function () {
    if (this.controller) {
      this.el.object3D.position.copy(this.controller.object3D.position);
      this.el.object3D.quaternion.copy(this.controller.object3D.quaternion);
    }
  }
});

Поддержка различных устройств

WebXR Input API обеспечивает унифицированный доступ к контроллерам: Oculus Touch, HTC Vive, Windows Mixed Reality и другим. A-Frame автоматически определяет тип контроллера через navigator.xr и применяет подходящие модели. Для кастомных устройств можно использовать tracked-controls с явным указанием id устройства.

Жесты и распознавание рук

В A-Frame есть интеграция с WebXR Hand Input API, позволяющая отслеживать движение пальцев и жесты. Компонент hand-tracking-controls обеспечивает:

  • Отображение модели руки.
  • Отслеживание сгибания пальцев.
  • События для выполнения действий на основе жестов.

Пример:

<a-entity hand-tracking-controls="hand: left"></a-entity>

Пример обработки жеста «сжатый кулак»:

handEl.addEventListener('pinchstarted', () => {
  console.log('Жест: сжатый кулак');
});

Комбинирование нескольких источников ввода

A-Frame позволяет одновременно использовать несколько контроллеров, жесты рук и движения головы. Для этого создаются отдельные сущности для каждого источника ввода, а события можно объединять через компонентную логику:

AFRAME.registerComponent('multi-input', {
  init: function () {
    this.left = document.querySelector('#leftController');
    this.right = document.querySelector('#rightController');
    this.head = document.querySelector('#camera');
  },
  tick: function () {
    // Обработка действий всех источников
  }
});

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

Для работы с объектами можно использовать сочетание raycaster и событий контроллера. Laser или руки направляют луч на объект, и события mouseenter, mouseleave, click позволяют реализовать сложное взаимодействие:

<a-entity laser-controls="hand: right" raycaster="objects: .interactive"></a-entity>
<a-box class="interactive" position="0 1 -3" color="blue"></a-box>

Сценарии включают выбор объектов, перемещение, манипуляции с UI-панелями и управление сценой VR/AR.

Итоговые возможности WebXR Input API в A-Frame

  • Полная поддержка контроллеров и жестов.
  • Унификация ввода с различных устройств через единый API.
  • Событийная модель для интерактивного взаимодействия.
  • Отслеживание точного положения и ориентации контроллера или руки.
  • Простая интеграция с визуальными объектами сцены через raycaster и компоненты A-Frame.

Эти инструменты позволяют строить сложные VR/AR-сценарии с высоким уровнем интерактивности и погружения.

Оглавление