Унифицированный компонент tracked-controls

tracked-controls — это базовый компонент в A-Frame, который обеспечивает поддержку различных VR-контроллеров через унифицированный интерфейс. Он является фундаментом для таких компонентов, как vive-controls, oculus-touch-controls и windows-motion-controls. Основная задача tracked-controls — отслеживать позицию и ориентацию контроллера, а также обрабатывать события кнопок и триггеров.

Подключение и базовое использование

Для работы с tracked-controls необходимо иметь сцену с VR-поддержкой и контроллер, совместимый с WebXR или WebVR. Компонент добавляется к сущности типа <a-entity>:

<a-entity id="controller"
          tracked-controls="hand: left; controller: 0;">
</a-entity>

Параметры компонента:

hand — указывает, к какой руке привязан контроллер (left или right).
controller — индекс контроллера, если подключено несколько устройств одного типа. По умолчанию равен 0.
id — идентификатор устройства (необязательный параметр, чаще используется для внутреннего сопоставления с Gamepad API).
model — логическое значение, указывающее, следует ли автоматически загружать 3D-модель контроллера (true/false).

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

tracked-controls использует WebXR или Gamepad API для получения трансформаций контроллера. Позиция (position) и ориентация (rotation или quaternion) обновляются каждый кадр, что позволяет точно отображать движения руки пользователя в виртуальном пространстве.

const controllerEl = document.querySelector('#controller');

controllerEl.addEventListener('controllerconnected', (evt) => {
    console.log('Контроллер подключен:', evt.detail);
});

controllerEl.addEventListener('controllerdisconnected', (evt) => {
    console.log('Контроллер отключен');
});

Ключевые события:

controllerconnected — контроллер был распознан и готов к использованию.
controllerdisconnected — контроллер отключен или перестал передавать данные.
buttonchanged — любое изменение состояния кнопки или триггера.
axismove — движение аналоговых стиков или трекпадов.

Работа с кнопками и триггерами

Компонент обеспечивает универсальный доступ к кнопкам контроллера через объект gamepad. Каждое устройство имеет массив buttons и массив axes:

controllerEl.addEventListener('buttonchanged', (evt) => {
    const buttonIndex = evt.detail.id;
    const pressed = evt.detail.state.pressed;
    console.log(`Кнопка ${buttonIndex} нажата: ${pressed}`);
});

Свойства кнопок:

pressed — булево значение, отражающее текущее состояние кнопки.
touched — указывает, касается ли пользователь сенсорной поверхности.
value — аналоговое значение (например, сила нажатия триггера).

Аналогично, события axismove предоставляют массив координат для стиков и трекпадов, что позволяет реализовать движение персонажа или управление камерой.

Интеграция с другими компонентами

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

vive-controls — HTC Vive, использует tracked-controls и загружает Vive-модель.
oculus-touch-controls — Oculus Touch, добавляет специфические кнопки и визуализацию.
windows-motion-controls — контроллеры Windows Mixed Reality.

Все эти компоненты расширяют tracked-controls, сохраняя единый интерфейс для событий и управления.

Настройка 3D-модели контроллера

Если установлен параметр model: true, компонент автоматически подгружает 3D-модель устройства. Это полезно для VR-игр и приложений, где визуальное отображение контроллера важно:

<a-entity id="controller"
          tracked-controls="hand: right; model: true;">
</a-entity>

Модели загружаются через встроенный менеджер controller-models, который определяет подходящую модель на основе id контроллера.

Продвинутая конфигурация

rotationOffset — позволяет задать начальный угол поворота модели контроллера.
positionOffset — смещение модели относительно позиции контроллера.
emulateTouch — имитация событий сенсорного ввода на устройствах без тачскринов.

Такие параметры позволяют интегрировать контроллеры в кастомные VR-сцены и точно настраивать визуальные и интерактивные элементы.