Управление активной камерой сцены

Babylon.js предлагает мощные возможности для работы с камерами, которые являются неотъемлемой частью любой 3D-сцены. Камера определяет, с какой точки зрения пользователю отображается мир, и как именно он взаимодействует с этим миром. В Babylon.js можно создать несколько типов камер, но все они имеют схожие принципы управления.

Типы камер

В Babylon.js поддерживается несколько видов камер, каждый из которых предоставляет определённые возможности:

  • ArcRotateCamera: Камера, которая вращается вокруг точки интереса с возможностью изменения расстояния и угла обзора. Это наиболее часто используемый тип камеры для 3D-визуализаций.
  • FreeCamera: Свободная камера, позволяющая пользователю перемещаться по сцене в любом направлении с клавишами или мышью.
  • UniversalCamera: Камера, которая сочетает в себе возможности свободного перемещения и работы с клавишами WASD, подобно играм.
  • DeviceOrientationCamera: Камера, управляемая ориентацией устройства, что полезно для мобильных приложений.

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

Управление активной камерой

Для начала работы с камерой необходимо создать объект камеры и добавить его в сцену. Однако камера, которая будет использована для отображения сцены, должна быть активной. В Babylon.js управление активной камерой осуществляется через свойство scene.activeCamera.

Установка активной камеры

После создания камеры можно задать её активность с помощью следующего кода:

const camera = new BABYLON.ArcRotateCamera("arcCam", Math.PI / 2, Math.PI / 2, 10, BABYLON.Vector3.Zero(), scene);
scene.activeCamera = camera;

В этом примере создаётся камера ArcRotateCamera, которая вращается вокруг точки с координатами (0, 0, 0). После этого камера устанавливается как активная для сцены. Теперь она будет отображать мир с точки зрения этой камеры.

Смена активной камеры

Для изменения активной камеры достаточно указать другую камеру для сцены:

scene.activeCamera = anotherCamera;

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

Управление камерой с помощью пользовательского ввода

Babylon.js предоставляет широкие возможности для взаимодействия с камерой с помощью ввода с клавиатуры и мыши. Большинство типов камер уже имеют встроенные обработчики ввода, такие как панорамирование, зум, и вращение. Однако их можно настроить или отключить по мере необходимости.

Включение и отключение ввода

Для включения или отключения ввода с мыши, клавиатуры или сенсорных экранов используется свойство camera.inputs:

camera.inputs.attached.mouse = false; // Отключить ввод с мыши
camera.inputs.attached.keyboard = true; // Включить ввод с клавиатуры

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

camera.inputs.clear(); // Очистить все привязки ввода
camera.inputs.add(new MyCustomInput()); // Добавить свой собственный ввод
Обработка событий ввода

Для настройки управления камерой с клавиатуры или мыши можно использовать такие события, как onKeyboardObservable и onPointerObservable:

scene.onKeyboardObservable.add((keyboardInfo) => {
    if (keyboardInfo.event.key === "ArrowUp") {
        camera.position.z += 1; // Двигать камеру по оси Z
    }
});

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

Управление положением и ориентацией камеры

Одной из важнейших задач при работе с камерой является управление её положением и ориентацией.

Положение камеры

Положение камеры можно изменять напрямую, устанавливая её координаты:

camera.position = new BABYLON.Vector3(0, 5, -10); // Поставить камеру на координаты (0, 5, -10)

Однако чаще используется изменение положения через методы, такие как camera.setPosition():

camera.setPosition(new BABYLON.Vector3(0, 10, -20));
Ориентация камеры

Для задания направления, в котором камера будет смотреть, используется метод camera.setTarget():

camera.setTarget(BABYLON.Vector3.Zero()); // Камера будет смотреть в точку (0, 0, 0)

Для более точного контроля можно задать ориентацию камеры с помощью матрицы преобразования или кватернионов:

camera.rotation = new BABYLON.Vector3(Math.PI / 4, 0, 0); // Поворот камеры на 45 градусов по оси X
Работа с кватернионами

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

const quaternion = BABYLON.Quaternion.FromEulerAngles(Math.PI / 4, 0, 0);
camera.rotationQuaternion = quaternion;

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

Плавные анимации камеры

Для плавного изменения позиции или ориентации камеры можно использовать анимации. Babylon.js позволяет анимировать практически все параметры камеры, включая её позицию, вращение и поля зрения.

Для создания анимации используется объект BABYLON.Animation:

const cameraAnimation = new BABYLON.Animation("cameraMove", "position.x", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
cameraAnimation.setKeys([
    { frame: 0, value: camera.position.x },
    { frame: 100, value: 10 },
    { frame: 200, value: camera.position.x }
]);

scene.beginDirectAnimation(camera, [cameraAnimation], 0, 200, true);

В данном примере анимация меняет позицию камеры по оси X, создавая плавный переход от текущего положения к новому.

Работа с полем зрения (FOV)

Поле зрения камеры — это угол, определяющий, какую часть сцены камера видит. Он задаётся в градусах и зависит от расстояния до объектов, которые камера отображает.

Для изменения поля зрения камеры можно использовать свойство camera.fov:

camera.fov = Math.PI / 4; // Установить поле зрения 45 градусов

Поле зрения можно анимировать для создания эффекта зума, например, в ответ на действия пользователя:

camera.fov = Math.PI / 6; // Уменьшить поле зрения

Использование камер с несколькими видами

Babylon.js позволяет использовать несколько камер в одном проекте и переключаться между ними. Это может быть полезно в различных ситуациях, например, для создания мультимедийных приложений с несколькими видами сцены.

const camera1 = new BABYLON.ArcRotateCamera("camera1", Math.PI / 2, Math.PI / 2, 10, BABYLON.Vector3.Zero(), scene);
const camera2 = new BABYLON.FreeCamera("camera2", new BABYLON.Vector3(0, 5, -10), scene);

scene.activeCamera = camera1; // Установить камеру 1 как активную

// Переключение между камерами
scene.activeCamera = camera2;

Можно даже анимировать переходы между камерами для более динамичных визуальных эффектов.

Заключение

Камера является важнейшим элементом любой 3D-сцены. Babylon.js предоставляет мощные инструменты для управления её положением, ориентацией и взаимодействием с пользователем. Все эти возможности позволяют создавать динамичные и интерактивные 3D-приложения с максимально возможной гибкостью и точностью.

Оглавление