PerspectiveCamera: поле зрения, соотношение сторон, near и far

В Three.js класс PerspectiveCamera предназначен для создания перспективной камеры, имитирующей человеческое восприятие пространства. Она строит сцену так, что объекты уменьшаются в размерах с увеличением расстояния до камеры, создавая ощущение глубины.

Конструктор камеры имеет следующую сигнатуру:

const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  • fov (Field of View) — угол обзора камеры в градусах по вертикали.
  • aspect — соотношение ширины к высоте рендеринга (width / height).
  • near — минимальная дистанция до камеры, объекты ближе которой не будут отображаться.
  • far — максимальная дистанция, до которой объекты остаются видимыми.

Поле зрения (fov)

Поле зрения определяет, сколько пространства камера охватывает по вертикали.

  • Малые значения (например, 30°) создают эффект телескопического увеличения, объекты выглядят ближе, а сцена «сжата».
  • Большие значения (например, 90°) создают эффект широкоугольного обзора, увеличивая ощущение пространства, но вызывая заметные искажения по краям.

В Three.js fov применяется только к вертикальному измерению, горизонтальный угол вычисляется автоматически через соотношение сторон aspect.

Соотношение сторон (aspect)

Соотношение сторон определяет пропорции изображения, чтобы оно не выглядело растянутым или сжатым.

const aspect = window.innerWidth / window.innerHeight;

При изменении размера окна важно обновлять aspect и вызывать метод updateProjectionMatrix():

camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();

Это позволяет сохранять корректную перспективу при ресайзе.

Near и Far: зоны видимости

near и far задают диапазон видимых объектов относительно камеры.

  • near — ближайшая граница, объекты ближе которой обрезаются.
  • far — дальняя граница, объекты дальше которой становятся невидимыми.

Правильная установка этих значений критична для точности глубины и корректного рендеринга теней.

Рекомендации:

  • near не должно быть равно нулю (например, 0.1), иначе возникают артефакты глубины.
  • far должно быть как можно меньше, но больше самой дальней точки сцены.
  • Диапазон far / near влияет на точность буфера глубины, особенно для теней и эффектов постобработки.

Обновление проекции и динамические изменения

После изменения любого из параметров камеры (fov, aspect, near, far) необходимо вызвать:

camera.updateProjectionMatrix();

Без этого изменения не вступят в силу, и сцена будет рендериться с предыдущими настройками.

Примеры применения

Классическая камера для сцены:

const camera = new THREE.PerspectiveCamera(
    75,                                // fov
    window.innerWidth / window.innerHeight, // aspect
    0.1,                               // near
    1000                               // far
);

camera.position.set(0, 2, 5);          // установка позиции
camera.lookAt(0, 0, 0);               // направление взгляда

Динамическое изменение при ресайзе:

window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
});

Влияние параметров на визуализацию

  1. fov влияет на перспективные искажения и ощущение масштаба.
  2. aspect обеспечивает правильные пропорции на любых устройствах.
  3. near и far управляют глубиной сцены и точностью буфера глубины.

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

Полезные методы

  • camera.position.set(x, y, z) — установка позиции камеры.
  • camera.lookAt(x, y, z) — направление взгляда на точку.
  • camera.updateProjectionMatrix() — пересчет матрицы проекции после изменения параметров.

Эти методы в сочетании с корректно подобранными fov, aspect, near и far обеспечивают реалистичную и управляемую перспективу сцены.

Оглавление