认识相机
相机对象 THREE.Camera
子类
- THREE.OrthographicCamera
- THREE.PerspectiveCamera
正射投影
又称平行投影，最大特点是无论物体距离相机多远，投影后的物体大小尺寸不变。通常用于建筑蓝图绘制和计算机辅助设计等方面。
构造函数：
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 );
scene.add( camera );把浏览器容器的宽度、高度作为视景体的高度和宽度，相机正好在窗体的中心点上。
透视投影
其投影时，3D 空间中的物体的所有投射光线会聚于观察者的眼睛这一点。透视投影生成图像，其中的物体的大小是基于该物体相对于观察者的距离。
这更适合我们一般的感觉。 
透视投影相机也是形成视景体，会进行裁剪
构造函数
PerspectiveCamera(fov,aspect,near,far)
参数说明
- fov：透视的角度，表示的是照相机所看到的范围,0-180
- aspect：是Znear平面的宽高比，值大，就相当于看宽屏电影
- near：显示区域离相机最近的距离
- far：离相机最远的距离
示例
var camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 );
scene.add( camera );示例
正射投影
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Three框架</title>
<script src="js/three.min.js"></script>
<style type="text/css">
div#canvas-frame {
border: none;
cursor: pointer;
width: 100%;
height: 600px;
background-color: #EEEEEE;
}
</style>
<script>
var renderer,width,height;
function initThree() {
width = document.getElementById('canvas-frame').clientWidth;
height = document.getElementById('canvas-frame').clientHeight;
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(width, height);
document.getElementById('canvas-frame').appendChild(renderer.domElement);
renderer.setClearColor(0xFFFFFF, 1.0);
}
var camera;
function initCamera() {
// camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
camera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, 10, 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
});
}
var scene;
function initScene() {
scene = new THREE.Scene();
}
var light;
function initLight() {
light = new THREE.AmbientLight(0xFF0000);
light.position.set(100, 100, 200);
scene.add(light);
light = new THREE.PointLight(0x00FF00);
light.position.set(0, 0, 300);
scene.add(light);
}
function initObject() {
var geometry = new THREE.CylinderGeometry(70, 100, 200);
var material = new THREE.MeshLambertMaterial({ color: 0xFFFFFF });
var mesh = new THREE.Mesh(geometry, material);
mesh.position = new THREE.Vector3(0, 0, 0);
scene.add(mesh);
}
function threeStart() {
initThree();
initCamera();
initScene();
initLight();
initObject();
animation();
}
function animation() {
changeFov();
renderer.render(scene, camera);
requestAnimationFrame(animation);
}
function setCameraFov(fov) {
camera.fov = fov;
camera.updateProjectionMatrix();
}
function changeFov() {
var txtFov = document.getElementById("txtFov").value;
var val = parseFloat(txtFov);
setCameraFov(val);
}
</script>
</head>
<body onload="threeStart();">
<div id="canvas-frame"></div>
<div>
Fov:<input type="text" value="45" id="txtFov"/>(0到180的值)
</div>
</body>
</html>效果： 
再将摄像机改为透视投影：
camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
可以看到视角的不同，图像会发生变化。视角越大，物体显得越小。
