Аргументы камеры в файле Three.js

Вот как создается экземпляр камеры:

var camera = new THREE.PerspectiveCamera(
    VIEW_ANGLE,
    ASPECT,
    NEAR,
    FAR
);

Что означают эти значения?

Ответ 1

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

ASPECT означает соотношение сторон, широкоэкранный телевизор - 16/9, а старые - 4/3, как правило, просто дают ему ширину/высоту экрана или тусклость DIV, которые вы хотели бы использовать для использования трио .js.

Ответ 2

Мне было интересно то же самое, поэтому я просмотрел его, это представление "frustum" .

Я вставляю здесь комментарий коментария, который я написал в недавнем проекте, потому что он суммирует его красиво IMHO.

// "What the f*** is a frustum?" you ask. Well I did.
// Think about it as a truncated pyramid. The tip is the camera. From a certain
// point "down" the pyramid (the "near plane"), stuff can be seen on-screen.
// After the "base" of the pyramid (the "far plane"), stuff is too far to be
// seen. Stuff outside the pyramid is off-screen too. There is also the "aspect
// ratio" (the rectangle that makes up the pyramid base, so this value is
// width/height) and the "field of view" (think of it as a lens or something,
// it distorts the pyramid so there more objects on screen - it is set in
// degrees and 45° is more-or-less a "natural" perspective. The bigger the
// number, the more "perspective" there is).

&nbsp

Ответ 3

Я нашел этот учебник очень полезным для понимания всех параметров камеры и различия между PerspectiveCamera и OrthographicCamera.

PerspectiveCamera

Fov (поле зрения) - это часть сцены, которую можно увидеть с позиции камеры. Как вы, наверное, знаете, мы, люди, имеем почти 180-градусное поле зрения, в то время как некоторые птицы могут даже иметь полное 360-градусное поле зрения. Однако для компьютеров мы обычно используем поле зрения от 60 до 90 градусов.
Аспект. Соотношение сторон - это соотношение между горизонтальным и вертикальным размером области, в которой мы отображаем вывод. Поскольку мы обычно используем все окно, мы будем использовать это соотношение. Соотношение сторон определяет разницу между горизонтальным полем зрения и вертикальным полем зрения, как вы можете видеть на рисунке на следующей странице. Обычное значение - window.innerWidth / window.innerHeight.
Рядом - это свойство определяет минимальное расстояние от камеры, которое Three.js отображает сцену. Обычно это очень малая величина, например, 0.1.
Дальний - это свойство определяет максимальное расстояние, на которое мы видим сцену с позиции камеры. Если мы установим это как слишком низкое, часть нашей сцены может не отображаться; если мы установим его слишком высоким, в некоторых случаях это может повлиять на производительность рендеринга. Нормальное значение от 500 до 2000.

OrthographicCamera

Слева (левая плоскость камеры) - вы должны увидеть, что это левая граница того, что будет отображено. Если мы установим это значение на -100, вы не увидите никаких объектов, которые находятся слева.
Справа (правая плоскость камеры) - все, что находится справа, не будет отображено.
Top (верхняя плоскость камеры) - максимальная верхняя позиция для визуализации.
Bottom (нижняя плоскость усеченной камеры) Нижняя позиция для визуализации.
Рядом (усечение камеры рядом с плоскостью) - с этого момента, в зависимости от положения камеры, сцена будет визуализироваться.
Far (дальний план камеры Frustum) - самая дальняя точка, основанная на положении камеры, в которой будет отображаться сцена.

Следующая картинка должна быть очень иллюстративной:

Основное различие между двумя режимами камеры заключается в том, что расстояние OrthographicCamera не играет никакой роли, поэтому все элементы имеют одинаковый размер, как вы можете видеть в случае с красным и желтым шаром.

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

this.switchCamera = function(SCENE_WIDTH, SCENE_HEIGHT) {
  if (camera instanceof THREE.PerspectiveCamera) {
    camera = new THREE.OrthographicCamera( SCENE_WIDTH / - 2, SCENE_WIDTH / 2, SCENE_HEIGHT / 2, SCENE_HEIGHT / - 2, 0.1, 1000 );
    camera.position.x = 0;
    camera.position.y = 0;
    camera.position.z = -1;
    camera.lookAt(scene.position);
    this.perspective = "Orthographic";
  } else {
    camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 1000 );
    camera.position.x = 0;
    camera.position.y = 0;
    camera.position.z = -1;
    camera.lookAt(scene.position);
    this.perspective = "Perspective";
  }
};

Примечание:

Функция camera.lookAt(scene.position) ориентирует камеру на то место, где расположена сцена, поэтому она видна.
Единицы в three.js являются единицами СИ, поэтому значения left,right,top,bottom не должны приниматься за пиксели.
Соотношение сторон камеры может обычно соответствовать соотношению сторон холста.
SCENE_WIDTH, SCENE_HEIGHT, может быть определен через геометрию, которая добавлена в сцену. Орфографический усеченный конус может быть намного больше, чем сцена, но он не будет очень экономным.

Полезные ссылки:

Ответ 4

fov: Вертикальное поле обзора камеры.

аспект: соотношение сторон камеры Frustum.

рядом: усеченная камера рядом с плоскостью.

далеко: камера усеченного в дальней плоскости.

На этих страницах есть изображения для FOV, NEAR плоскости и плоскости FAR.

https://threejsfundamentals.org/threejs/lessons/resources/frustum-3d.svg

https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/ViewFrustum.svg/440px-ViewFrustum.svg.png

https://threejsfundamentals.org/threejs/lessons/threejs-cameras.html https://en.wikipedia.org/wiki/Viewing_frustum

Это соотношение сторон.

https://en.wikipedia.org/wiki/Aspect_ratio_(image)

Это официальные документы.

https://threejs.org/docs/#api/en/cameras/PerspectiveCamera