利用HTML5构筑物理模拟环境2.22

奔跑的小兔

２．设置相机

OpenGL（WebGL）中、三维空间中的物体投影到二维空间的方式中，存在***投影和正投影两种相机。 ***投影就是、从视点开始越近的物体越大、远处的物体绘制的较小的一种方式、和日常生活中我们看物体的方式是一致的。 正投影就是不管物体和视点距离，都按照统一的大小进行绘制、在建筑和设计等领域需要从各个角度来绘制物体，因此这种投影被广泛应用。在 Three.js 也能够指定***投影和正投影两种方式的相机。 本文按照以下的步骤设置***投影方式。
(0) 声明全局的变量（对象）

(1) 设置***投影的相机

(2) 设置相机的位置坐标

(3) 设置相机的上为「z」轴方向

(4) 设置视野的中心坐标
var camera;                //(0)

function initCamera() {

  var camera = new THREE.PerspectiveCamera( 45 , width / height , 1 , 10000 ); //(1)

  camera.position.x = 100;   //(2)

  camera.position.y = 20;    //(2)

  camera.position.z = 50;    //(2)

  camera.up.x = 0;           //(3)

  camera.up.y = 0;           //(3)

  camera.up.z = 1;           //(3)

  camera.lookAt( {x:0, y:0, z:0 } ); //(4)

}***投影模式下相机的设置

***投影中，会把称为视体积领域中的物体作成投影图。 视体积是通过以下4个参数来指定。

视野角：fov

纵横比：aspect

相机离视体积最近的距离：near

相机离视体积最远的距离：far

通过上面4个参数确定的***投影设置相机。 默认情况下相机的上方向为Y轴，右方向为X轴，沿着Z轴朝里。
var camera = new THREE.PerspectiveCamera( fov , aspect , near , far );通过 Three.js 的 「PerspectiveCamera」类声明对象[camera]，同时我们可以修改对象[camera]的各种属性值来设置相机的详细属性。
设置相机的位置坐标

相机的位置坐标和视野的中心坐标，按照(2)那样的方式进行设置。 和上面(2)的方式一样，下面这样的方法也可以。
camera.position.set(50,50,100); //(2)设置相机的上方向

相机的上方向按照(3)这样的方式设置对象的属性。
设置相机的视野中心

利用[lookAt]方法来设置相机的视野中心。 「lookAt()」的参数是一个属性包含中心坐标「x」「y」「z」的对象。 「lookAt()」方法不仅是用来设置视点的中心坐标、 在此之前设置的相机属性要发生实际作用，也需要调用 [lookAt] 方法。
动作确认

请尝试修改(1),(2),(3),(4),(5)、来确认相机各个设定的实际作用。
其他投影方式

在 Three.js 中、有各种各样的类，用来来实现***投影、正投影或者复合投影（***投影和正投影）这样的相机。
var camera = THREE.OrthographicCamera = function ( left, right, top, bottom, near, far ) //正投影

var camera = THREE.CombinedCamera = function ( width, height, fov, near, far