three.js照相机-正交投影照相机

发表于 | 分类于

three.js 中照相机是一个必不可少的元素，想象一个场景，照相机就像一个人的眼睛，屏幕中呈现的场景就是照相机看到的场景。接下来细细说下three.js中照相机怎么来使用。

照相机的作用

Three.js创建的场景是三维的，而显示屏是二维的，三维需要投影到二维平面上。照相机定义了三维空间到二维屏幕的投影方式，根据投影方式的不用，照相机又分为正交投影照相机与透视投影照相机。

正交投影照相机

构造函数解释

1
THREE.OrthographicCamera(left, right, top, bottom, near, far)

这六个参数分别代表相机拍摄空间的六个面距离相机的位置，这六个面围成一个长方体，我们称其为视景体（Frustum）。只有在视景体内部（下图中的灰色部分）的物体才可能显示在屏幕上，而视景体外的物体会在显示之前被裁减掉。

为了保持照相机的横竖比例，需要保证(right - left)与(top - bottom)的比例与Canvas宽度与高度的比例一致。

near与far都是指到照相机位置在深度平面的位置，而照相机不应该拍摄到其后方的物体，因此这两个值应该均为正值。为了保证场景中的物体不会因为太近或太远而被照相机忽略，一般near的值设置得较小，far的值设置得较大，具体值视场景中物体的位置等决定。

实例说明

下面，我们通过一个例子来说明正交投影照相机的设置。

基本设置

初始化渲染器：

1
2
3
var renderer = new THREE.WebGLRenderer();
renderer.setSize(800,600); //设置绑定Canvas的宽800，高600
renderer.setCleanColor(0x00000); //设置背景色

设置照相机：

1
2
var camera = new THREE.OrthographicCamera(-2, 2, 1.5, -1.5, 1, 10);
camera.position.set(0, 0, 5); //照相机沿z轴负方向观察

在原点处创建一个边长为1的正方体，这里使用wireframe便于看到正方体的边：

1
2
3
4
5
6
7
let geometry = new THREE.CubeGeometry(1,1,1);
let material = new THREE.MeshBasicMaterial({ 
	color: 0xFF0000,
	wireframe: true
});
cube = new THREE.Mesh(geometry, material);
scene.add(cube);

得到效果：

此时相机正看向z轴负方向，而正方体中心处于原点（上下左右面据中心0.5），后面的边与前面重合。这就是正交投影与透视投影区别，不会因投影改变比例。

调整照相机位置

接下来我们通过改变照相机的位置来查看渲染结果，观察位置对渲染的影响。

在之前的例子中，我们将照相机设置在(0, 0, 5)位置，而由于照相机默认是面向z轴负方向放置的，所以能看到在原点处的正方体。现在，如果我们将照相机向下移动1个单位：

1
2
var camera = new THREE.OrthographicCamera(-2, 2, 1.5, -1.5, 1, 10);
camera.position.set(0, -1, 5);

得到效果如下：

物体看上去向上移动了1个单位，且刚好与视景体的top面重合。就好比人往低处站了，物体看起来就相对往上移动了。

那么，正交投影照相机在设置时，是否需要保证top和bottom是相反数呢？如果不是，那么会产生什么效果呢？下面，我们将原本的参数(-2, 2, 1.5, -1.5, 1, 10)改为(-2, 2, 0.5, -2.5, 1, 10)，即，将视景体设置得更靠下：

1
2
var camera = new THREE.OrthographicCamera(-1, 3, 0.5, -2.5, 1, 10);
camera.position.set(0, 0, 5);

得到效果：

这与之前向下移动照相机得到的效果是等价的。

调整照相机角度

现在，我们想尝试一下仰望这个正方体。我们已经学会设置照相机的位置，不妨将其设置在(4, -3, 5)处：

1
camera.position.set(4, -3, 5);

现在照相机沿z轴负方向观察的，因此观察不到正方体，只看到一片黑。我们可以通过lookAt函数指定它看着原点方向：

1
camera.lookAt(new THREE.Vector3(0, 0, 0));

仰望正方体效果：