Компонент camera

Компонент camera в библиотеке A-Frame определяет точку наблюдения в трёхмерной сцене. Он задаёт положение и ориентацию виртуального наблюдателя, формирует матрицу проекции и управляет отображением объектов на экране или в VR-гарнитуре. Без камеры сцена не может быть визуализирована.

В основе работы camera лежит механизм проекций из Three.js, на котором построен A-Frame. Компонент инкапсулирует создание и настройку THREE.Camera, предоставляя декларативный HTML-интерфейс.

Базовая структура

Минимальный пример камеры:

<a-entity camera></a-entity>

Чаще всего камера размещается внутри сцены:

<a-scene>
  <a-entity camera position="0 1.6 0"></a-entity>
</a-scene>

Позиционирование

Камера является обычной сущностью (entity), поэтому поддерживает:

  • position
  • rotation
  • scale
  • вложенность в иерархии

Пример:

<a-entity position="0 1.6 0">
  <a-entity camera></a-entity>
</a-entity>

Такой подход используется для разделения логики движения и логики проекции.

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

Компонент camera принимает несколько важных свойств.

active

camera="active: true"

Определяет, используется ли камера как основная. В сцене может существовать несколько камер, но активной одновременно будет только одна.

near

Ближняя плоскость отсечения.

camera="near: 0.1"

Объекты ближе указанного значения не отображаются.

far

Дальняя плоскость отсечения.

camera="far: 1000"

Объекты дальше указанного значения не отображаются.

fov

Угол обзора (в градусах).

camera="fov: 80"

Меньшее значение создаёт эффект «зумирования», большее — расширяет поле зрения.

zoom

Коэффициент масштабирования.

camera="zoom: 2"

Используется в перспективной камере для дополнительного приближения.

Перспективная и ортографическая проекция

По умолчанию используется перспективная камера (PerspectiveCamera из Three.js). Она имитирует реальное человеческое зрение: удалённые объекты выглядят меньше.

Для создания ортографической камеры:

<a-entity camera="projection: orthographic"></a-entity>

Особенности ортографической камеры

  • Отсутствует перспектива
  • Размер объектов не зависит от расстояния
  • Подходит для интерфейсов и 2D-представлений

Дополнительные параметры:

camera="projection: orthographic; left: -1; right: 1; top: 1; bottom: -1"

Камера в VR-режиме

В WebVR/WebXR-сценариях камера автоматически синхронизируется с положением гарнитуры. A-Frame использует WebXR API через браузер.

При активации VR:

  • Положение камеры обновляется из трекинга
  • Вращение контролируется устройством
  • Игнорируются некоторые ручные трансформации

Пример стандартной конфигурации:

<a-entity id="rig" position="0 0 0">
  <a-entity camera look-controls wasd-controls></a-entity>
</a-entity>

Здесь:

  • look-controls отвечает за управление обзором
  • wasd-controls — за перемещение

Связь с компонентами управления

look-controls

Позволяет вращать камеру мышью или гироскопом устройства.

<a-entity camera look-controls></a-entity>

В VR-режиме компонент автоматически отключает мышиное управление.

wasd-controls

Обеспечивает передвижение по сцене с клавиатуры.

<a-entity camera wasd-controls></a-entity>

Основные клавиши:

  • W — вперёд
  • S — назад
  • A — влево
  • D — вправо

Скорость регулируется параметром acceleration.

Иерархия и «rig»-паттерн

Практически всегда камера помещается в родительский контейнер — так называемый rig:

<a-entity id="rig" position="0 1.6 0">
  <a-entity camera look-controls></a-entity>
</a-entity>

Преимущества:

  • Разделение логики вращения и перемещения
  • Возможность добавления контроллеров VR
  • Удобство телепортации

Телепортация реализуется изменением позиции rig, а не самой камеры.

Несколько камер в сцене

Возможна конфигурация с несколькими камерами:

<a-entity id="cam1" camera="active: true"></a-entity>
<a-entity id="cam2" camera="active: false"></a-entity>

Переключение активной камеры через Jav * aScript:

document.querySelector('#cam1').setAttribute('camera', 'active', false);
document.querySelector('#cam2').setAttribute('camera', 'active', true);

Это используется для:

  • создания кат-сцен
  • режимов от третьего лица
  • переключения на «наблюдательную» камеру

Доступ к объекту Three.js

Каждая камера создаёт внутренний объект Three.js. Доступ к нему возможен через:

const el = document.querySelector('[camera]');
const threeCamera = el.getObject3D('camera');

Через threeCamera можно:

  • менять параметры проекции
  • обновлять матрицы
  • применять постобработку

Пример изменения угла обзора:

threeCamera.fov = 100;
threeCamera.updateProjectionMatrix();

HUD и привязка объектов к камере

Для создания интерфейса (HUD) объекты размещаются как дочерние элементы камеры:

<a-entity camera>
  <a-entity geometry="primitive: plane; width: 0.5; height: 0.2"
            position="0 -0.5 -1"
            material="color: black">
  </a-entity>
</a-entity>

Такой объект:

  • всегда остаётся перед пользователем
  • не зависит от положения в сцене
  • подходит для прицелов, меню, индикаторов

События и жизненный цикл

Камера участвует в общем жизненном цикле сущностей A-Frame:

  • init
  • update
  • remove
  • tick

Пример кастомного поведения:

AFRAME.registerComponent('camera-logger', {
  tick: function () {
    const pos = this.el.object3D.position;
    console.log(pos);
  }
});

Применение:

<a-entity camera camera-logger></a-entity>

Взаимодействие с курсором

Компонент cursor часто используется совместно с камерой:

<a-entity camera>
  <a-cursor></a-cursor>
</a-entity>

В таком случае луч исходит из центра экрана. Это стандартный способ реализации gaze-based взаимодействия в VR.

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

Ключевые аспекты:

  • Установка разумного значения far уменьшает нагрузку
  • Слишком маленькое значение near может вызывать артефакты глубины
  • Изменение fov влияет на восприятие скорости движения
  • Ортографическая камера дешевле в вычислениях

Для мобильных VR-устройств рекомендуется:

  • ограничивать дальность прорисовки
  • избегать частого пересоздания камеры
  • обновлять проекцию только при необходимости

Встраивание в HTML-документ

Полный пример сцены с камерой:

<!DOCTYPE html>
<html>
<head>
  <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
</head>
<body>
  <a-scene>
    <a-entity id="rig" position="0 1.6 0">
      <a-entity camera look-controls wasd-controls></a-entity>
    </a-entity>

    <a-box position="0 1 -3" color="#4CC3D9"></a-box>
  </a-scene>
</body>
</html>

Практические сценарии использования

Камера от третьего лица

<a-entity id="player" position="0 0 0">
  <a-entity camera position="0 2 5" look-controls></a-entity>
</a-entity>

Статическая обзорная камера

<a-entity camera position="10 10 10" rotation="-30 45 0"></a-entity>

Кинематографическая анимация

<a-entity camera animation="property: position; to: 0 5 0; dur: 5000"></a-entity>

Внутренний механизм обновления

При каждом кадре:

  1. Обновляется позиция object3D
  2. Пересчитывается матрица вида
  3. При необходимости обновляется проекция
  4. Рендерер Three.js выводит сцену

В VR-режиме матрицы приходят из WebXR и заменяют ручные значения вращения.

Компонент camera является центральным элементом любой сцены в A-Frame. Он объединяет управление положением наблюдателя, параметры проекции, VR-трекинг и взаимодействие с другими компонентами, формируя базовый механизм визуализации трёхмерного пространства в веб-среде.

Оглавление