封面图

第173期:threejs中的相机_实例化

threejs中的相机严格意义上讲应该叫摄像机。举个例子,假设我们要拍一部电影,我们不可能用相机对着演员一直咔咔咔的拍照片,我们肯定是用摄像机将演员的语言、动作记录下来,追踪演员的所有表现。

同样的在threejs中,场景中的内容也不是一成不变的,它们都是有一定的变化的,我们也需要用threejs中的摄像机对它们进行追踪。

透视投影摄像机和正交投影摄像机

在threejs中最常见的两种相机就是:透视投影相机和正交投影相机。

透视投影相机

先来看一张图片:

第173期:threejs中的相机_JavaScript_02

这张图片就是透视投影的效果,最直观的描述就是:近大远小。

在threejs中创建透视投影相机非常简单,我们只需要使用THREE.PerspectiveCamera()进行实例化即可。

const camera = new THREE.PerspectiveCamera(50,window.innerWidth/window.innerHeight,1,1000,1)

THREE.PerspectiveCamera()接受以下参数:

  • fov。field of view 表示视场。也就是摄像机可以看到的场景,就好比人的眼睛所能看到的最大范围的角度。
  • aspect。渲染结果的宽高比。因为通常使用窗口作为输出界面,所以推荐的默认值为window.innerWidth/window.innerHeight。
  • near。近面距离。这个属性决定了摄像机从哪里开始渲染。通常会设置的非常小,用来保证摄像机能够看到所有的物体。
  • far 。远面距离。这个属性决定了摄像机能够看多远。
  • zoom。用来对场景进行缩放。

我们可以用下面的图来理解透视投影摄像机的各个参数:

第173期:threejs中的相机_透视投影_03

正交投影摄像机

再看这个图片

第173期:threejs中的相机_前端_04

如果我们仔细观察它所渲染的方块大小都是一样的。为什么会这样呢?这里简单介绍一下透视相机和正交相机的区别:

  • 投影方式。透视摄像机使用透视投影,产生具有透视效果的图像,可以模拟真实世界中物体大小和距离随视角改变的情况;而正交摄像机使用正交投影(平行投影),使所有物体在图像中都以相同的比例显示,无论它们距离摄像机有多远或多近。
  • 视锥体。透视摄像机为视锥体,其顶点位于摄像机位置,其平面包围了所有可见物体;而正交摄像机的视锥体仅为一个长方体,物体只有在其内部才能呈现在屏幕上。
  • 物体大小。由于透视摄像机使用透视投影,物体的尺寸会因为离摄像机距离的不同而发生变化,在视野较宽、离摄像机较远的情况下,物体会显得很小。而正交摄像机使用正交投影,无论物体距离摄像机有多远,其在最终图像中的大小都是一致的。

当然它们在实际的应用中有着不同的使用场景。

在threejs中创建正交投影相机也非常简单,我们只需要使用THREE.OrthographicCamera()进行实例化即可。

const camera = new THREE.OrthographicCamera(10,1000,10,1000)

THREE.OrthographicCamera()接受以下参数:

  • left。左边界。渲染部分的最左边。
  • right。右边界。渲染部分的最右边
  • top。上边界。渲染部分的最上边
  • bottom。下边界。渲染部分的最下边
  • near。近面距离。基于摄像机所处的位置,从这个点开始渲染场景。
  • far。远面距离。基于摄像机所处的位置,超出该距离就不再渲染。
  • zoom。用来对场景进行缩放。

我们可以用下面的图片对着两种相机做个简单的比较来加深理解:

第173期:threejs中的相机_缩放_05

除此之外,threejs中还有立方相机以及立体相机,即:CubeCamera 和 StereoCamero。

我们暂时只需要掌握透视和正交相机即可。