three.js 相机的详细介绍(04)

前言:相机的工作原理

一、认识相机

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

three.js 相机的详细介绍(04)

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);
//将浏览器窗口的高度和宽度作为了视景体的高度和宽度,相机正好在窗口的中心点上

three.js 相机的详细介绍(04)

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);

three.js 相机的详细介绍(04)

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代表一个方向而不是一个点)

three.js 相机的详细介绍(04)

上一篇:Redis的Set数据类型及常用命令


下一篇:Codeforces Round #695 (Div. 2) C. Three Bags(贪心+思维)