javascript Three.js 中的相机参数

Camera arguments in Three.js

提问by corazza

This is how a camera is instantiated:

这是相机的实例化方式：

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

What do these values mean?

这些值是什么意思？

采纳答案by Neil

The first param is FOV means field of view, imagine a camera on a tripod, if you change lens to wide angle you get a higher FOV. Try to imagine a cone coming out from the camera, it can only see objects in that area.

第一个参数是 FOV 意味着视野，想象一下三脚架上的相机，如果你把镜头换成广角，你会得到更高的 FOV。试着想象一个圆锥体从相机中出来，它只能看到那个区域的物体。

ASPECT means aspect ratio, a widescreen TV is 16/9 and old ones were 4/3, usually just give it the screen width/height or the dims of a DIV you would like three.js to use.

ASPECT 表示宽高比，宽屏电视是 16/9，旧电视是 4/3，通常只给它屏幕宽度/高度或你希望 Three.js 使用的 DIV 的暗度。

回答by Camilo Martin

I was wondering the same thing so I looked it up, it is a view "frustum".

我想知道同样的事情，所以我查了一下，这是一个“视锥体”视图。

I'll paste here a code comment I wrote in a recent project because it sums it up nicely 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's 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's 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).

                                         

                                         

回答by Matteo

I found this tutorialvery useful for understanding all the camera parameters, and the difference between PerspectiveCameraand OrthographicCamera.

我发现这个教程理解相机的所有参数，以及之间的差别是非常有用的PerspectiveCamera和OrthographicCamera。

PerspectiveCamera

透视相机

• Fov (Field of view) - This is part of scene that can be seen from the position of the camera. As you probably know, we, humans, have almost 180-degree field of view, while some birds might even have a complete 360-degree field of view. However, for computers, we usually use the field of view between 60 and 90 degrees.

• Aspect - The aspect ratio is ratio between the horizontal and vertical size of the area where we render the output. As we usually use the entire window, we will just use that ratio. The aspect ratio determines the difference between the horizontal field of view and the vertical field of view as you can see in the figure on the following page. Ordinary value is window.innerWidth / window.innerHeight.

• Near - This property defines a min distance from the camera the Three.jsrenders the scene. Usually, this is a very small value, e.g. 0.1.

• Far - This property defines a max distance we see the scene from the position of the camera. If we set this as too low, a part of our scene might not be rendered; if we set it as too high, in some cases, it might affect the rendering performance. Normal value is between 500 and 2000.

• Fov（视野）- 这是可以从相机的位置看到的场景的一部分。您可能知道，我们人类几乎拥有 180 度的视野，而有些鸟类甚至可能拥有完整的 360 度视野。但是，对于计算机，我们通常使用 60 到 90 度之间的视野。

• 纵横比 - 纵横比是我们渲染输出区域的水平和垂直尺寸之间的比率。由于我们通常使用整个窗口，因此我们将仅使用该比率。纵横比决定了水平视野和垂直视野之间的差异，如下页的图中所示。普通值为window.innerWidth / window.innerHeight。

• Near - 此属性定义了与Three.js渲染场景的相机的最小距离。通常，这是一个非常小的值，例如 0.1。

• Far - 此属性定义了我们从相机位置看到场景的最大距离。如果我们把它设置得太低，我们的场景的一部分可能不会被渲染；如果我们把它设置得太高，在某些情况下，它可能会影响渲染性能。正常值在 500 到 2000 之间。

OrthographicCamera

正交相机

• Left (Camera frustum left plane) - You should see this as what is the left border of what will be rendered. If we set this value to -100, you won't see any objects that are farther to the left.

• Right (Camera frustum right plane) - Anything farther to the right won't be rendered.

• Top (Camera frustum top plane) - The maximum top position to be rendered.

• Bottom (Camera frustum bottom plane) The bottom position to be rendered.

• Near (Camera frustum near plane) - From this point on, based on the position of the camera, the scene will be rendered.

• Far (Camera frustum far plane) - The furthest point, based on the position of the camera, to which the scene will be rendered.

• 左（相机平截头体左平面）- 您应该将其视为将要渲染的内容的左边界。如果我们将此值设置为 -100，您将看不到左侧更远的任何对象。

• 右（相机平截头体右平面）- 更靠右的任何东西都不会被渲染。

• Top (Camera frustum top plane) - 要渲染的最大顶部位置。

• 底部（相机平截头体底部平面）要渲染的底部位置。

• Near (Camera frustum near plane) - 从这一点开始，基于相机的位置，场景将被渲染。

• Far (Camera frustum far plane) - 基于相机位置的最远点，场景将被渲染到该点。

The following picture should be very illustrative:

下图应该很能说明问题：

The main difference between the two camera modes is that in the OrthographicCameradistance plays no role, so all the elements are of the same size, as you can see in the case of the red and yellow ball.

两种相机模式之间的主要区别在于，在OrthographicCamera远处没有任何作用，因此所有元素的大小都相同，正如您在红色和黄色球的情况下所看到的那样。

Finally here is some code you can use to switch from one camera to the other:

最后，这里有一些代码可用于从一台相机切换到另一台：

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";
  }
};

Notes:

笔记：

• The function camera.lookAt(scene.position)orients the camera to where the scene is located, so it is visible.
• Units in three.jsare SI units, so the values of left,right,top,bottomshould notassumed to be pixels.
• The aspect ratio of the camera's frustum should normally match the canvas' aspect ratio.
• SCENE_WIDTH, SCENE_HEIGHT, can be determined through the geometries that are added in the scene. The orthographic frustum could be much larger than the scene but it wouldn't be very parsimonious.

• 该函数camera.lookAt(scene.position)将相机定向到场景所在的位置，因此它是可见的。
• 中的单位three.js是SI 单位，因此left,right,top,bottom不应假定的值是像素。
• 相机平截头体的纵横比通常应与画布的纵横比相匹配。
• SCENE_WIDTH, SCENE_HEIGHT, 可以通过添加到场景中的几何图形来确定。正交平截头体可能比场景大得多，但不会很简洁。

Useful links:

有用的链接：

• http://www.glprogramming.com/red/chapter03.html
• Three.js - Orthographic camera

• http://www.glprogramming.com/red/chapter03.html
• Three.js - 正交相机

回答by quine9997

fov: Camera frustum vertical field of view.

fov：相机视锥垂直视野。

aspect: Camera frustum aspect ratio.

纵横比：相机视锥纵横比。

near: Camera frustum near plane.

近：平面附近的相机视锥。

far: Camera frustum far plane.

far：相机视锥远平面。

On these pages there some image for the FOV, NEAR plane, anmd FAR plane.

在这些页面上有一些 FOV、NEAR 平面和 FAR 平面的图像。

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

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://upload.wikimedia.org/wikipedia/commons/thumb/0/02/ViewFrustum.svg/440px-ViewFrustum.svg.png

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

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

This is the aspect ratio.

这是纵横比。

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

https://en.wikipedia.org/wiki/Aspect_ratio_(图片)

This is the official docs.

这是官方文档。

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

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