今天的主题是three.js中用于观察三维空间的摄像机。
1.认识camera
图形学中的摄像机定义了三维空间到二维屏幕的投影方式。
在Threejs中相机的表示是THREE.Camera,它是相机的抽象基类,它有两种相机,分别是正投影相机THREE.OrthographicCamera和透视投影相机THREE.PerspectiveCamera。
下面我们看图认识摄像机:
正交投影就像数学课上画的,远近高低比例都相同。;而透视投影有一个基本点,就是远处的物体比近处的物体小,远大近小。
对于制图、建模软件通常使用正交投影;而对于其他大多数应用,通常使用透视投影。
2.正交投影摄像机
正交投影摄像机的构造函数:
Three.OrthographicCamera(left,right,top,bottom,near,far)
六个参数分别代表正交投影照相机拍摄到的六个面的位置。
其中,near表示近平面与相机中心点的垂直距离;far表示远平面与相机中心点的垂直距离。
有了这些参数和相机中心点,我们这里将相机的中心点又定义为相机的位置。通过这些参数,我们就能够在三维空间中唯一的确定上图的一个长方体。这个长方体也叫做视景体。
投影变换的目的就是定义一个视景体,使得视景体外多余的部分裁剪掉,最终图像只是视景体内的有关部分。
栗子:
var camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, 1, 1000 );
scene.add( camera );
3.透视投影摄像机
透视投影摄影机的构造函数:
THREE.PerspectiveCamera(fov, aspect, near, far)
-fov 可视角度
- aspect 实际窗口的纵横比
- near 近处的裁面的距离
- far 远处的裁面的距离
只有离相机的距离大于near值,小于far值,且在相机的可视角度之内,才能被相机投影到。
透视图中,灰色的部分是视景体,是可能被渲染的物体所在的区域。
fov是视景体竖直方向上的张角(是角度制而非弧度制),如侧视图所示。
aspect等于width / height,是照相机水平方向和竖直方向长度的比值,通常设为Canvas的横纵比例。
near和far分别是照相机到视景体最近、最远的距离,均为正值,且far应大于near。
栗子:
var camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 );
scene.add( camera );