云图三维 | Three.js 相机介绍

图片来源： unsplash.com/photos/dozk…

云图三维 连接你·创造的世界 致力于打造国内第一家集查看、建模、装配和渲染于一体的“云端CAD”协作设计平台。

Three.js中相机有很多种，但是最长用到的有以下两种：

正交相机（OrthographicCamera）

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

构造函数：

/**
 * 正投影相机设置
 */
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); //设置相机方向(指向的场景对象)
复制代码

// 构造函数格式
OrthographicCamera( left, right, top, bottom, near, far )
复制代码

如下图所示：

透视相机（PerspectiveCamera）

透视相机（PerspectiveCamera）的结果除了与几何体的角度有关，还和距离相关， 人的眼睛观察世界就是透视投影，比如你观察一条铁路距离越远你会感到两条轨道之间的宽度越小。无论正投影还是透视投影，three.js都对相关的投影算法进行了封装， 大家只需要根据不同的应用场景自行选择不同的投影方式。使用OrthographicCamera相机对象的时候，three.js会按照正投影算法自动计算几何体的投影结果； 使用PerspectiveCamera相机对象的时候，three.js会按照透视投影算法自动计算几何体的投影结果。

构造函数：

/**
 * 透视投影相机设置
 */
var width = window.innerWidth; //窗口宽度
var height = window.innerHeight; //窗口高度
/**透视投影相机对象*/
var camera = new THREE.PerspectiveCamera(60, width / height, 1, 1000);
camera.position.set(200, 300, 200); //设置相机位置
camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
复制代码

// 构造函数格式
PerspectiveCamera( fov, aspect, near, far )
复制代码

如下图所示：

写在最后

本文介绍了Three.js的相机相关的内容，正交相机（OrthographicCamera）、透视相机（PerspectiveCamera）希望对你有帮助。

本文发布自 云图三维大前端团队，文章未经授权禁止任何形式的转载。