Three.js拨云见雾(1)——选择合适的摄像机| 8月更文挑战

1,672 阅读3分钟

这是我参加更文挑战更文的第1天

Three.js库提供了两种不同的摄像机:正交投影摄像机和透视摄像机。我们先来看一下正投影和透射投影的区别

image.png

对于正投影而言,一条直线放置的角度不同,投影在投影面上面的长短不同;对于透视投影而言,投影的结果除了与几何体的角度有关,还和距离相关, 人的眼睛观察世界就是透视投影,比如你观察一条铁路距离越远你会感到两条轨道之间的宽度越小。无论正投影还是透视投影,three.js都对相关的投影算法进行了封装, 我们只需要根据不同的应用场景自行选择不同的投影方式。

正交投影相机对象 OrthographicCamera

// 构造函数格式
const camera = new THREE.OrthographicCamera(left = - 1, right = 1, top = 1, bottom = - 1, near = 0.1, far = 2000)
camera.position.set(200, 300, 200); //设置相机位置 
camera.lookAt(scene.position); //设置相机方向(指向的场景对象)

OrthographicCamera接收6个参数,分别表示为:

left: 渲染空间的左边界

right: 渲染空间的右边界

top: 渲染空间的上边界

bottom:渲染空间的下边界

near:表示从距离相机多远的位置开始渲染,一般会设置一个很小的值,默认值为0.1.

far:表示从距离相机多远的位置截止渲染,如果设置值偏小,会有部分场景看不到,默认值为1000.

我们看这个图片可以直观的理解这几个属性的具体表示。 image.png

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

透视投影相机PerspectiveCamera

// 构造函数格式
const camera = new THREE.PerspectiveCamera(fov = 50, aspect = 1, near = 0.1, far = 2000);
camera.position.set(200, 300, 200); //设置相机位置
camera.lookAt(scene.position); //设置相机方向(指向的场景对象)

PerspectiveCamera接收4个参数,分别表示为:

fov:表示视场,就是能够看到的角度范围,人的眼睛大约能够看到180度的视场,默认值为45度。不过一般游戏会设置为60-90度.

aspect:表示渲染窗口的长宽比,如果一个网页上只有一个全屏的canvas画布并且画布上只有一个窗口,那么aspect的值就是网页窗口客户区的宽高比,默认值为window.innerWidth/window.innerHeight.

near: 表示的是从距离相机多远的位置开始渲染,一般情况下会设置一个很小的值,默认设置为0.1.

far:表示的是距离相机多远的位置截止渲染,如果设置的值偏小,会有部分场景看不到,默认值为1000.

同样的,我们通过一张图来直观的感受一下这个几个属性的具体含义。

image.png

最后我们提一下相机的位置摆放。对于透视投影而言,相机位置与lookAt指向的观察目标位置间隔距离越小,场景中的三维模型放大倍数越大,准确地说是透视投影相机可以拍摄的范围更小,同时场景Scene中超出的相机参数约束范围的部分会被剪裁掉, 比如更改上面代码camera.position.set(100,200,200);(20,20,20),测试结果你会发现立方体几何体放大显示,超出区域被剪裁。

如果是观察一个产品外观效果,相机就位于几何体的外面,如果是室内漫游预览,就把相机放在房间三维模型的内部。

总结:

Three.js中提供的两种摄像机:透视投影摄像机使用更接近真实世界的视角来渲染场景,而正交投影摄像机提供了一种在游戏中被广泛采用的三维效果。