13 Three.js照相机的正交投影和透视投影

时间:2022-04-25 04:38:33

这一篇文章会的人也不看,不会的人也不需要专业术语,我直接大白话介绍一下webgl里面的照相机。

照相机就相当于在模型世界中,设置一个位置,将前方的内容拍摄下来,然后再给canvas,在窗口里面显示出来在当前位置的图像。

再说的简单一些,就相当于我们拿着手机拍了一张照片,放到了窗口里面显示出来。而动画则是一直拍,一直显示而已。

因为绘制出来的图形是3d的,而我们的显示屏只能显示2d的图片。所以,在成像的时候我们需要设置投影的方式,来获取形成的图像。

正交投影:

形成的图像都是标准的尺寸大小,不会产生偏差。

一般使用在建模,工业上面。

使用:

正交投影照相机(Orthographic Camera)设置起来较为直观,它的构造函数是:

THREE.OrthographicCamera(left, right, top, bottom, near, far)
这六个参数分别代表正交投影照相机拍摄到的空间的六个面的位置,这两个面围成一个长方体,我们称其为视景体(Frustum)。只有在视景体内部(下图中的灰色部分)的物体才可能显示在屏幕上,而视景体外的物体会在显示之前被裁减掉。

13 Three.js照相机的正交投影和透视投影
为了保持照相机的横竖比例,需要保证 (right - left) 与 (top - bottom) 的比例与 Canvas宽度与高度的比例一致。

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

设置相机的拍摄方向:

camera.position.set(x, y, z);
上面是设置相机的位置

camera.lookAt(new THREE.Vector3(0, 0, 0));
上面是设置相机观察的方向,上面是默认原点

不过一定要注意, lookAt 函数接受的是一个 THREE.Vector3 的实例,因此千万别写成camera.lookAt(0, 0, 0) ,否则非但不能得到理想的效果,而且不会报错,使你很难找到问题所在。


透视投影:

更接近人眼的观看效果,有“近大远小”的效果。

应用比较广泛,只要不是正交的应用,基本上使用透视投影就好了。

使用:

透视投影照相机(Perspective Camera)的构造函数是:

THREE.PerspectiveCamera(fov, aspect, near, far)

13 Three.js照相机的正交投影和透视投影

透视图中,灰色的部分是视景体,是可能被渲染的物体所在的区域。 fov 是视景体竖直方向上的张角(是角度制而非弧度制),如侧视图所示。

aspect 等于 width / height ,是照相机水平方向和竖直方向长度的比值,通常设为Canvas 的横纵比例。

near 和 far 分别是照相机到视景体最近、最远的距离,均为正值,且 far 应大于near 。

fov的值越大,里面的图形会显得越小。这是为什么?我们从下面的的侧视图来看,虽然正方体的实际大小并未改变,但是将照相机的竖直张角设置更大是,视景体变大了,因而正方体相对于整个视景体的大小就变小了,看起来正方形就显得变小了。

13 Three.js照相机的正交投影和透视投影

fov不会改变画面的横竖比例,aspect能够改变。


本节参考了three.js入门指南