javascript - Three.js 中的相机参数

Question

这是相机的实例化方式：

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

这些值是什么意思？

score 36 · Accepted Answer

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

我将在此处粘贴我在最近的一个项目中编写的代码注释，因为它很好地总结了恕我直言。

// "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).

score 18 · Accepted Answer

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

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

score 17 · Accepted Answer

我发现本教程 PerspectiveCamera对于理解所有相机参数以及和之间的区别非常有用OrthographicCamera。

透视相机

Fov（视野）- 这是可以从相机位置看到的场景的一部分。您可能知道，我们人类几乎拥有 180 度的视野，而有些鸟类甚至可能拥有完整的 360 度视野。但是，对于计算机，我们通常使用 60 到 90 度之间的视场。
Aspect - 纵横比是我们渲染输出区域的水平和垂直大小之间的比率。由于我们通常使用整个窗口，我们将只使用该比率。纵横比决定了水平视野和垂直视野之间的差异，如下页的图中所示。普通值为window.innerWidth / window.innerHeight。
Three.jsNear - 此属性定义了与渲染场景的相机的最小距离。通常，这是一个非常小的值，例如 0.1。
Far - 此属性定义了我们从相机位置看到场景的最大距离。如果我们将它设置得太低，我们的场景的一部分可能不会被渲染；如果我们将它设置得太高，在某些情况下，它可能会影响渲染性能。正常值在 500 到 2000 之间。

正交相机

左（相机截头体左平面） - 您应该将其视为将被渲染的左边界。如果我们将此值设置为 -100，您将看不到任何更靠左的对象。
右（相机平截头体右平面）- 任何更靠右的东西都不会被渲染。
Top (Camera frustum top plane) - 要渲染的最大顶部位置。
底部（Camera frustum bottom plane）要渲染的底部位置。
Near (Camera frustum near plane) - 从这一点开始，根据相机的位置，将渲染场景。
Far (Camera frustum far plane) - 基于摄像机位置的最远点，场景将被渲染到该点。

下图应该很能说明问题：

两种相机模式之间的主要区别在于，在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";
  }
};

笔记：