Bootstrap

THREE.JS之照像机(Camera)

  在简介的章节中,我介绍过照相机在3D的世界中的作用,照像机之于场景,就像天文望远镜之于宇宙。天文望远镜能看到什么东西,我们才能看到什么东西。所以照像机在3D有着非常重要的地位,这一章我们来介绍一下Three.js中的照像机,包括透视相机(PerspectiveCamera),正交相机(OrthographicCamera),立方体相机(CubeCamera)和立体相机(StereoCamera)。

透视相机(PerspectiveCamera)
  透视相机应该是使用最多的一类照相机了,因为这类摄像机成像的原理和我们人眼看东西是一样的—近大远小。在简介章节中,我们就是用透视相机来观察我们创建的第一个场景,观察到了第一个方块。具体的使用方法如下:

var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
sence.add(camera);

我们需要给透视相机传进去四个参数:

  • fov(视野):照相机拍摄范围的一个角度。角度越大,视野就越宽。就好比普通相机和广角相机一样,广角相机拍摄的景物更多。
  • aspect(纵横比):相机拍摄的图像的宽高比,一般与画布的宽高比一致;
  • near(近端距离):相机只不捉距离它小于这个值的物体;
  • far(远端距离):相机不捕捉距离它大于这个值的物体;

  因为我们说一个场景就是一个宇宙,无边无际,摄像机无论面朝那个方向,根据透视原理,他的视野就是一个锥型一样向外发散,理论上只要在这个锥形中的物体,都应该被照相机捕捉。但是又根据透视原理,远处的物体成像会很小,超出一定距离的物体对于成像来说已经没有意义,为了优化渲染,指定相机只渲染near到far之间的物体。

使用透视相机,可以观察近大远小的效果,代码如下,在这儿查看在线例子:</

;