Параметр active: несколько камер в сцене

В библиотеке A-Frame камера является сущностью (<a-entity>), к которой добавлен компонент camera. По умолчанию при создании сцены автоматически добавляется одна активная камера. Однако архитектура движка позволяет размещать в сцене несколько камер одновременно и динамически переключаться между ними с помощью параметра active.

Компонент camera определяет, какая именно камера используется системой рендеринга в текущий момент. Управление осуществляется через булевый параметр:

<a-entity camera="active: true"></a-entity>

Если в сцене присутствует несколько камер, активной может быть только одна.

Параметр active: принцип работы

Параметр active принимает логическое значение:

  • true — камера используется для рендеринга;
  • false — камера существует в сцене, но не участвует в выводе изображения.

При установке active: true для одной камеры, остальные автоматически становятся неактивными. Это реализовано внутри системы камеры движка и предотвращает конфликт нескольких источников рендеринга.

Пример сцены с двумя камерами:

<a-scene>
  <a-entity id="cameraOne"
            camera="active: true"
            position="0 1.6 0">
  </a-entity>

  <a-entity id="cameraTwo"
            camera="active: false"
            position="5 3 5">
  </a-entity>
</a-scene>

В данном примере рендеринг осуществляется с позиции cameraOne.

Типичные сценарии использования нескольких камер

1. Режим наблюдателя и режим игрока

В интерактивных сценах часто используется:

  • игровая камера — прикреплена к персонажу;
  • свободная камера — для отладки или обзора сцены.

Переключение позволяет менять точку зрения без перезагрузки сцены.

2. Кинематографические сцены

Для анимаций и кат-сцен создаются несколько камер с разными позициями и углами обзора. Переключение между ними позволяет создавать монтаж внутри WebVR/WebXR-сцены.

3. Режимы просмотра (VR и не-VR)

В проектах с поддержкой виртуальной реальности можно иметь:

  • камеру с контроллерами движения (look-controls, wasd-controls);
  • статическую камеру для обычного 2D-просмотра.

Динамическое переключение камер через JavaScript

Переключение камер выполняется через изменение атрибута camera. В A-Frame изменение компонента возможно во время выполнения.

Пример:

const cam1 = document.querySelector('#cameraOne');
const cam2 = document.querySelector('#cameraTwo');

function switchCamera() {
  cam1.setAttribute('camera', 'active', false);
  cam2.setAttribute('camera', 'active', true);
}

В результате после вызова функции рендеринг начнётся со второй камеры.

Автоматическое отключение предыдущей камеры

При активации новой камеры движок выполняет:

  1. Деактивацию текущей активной камеры.
  2. Назначение новой активной камеры.
  3. Обновление ссылки на объект THREE.Camera внутри сцены.

Под капотом используется интеграция с Three.js, поскольку A-Frame построен поверх него. Это означает, что активная камера в A-Frame соответствует активному объекту THREE.Camera в сцене Three.js.

Взаимодействие с компонентами управления

Компоненты управления (look-controls, wasd-controls) работают только с активной камерой. Если камера становится неактивной:

  • управление перестаёт влиять на отображаемую сцену;
  • события трекинга головы (в VR) не применяются к ней.

Пример:

<a-entity id="playerCamera"
          camera="active: true"
          look-controls
          wasd-controls>
</a-entity>

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

Организация иерархии камер

Камеры могут быть вложены в другие сущности:

<a-entity id="rig" position="0 0 0">
  <a-entity id="vrCamera"
            camera="active: true"
            position="0 1.6 0">
  </a-entity>
</a-entity>

Такой подход используется в VR-проектах для разделения:

  • движения персонажа (родительская сущность);
  • движения головы (сама камера).

Параметр active при этом применяется только к сущности с компонентом camera.

Камера по умолчанию

Если в сцене явно не указана ни одна камера, A-Frame создаёт её автоматически. Она имеет:

  • camera
  • look-controls
  • wasd-controls
  • стандартную высоту 1.6

При добавлении собственной камеры рекомендуется отключать автоматическую:

<a-scene>
  <a-entity camera="active: true"></a-entity>
</a-scene>

Если в сцене появятся две камеры с active: true, активной станет последняя инициализированная.

Анимация переключения камер

Параметр active может изменяться в результате событий:

<a-entity id="camA"
          camera="active: true"
          position="0 2 5">
</a-entity>

<a-entity id="camB"
          camera="active: false"
          position="10 5 10">
</a-entity>

<a-box position="0 1 -3"
       color="red"
       oncl ick="switchCamera()">
</a-box>

Переключение можно связывать с:

  • кликом по объекту;
  • окончанием анимации;
  • таймером;
  • пользовательским событием.

Проверка текущей активной камеры

Получение ссылки на активную камеру возможно через объект сцены:

const sceneEl = document.querySelector('a-scene');
const activeCamera = sceneEl.camera;

sceneEl.camera возвращает текущий экземпляр THREE.Camera, используемый системой рендеринга.

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

Наличие нескольких камер не создаёт значительной нагрузки, если активна только одна. Однако важно учитывать:

  • лишние компоненты управления на неактивных камерах;
  • анимации, продолжающие работать в фоне;
  • возможные слушатели событий.

Рекомендуется:

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

Расширенные возможности

Через прямой доступ к объекту Three.js можно управлять параметрами перспективы:

const cam = document.querySelector('#cameraOne');
const threeCam = cam.getObject3D('camera');

threeCam.fov = 90;
threeCam.updateProjectionMatrix();

Это позволяет изменять угол обзора при переключении между камерами, создавая эффект масштабирования или драматического ракурса.

Логика переключения в пользовательских компонентах

В сложных проектах переключение реализуется через собственный компонент:

AFRAME.registerComponent('camera-switcher', {
  init: function () {
    this.cameras = document.querySelectorAll('[camera]');
    this.current = 0;
  },

  switch: function () {
    this.cameras[this.current]
        .setAttribute('camera', 'active', false);

    this.current = (this.current + 1) % this.cameras.length;

    this.cameras[this.current]
        .setAttribute('camera', 'active', true);
  }
});

Такой подход:

  • упрощает управление;
  • изолирует логику;
  • позволяет масштабировать проект.

Параметр active является центральным механизмом выбора точки зрения в сцене. Правильное управление несколькими камерами открывает возможности для создания игровых режимов, кинематографических эффектов, инструментов отладки и сложных интерактивных сценариев в среде A-Frame.

Оглавление