8.three.js相机详解

8.three.js相机详解

1、 认识相机

在Threejs中相机的表示是THREE.Camera，它是相机的抽象基类，其子类有两种相机，分别是正投影相机THREE.OrthographicCamera和透视投影相机THREE.PerspectiveCamera：

正投影和透视投影的区别是：透视投影有一个基本点，就是远处的物体比近处的物体小。

2.正投影相机

正投影相机：

new THREE.OrthographicCamera( left, right, top, bottom, near, far );

如图，定义一个正投影相机的可视范围，由left, right, top, bottom, near, far六个参数确定，图中灰色区域即相机可视部分，left, right, top, bottom确定了可视区域的矩形平面大小， near, far确定了可视区域的深度范围。

3.透视投影相机

透视投影相机：

let camera = new THREE.PerspectiveCamera( fov, aspect, near, far)

如图，定义一个透视投影相机的可视范围，由 fov, aspect, near, far四个参数可以确定，图中绿色平面到粉色平面的空间即为可视区域。

1、视角fov：这里可以理解为视野角度的大小,即,视角的大小,如果设置为0,相当你闭上眼睛了,所以什么也看不到,如果为180,那么可以认为你的视界很广阔,但是在180度的时候，往往物体很小，因为他在你的整个可视区域中的比例变小了。

2、近平面near：这个呢，表示你近处的裁面的距离。补充一下，也可以认为是眼睛距离近处的距离，假设为10米远，请不要设置为负值，Three.js就傻了,不知道怎么算了。

3、远平面far：这个呢，表示你远处的裁面,

4、纵横比aspect：实际窗口的纵横比，即宽度除以高度。这个值越大，说明你宽度越大

其它的参数介绍：

 camera.position.x = 0;
 camera.position.y = 0;
 camera.position.z = 1000;
 camera.up.x = 0;
 camera.up.y = 0;
 camera.up.z = 1;
 camera.lookAt({
 x: 0,
 y: 0,
 z: 0,
 });

position参数：定义相机的位置

up参数：相机的上方向，用于确定相机的摆放

lookAt参数：相机看向哪个位置

视频演示地址：https://www.bilibili.com/video/BV18HypYwEnr/?vd_source=0f4eae2845bd3b24b877e4586ffda69a