什么是照相机

我们使用 Three.js 创建的场景是三维的，而通常情况下显示屏是二维的，那么三维的场景如何显示到二维的显示屏上呢？照相机就是这样一个抽象，它定义了三维空间到二维屏幕的投影方式，用“照相机”这样一个类比，可以使我们直观地理解这一投影方式。

而针对投影方式的不同，照相机又分为正投影照相机与透视投影照相机。

正投影和透视投影

生活中的物体都是三维的，但是人的眼睛只能看到正面，不能看到被遮挡的背面，三维几何体在人眼睛中的效果就像一张相机拍摄的二维照片，你看到的是一个2D的投影图。空间几何体转化为一个二维图的过程就是投影，不同的投影方式意味着投影尺寸不同的算法。

对于正投影而言，一条直线放置的角度不同，投影在投影面上面的长短不同；对于透视投影而言，投影的结果除了与几何体的角度有关，还和距离相关，人的眼睛观察世界就是透视投影，比如你观察一条铁路距离越远你会感到两条轨道之间的宽度越小。

无论正投影还是透视投影，three.js 都对相关的投影算法进行了封装，大家只需要根据不同的应用场景自行选择不同的投影方式。使用OrthographicCamera相机对象的时候，three.js 会按照正投影算法自动计算几何体的投影结果；使用PerspectiveCamera相机对象的时候，three.js 会按照透视投影算法自动计算几何体的投影结果。

正投影相机对象OrthographicCamera

/**
 * 正投影相机设置
 */
var width = window.innerWidth; //窗口宽度
var height = window.innerHeight; //窗口高度
var k = width / height; //窗口宽高比
var s = 150; //三维场景显示范围控制系数，系数越大，显示的范围越大
//创建相机对象
var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
camera.position.set(200, 300, 200); //设置相机位置
camera.lookAt(scene.position); //设置相机方向(指向的场景对象)

1 2	// 构造函数格式 OrthographicCamera( left, right, top, bottom, near, far )

参数(属性)	含义
left	渲染空间的左边界
right	渲染空间的右边界
top	渲染空间的上边界
bottom	渲染空间的下边界
near	near属性表示的是从距离相机多远的位置开始渲染，一般情况会设置一个很小的值。默认值0.1
far	far属性表示的是距离相机多远的位置截止渲染，如果设置的值偏小小，会有部分场景看不到。默认值1000

注意

左右边界的距离与上下边界的距离比值与画布的渲染窗口的宽高比例要一致，否则三维模型的显示效果会被单方向不等比例拉伸

构造函数OrthographicCamera的参数( left,right,top,bottom,near,far)本质上是对 WebGL 投影矩阵的封装，宽度width、高度height越大，三维模型顶点的位置坐标就会越大，超出可视区域的网格模型就会被剪裁掉，不会再显示在屏幕上，大家还可以看到left与right、top与bottom互为相反数，这样做的目的是lookAt指向的对象能够显示在canvas画布的中间位置。

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

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

打赏