three.js 相机的详细介绍（04）

前言：相机的工作原理

一、认识相机

在Three.js中相机的表示是THREE.Camera,它是相机的抽象类，它的子类有两种相机，分别是正投影相机和透视投影相机。

1.1 正投影相机

正投影相机也叫正交投影相机

• 特点：远近高低比例都相同
• 相机的位置：将相机的中心点定义为相机的位置。
• 构造函数：OrthographicCamera（left,right,top,bottom,near,far）
  1. left：左平面距离相机中心点的垂直距离。
  2. right：右平面距离相机中心点的垂直距离。
  3. top：顶平面距离相机中心点的垂直距离。
  4. bottom：底平面距离相机中心点的垂直距离。
  5. near：近平面距离相机中心点的垂直距离。
  6. far：远平面距离相机中心点的垂直距离。
• 有了这些参数和相机的中心点，就能在三维空间中唯一确定下图的长方体。这个长方体也叫做视景体。
• 投影变换的目的：就是定义一个视景体，使得视景体外多余的部分裁剪掉，最终图像只是视景体内的有关部分。

var camera = new THREE.OrthographicCamera(width/-2,width/2,height/2,height/-2,1,1000);
//将浏览器窗口的高度和宽度作为了视景体的高度和宽度，相机正好在窗口的中心点上

1.2 透视投影相机

透视投影更符合我们视觉的投影，正是因为远近高低各不同，物体才显得生动形象。

• 特点：远近高低不同
• 构造函数：PerspectiveCamera（fov,aspect,near,far)
  1. 视角fov：看以看做是眼睛睁开的角度，即视角大小。如果设置为0，相当于闭上了眼睛，故什么也看不见；如果为180，看以认为视角很广阔。但是在180度时，物体会很小，因为物体在整个可视区域中的比例变小了。
  2. 纵横比aspect：实际窗口的纵横比，即宽度除以高度。这个值越大，表示宽度越大，那么看的就越宽；否则看的就越窄。
  3. 近平面near：表示近处裁面的距离。也可认为是眼睛距离近处的距离。不可以设置为负值。
  4. 远平面far：表示远处的裁面。

var camera = new THREE.PerspectiveCamera(45,width/height,1,1000);

1.3 相机的up、lookat、position

有如下代码：

var camera = new THREE.PerspectiveCamera(45,width/height,1,1000);
//表示相机的位置
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：就表示相机放置的位置。
• up：表示相机以哪个方向为上方（即做一条直线a垂直于镜头平面，直线b垂直于直线a，且直线b是垂直于快门的，那么b就是上方）
• lookat：就是相机看向哪里（lookat代表一个方向而不是一个点）