three.js 相机的详细介绍(04)
作者:互联网
前言:相机的工作原理
一、认识相机
在Three.js中相机的表示是THREE.Camera
,它是相机的抽象类,它的子类有两种相机,分别是正投影相机和透视投影相机。
1.1 正投影相机
正投影相机也叫正交投影相机
- 特点:远近高低比例都相同
- 相机的位置:将相机的中心点定义为相机的位置。
- 构造函数:
OrthographicCamera(left,right,top,bottom,near,far)
- left:左平面距离相机中心点的垂直距离。
- right:右平面距离相机中心点的垂直距离。
- top:顶平面距离相机中心点的垂直距离。
- bottom:底平面距离相机中心点的垂直距离。
- near:近平面距离相机中心点的垂直距离。
- far:远平面距离相机中心点的垂直距离。
- 有了这些参数和相机的中心点,就能在三维空间中唯一确定下图的长方体。这个长方体也叫做
视景体
。 - 投影变换的目的:就是定义一个视景体,使得视景体外多余的部分裁剪掉,最终图像只是视景体内的有关部分。
var camera = new THREE.OrthographicCamera(width/-2,width/2,height/2,height/-2,1,1000);
//将浏览器窗口的高度和宽度作为了视景体的高度和宽度,相机正好在窗口的中心点上
1.2 透视投影相机
透视投影更符合我们视觉的投影,正是因为远近高低各不同,物体才显得生动形象。
- 特点:远近高低不同
- 构造函数:
PerspectiveCamera(fov,aspect,near,far)
- 视角fov:看以看做是眼睛睁开的角度,即视角大小。如果设置为0,相当于闭上了眼睛,故什么也看不见;如果为180,看以认为视角很广阔。但是在180度时,物体会很小,因为物体在整个可视区域中的比例变小了。
- 纵横比aspect:实际窗口的纵横比,即宽度除以高度。这个值越大,表示宽度越大,那么看的就越宽;否则看的就越窄。
- 近平面near:表示近处裁面的距离。也可认为是眼睛距离近处的距离。
不可以设置为负值
。 - 远平面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代表一个方向而不是一个点)
标签:04,three,js,相机,camera,中心点,平面,垂直距离,视景 来源: https://blog.csdn.net/weixin_48931875/article/details/113781252