Camera: типы и их назначение

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

PerspectiveCamera

PerspectiveCamera создаёт перспективную проекцию, имитируя работу человеческого глаза: объекты, находящиеся дальше, кажутся меньше, а ближние — крупнее. Этот тип камеры используется для большинства 3D-сцен, где важна реалистичная перспектива.

Конструктор и параметры

const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  • fov — угол обзора по вертикали в градусах. Чаще всего используется значение 50–75.
  • aspect — соотношение ширины к высоте экрана (window.innerWidth / window.innerHeight).
  • near — ближняя плоскость отсечения. Всё, что ближе этого расстояния, не будет видно.
  • far — дальняя плоскость отсечения. Всё, что дальше этого расстояния, также не будет отображаться.

Применение

  • Визуализация 3D-игр и интерактивных сцен.
  • Архитектурные и инженерные модели.
  • Сценарии с реалистичной глубиной и перспективой.

Основные свойства и методы

  • position — положение камеры в пространстве.
  • lookAt(vector3) — направляет камеру на указанную точку.
  • updateProjectionMatrix() — пересчитывает матрицу проекции при изменении параметров.

OrthographicCamera

OrthographicCamera создаёт ортографическую проекцию, где размеры объектов не изменяются с расстоянием. Такой тип камеры полезен для 2D-подобных визуализаций и технических чертежей.

Конструктор и параметры

const camera = new THREE.OrthographicCamera(left, right, top, bottom, near, far);
  • left, right, top, bottom — границы видимой области сцены.
  • near, far — ближняя и дальняя плоскости отсечения.

Применение

  • 2D-игры и интерфейсы.
  • CAD-моделирование и схемы.
  • Миникарты и изометрические игры.

Особенности

  • Отсутствует перспективное сжатие объектов.
  • Прямые линии остаются прямыми независимо от расстояния.
  • Требует точной настройки границ видимой области при изменении размеров окна.

CubeCamera

CubeCamera используется для создания кубических карт (cube maps) и отражений. Камера снимает сцену в шесть направлений (по осям X, Y и Z), формируя текстуру, которую можно использовать для реалистичных отражающих поверхностей.

Конструктор

const cubeCamera = new THREE.CubeCamera(near, far, resolution);
  • near, far — плоскости отсечения.
  • resolution — разрешение каждой стороны кубической текстуры.

Применение

  • Отражающие и зеркальные поверхности.
  • Динамическое окружение для PBR-материалов.
  • Эффекты неба и глобального освещения.

StereoCamera

StereoCamera предназначена для создания стереоскопического эффекта, где две камеры имитируют глазное восприятие. Используется для VR-приложений и 3D-эффектов.

Основные параметры

  • eyeSep — расстояние между “глазами”.
  • Генерирует левый и правый рендер для дальнейшей компоновки в стереопары.

Применение

  • Виртуальная реальность (VR).
  • 3D-кино и анимация.
  • Иммерсивные приложения с глубиной сцены.

Камеры с управлением

Хотя камеры могут быть статичными, их часто соединяют с контроллерами, обеспечивающими интерактивное перемещение:

  • OrbitControls — вращение и приближение вокруг объекта.
  • FirstPersonControls — управление камерой как в шутерах от первого лица.
  • TrackballControls — свободное вращение и панорамирование сцены.

Эти контроллеры работают с любым типом камеры, но чаще всего применяются с PerspectiveCamera.

Основные рекомендации по выбору камеры

  1. PerspectiveCamera — универсальный выбор для реалистичных 3D-сцен.
  2. OrthographicCamera — подходит для 2D-интерфейсов, схем и изометрии.
  3. CubeCamera — для динамических отражений и окружения.
  4. StereoCamera — для VR и стереоскопических эффектов.

Практическая организация камеры в сцене

  • Камера должна быть добавлена в сцену или управляться отдельно через рендерер.
  • Важно следить за aspect ratio, особенно при изменении размеров окна:
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
  • Использование lookAt() позволяет быстро направлять камеру на объект интереса:
camera.position.set(10, 10, 10);
camera.lookAt(new THREE.Vector3(0, 0, 0));

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

Камера напрямую влияет на рендеринг сцены:

renderer.render(scene, camera);

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

Хотя Three.js предоставляет множество дополнительных вспомогательных камер и эффектов, понимание основных типов камер и их назначения является ключевым для любой 3D-разработки.

Оглавление