Three.js中的相机参数

Question

这是相机实例化的方式:

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

这些值意味着什么？

Answer 1

我想知道同样的事情,所以我查了一下,这是一个"视锥"的观点.

我将在这里粘贴我在最近的一个项目中写的代码注释,因为它很好地总结了恕我直言.

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

                                         

Answer 2

第一个参数是FOV意味着视野,想象一个三脚架上的相机,如果你将镜头改为广角,你会获得更高的视野.试着想象一个从相机出来的圆锥体,它只能看到该区域内的物体.

ASPECT意味着宽高比,宽屏电视是16/9,旧屏幕是4/3,通常只是给它屏幕宽度/高度或DIV的暗淡你想要三个.js使用.

Answer 3

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

PerspectiveCamera

• Fov(视野) - 这是从相机位置可以看到的场景的一部分.正如您可能知道的那样,我们人类拥有近180度的视野,而有些鸟类甚至可能拥有完整的360度视野.但是,对于计算机,我们通常使用60到90度之间的视野.

• Aspect - 宽高比是我们渲染输出的区域的水平和垂直大小之间的比率.由于我们通常使用整个窗口,因此我们将使用该比率.宽高比确定水平视野和垂直视野之间的差异,如下页图中所示.普通价值是window.innerWidth / window.innerHeight.

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

• 远 - 此属性定义我们从摄像机位置看到场景的最大距离.如果我们将其设置得太低,我们的场景的一部分可能不会被渲染; 如果我们将其设置得太高,在某些情况下,它可能会影响渲染性能.正常值介于500和2000之间.

OrthographicCamera

• 左(摄像机视锥体左平面) - 你应该看到这是什么是将要渲染的左边界.如果我们将此值设置为-100,您将看不到任何向左更远的对象.

• 右(相机平截头体右平面) - 任何向右的距离都不会被渲染.

• 顶部(摄像机平截头体顶部平面) - 要渲染的最大顶部位置.

• 底部(摄像机平截头体底部平面)要渲染的底部位置.

• 近(相机平面近平面) - 从此点开始,根据相机的位置,将渲染场景.

• 远(摄像机视锥体远平面) - 基于摄像机位置的最远点,将渲染场景.

以下图片应该非常具有说明性:

两种相机模式之间的主要区别在于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是SI单位,因此left,right,top,bottom 不应假设值为像素.
• 相机平截头体的纵横比通常应与画布的纵横比相匹配.
• SCENE_WIDTH, SCENE_HEIGHT,可以通过场景中添加的几何图形来确定.正字形截头体可能比场景大得多,但它不会非常简约.

有用的链接:

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