ThreeJs入门08-相机的工作原理

1,201 阅读4分钟

「这是我参与2022首次更文挑战的第11天,活动详情查看:2022首次更文挑战

yuque_diagram.jpg

这节课介绍一下相机的工作原理,此原理适用于任何一种3D编程方法。为以后在threejs中设置相机铺平道路。

认识相机

在Threejs中相机的表示是THREE.Camera,它是相机的抽象基类,其子类有两种相机,分别是正投影相机THREE.OrthographicCamera和透视投影相机THREE.PerspectiveCamera。类图如下所示: image.png

相机分类:正投影相机、透视投影相机,其他的先不做介绍 image.png

  • CAD图纸设计就是正投影

image.png

正投影相机

image.png

  • 构造函数
THREE.OrthographicCamera( left, right, top, bottom, near, far )
  • 假定一个相机中心点,相机中心点可以想成是镜头的中心点
  • 以下参数的值都是正数,(因为负数就相当于看到的是相机的背面,是没有东西可以看到的)
  • left:左平面距离相机中心点的垂直距离。从图中可以看出,左平面是屏幕里面的那个平面。
  • right:右平面距离相机中心点的垂直距离。从图中可以看出,右平面是屏幕稍微外面一点的那个平面。
  • top:顶平面距离相机中心点的垂直距离。上图中的顶平面,是长方体头朝天的平面。
  • bottom:底平面距离相机中心点的垂直距离。底平面是头朝地的平面。
  • near:近平面距离相机中心点的垂直距离。近平面是左边竖着的那个平面。
  • far:远平面距离相机中心点的垂直距离。远平面是右边竖着的那个平面。

有了这些参数和相机中心点,我们这里将相机的中心点又定义为相机的位置。通过这些参数,我们就能够在三维空间中唯一的确定上图的一个长方体。这个长方体也叫做视景体。 ​

投影变换的目的就是定义一个视景体,使得视景体外多余的部分裁剪掉,最终图像只是视景体内的有关部分。

透视投影相机

image.png

  • 构造函数
THREE.PerspectiveCamera( fov, aspect, near, far )
  • fov:视角,这个最难理解,我的理解是,眼睛睁开的角度,即视角的大小。如果设置为0,相当你闭上眼睛了,所以什么也看不到。如果为180,那么可以认为你的视界很广阔,但是在180度的时候,往往物体很小,因为他在你的整个可视区域中的比例变小了。
  • near:近平面,表示你近处的裁面的距离。补充一下,也可以认为是眼睛距离近处的距离,假设为10米远,请不要设置为负值,Three.js就傻了,不知道怎么算了,
  • far:远平面,表示你远处的裁面
  • aspect:纵横比,表示实际窗口的纵横比,即宽度除以高度。这个值越大,说明你宽度越大。

创建相机,设置相机位置

我们来看一段代码,下面代码唯一的决定了相机的摆放

// 定义一个透视相机
camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
// 设置相机的位置
camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 600;
// 相机的上方向
camera.up.x = 0;
camera.up.y = 1;
camera.up.z = 0;
// 设置相机的视点
camera.lookAt({
    x : 0,
    y : 0,
    z : 0
});
  • position, 相机位置
    • 可以确定相机在场景中摆放的位置

image.png

  • up,相机(上)方向
    • 垂直于快门的一条线就是上方向

image.png 假设我们上图相机的上方向位置是(0,1,0),那个我们把相机旋转180度过来,变成下图,就是(0,-1,0) image.png

  • lookAt,代表的是一个方向,而不是一个点

image.pngimage.png 假设我们给相机垂直插入一根木棍(假的),把相机摆在(0,0,500)的位置,看向(0,0,0)这个位置。当我们移动相机到(0,0,600)的位置,看向的还是(0,0,0)这个位置,lookAt就是这个作用,看向某个点的方向

总结

这一节我们主要讲了以下内容:

  • 相机介绍

  • 正投影相机

  • 透视投影相机

  • 创建相机和设置相机位置