Камеры: Perspective и Orthographic

Камера решает, как 3D-мир проецируется на плоский экран. Разбираем две камеры и их параметры.

PerspectiveCamera имитирует человеческий глаз (дальнее меньше), OrthographicCamera рисует без перспективы — для изометрии, чертежей и 2D-подобных сцен.

Perspective — как глаз

Это камера по умолчанию для большинства сцен. Дальние объекты кажутся меньше, параллельные линии сходятся — всё как в реальности. У неё четыре параметра.

const camera = new THREE.PerspectiveCamera(
  75,                                  // fov — угол обзора по вертикали (градусы)
  window.innerWidth / window.innerHeight, // aspect — соотношение сторон
  0.1,                                 // near — ближняя плоскость
  1000                                 // far — дальняя плоскость
);

fov: широкий или узкий объектив

Маленький fov (например, 30) — как телеобъектив: узкий охват, мало искажений. Большой fov (90+) — как «рыбий глаз»: видно много, но края искажаются. 75 — удобная середина.

near/far: не делайте диапазон огромным

Объекты ближе near и дальше far не рисуются. Соблазн поставить near = 0.0001 и far = 1000000 «на всякий случай» вреден: точности буфера глубины не хватит, и появится мерцание граней (z-fighting). Держите диапазон разумным под масштаб сцены.

Посчитаем aspect для пары популярных разрешений — простая арифметика, запустим.

function aspect(w, h) {
  return +(w / h).toFixed(3);
}

console.log('1920x1080 ->', aspect(1920, 1080));
console.log('1280x720 ->', aspect(1280, 720));
console.log('800x600 ->', aspect(800, 600));

Вывод:

1920x1080 -> 1.778
1280x720 -> 1.778
800x600 -> 1.333

Видно, что 1920×1080 и 1280×720 имеют одинаковый aspect 1.778 (это 16:9), а 800×600 — другой (4:3). Если задать камере неверный aspect, картинка растянется или сожмётся.

Orthographic — без перспективы

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

const camera = new THREE.OrthographicCamera(
  left, right, top, bottom, near, far
);

Итог

• Perspective — реализм (fov, aspect, near, far); Orthographic — без искажений, для изометрии/чертежей.
• fov задаёт ширину обзора; aspect должен совпадать с пропорциями канваса.
• near/far держите умеренными, иначе z-fighting.