Разбираемся с камерами

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

Класс Camera

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

ArrayCamera

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

Вы можете себе это представить, как что-то похоже на многопользовательские консольные игры старой школы, где нам приходилось использовать разделенный экран.

StereoCamera

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

CubeCamera

CubeCamera используется для получения рендеринга, обращенного в каждом направлении (вперед, назад, влево, вправо, вверх и вниз) для создания рендеринга окружения. Вы можете использовать его для создания карты окружения или карты теней. P.s. О них мы поговорим позже.

OrthographicCamera

OrthographicCamera используется для рендеров вашей сцены без перспективы. Это полезно, если вы делаете игру в реальном времени, такую ​​как Age of Empire. Элементы будут иметь одинаковый размер на экране независимо от их расстояния от камеры.

PerspectiveCamera

PerspectiveCamera — это та, которую мы уже использовали и смоделировали реальную камеру с перспективой.

Мы собираемся сосредоточиться на OrthographicCamera и PerspectiveCamera.

PerspectiveCamera

Как мы видели ранее, классу PerspectiveCamera для создания объекта требуются некоторые параметры, но мы с вами использовали только два из них, давайте посмотрим на остальные:

const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 1, 100)

Вы должны получить тот же результат, но давайте поговорим об этих параметрах подробнее.

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

Первый параметр - поле зрения отвечает за то, какой у камеры будет угол обзора. Если вы зададите слишком большой угол обзора, то камера будет видеть во всех направлениях, но при этом будет значительное искажение изображения. Если задать маленький угол, то изображение будет выглядеть приближенным.

Что касается выбора правильного fov, вам придется все попробовать. Обычно я использую поле зрения от 45 до 75.

Соотношение сторон

Второй параметр называется соотношением сторон и соответствует ширине, деленной на высоту. Хотя вы можете подумать, что это, очевидно, ширина canvas по высоте canvas и Three.js должен вычислять его сам по себе, это не всегда так, если вы начинаете использовать Three.js очень специфическими способами. Но в нашем случае вы можете просто использовать ширину canvas и высоту canvas.

Я рекомендую сохранить эти значения в объекте, потому что они нам понадобятся несколько раз:

const sizes = {
    width: 600,
    height: 600,
};

Ближняя и дальняя стенки

Третий и четвертый параметры, называемые ближним (near) и дальним (far), соответствуют тому, насколько близко и как далеко может видеть камера.

Любой объект или часть объекта, расположенные ближе к камере, чем ближайшее значение, или дальше от камеры, чем самое дальное значение, не будут отображаться на рендеринге.

OrthographicCamera

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

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

Параметры OrthographicCamera сильно отличаются от параметров PerspectiveCamera.

Вы должны указать, как далеко камера может видеть в каждом направлении (влево, вправо, сверху и снизу). Затем вы можете указать ближние и дальние значения точно так же, как мы это сделали для PerspectiveCamera.

Давайте заменим нашу камеру:

const camera = new THREE.OrthographicCamera(- 1, 1, 1, - 1, 0.1, 100);

А еще добавим немного вращения объекту:

mesh.rotation.x = Math.PI * 0.25;
mesh.rotation.y = Math.PI * 0.25;

Как вы можете видеть, перспективы нет, и стороны нашего куба кажутся параллельными. Проблема в том, что наш куб не выглядит кубическим или его сложно таковым воспринимать. 😭

На этом сегодня все, мы разобрали подробнее какие бывают камеры в three.js, надеюсь вам это было полезно! В следующем уроке мы научимся взаимодействовать с нашими объектами и вновь оживим нашу сцену!

Пользовательские элементы управления ->