一、两种摄像机的区别与比较
Three.js 库提供了两种不同的摄像机：透视投影摄像机和正交投影摄像机。
透视投影摄像机：这种摄像机的效果更贴近真实世界。也就是物体离摄像机越远，它们就会被渲染得越小。
正交投影摄像机：对象相对于摄像机的距离对渲染的结果是没有影响的，也就是说物体不离摄像头多远，渲染出来的尺寸都是一样的。这中摄像机通常被用于二位游戏中。
1，效果图
（1）页面打开后默认使用的是“透视投影摄像机”。
（2）点击控制面板上的“切换摄象机”按钮，可以实现两种类型的摄象机相互切换。下面是“正交投影摄像机”效果图。
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script type="text/javascript" src="../libs/three.js"></script><script type="text/javascript" src="../libs/stats.js"></script><script type="text/javascript" src="../libs/dat.gui.js"></script><style>body {margin: 0;overflow: hidden;}</style></head><body><!-- 用于显示统计图形 --><div id="Stats-output"></div><!-- 作为Three.js渲染器输出元素 --><div id="WebGL-output"></div><script type="text/javascript">//网页加载完毕后会被调用function init() {初始化统计对象var stats = initStats();//创建一个场景（场景是一个容器，用于保存、跟踪所要渲染的物体和使用的光源）var scene = new THREE.Scene();//创建一个摄像机对象（摄像机决定了能够在场景里看到什么）var camera = new THREE.PerspectiveCamera(45,window.innerWidth / window.innerHeight, 0.1, 1000);camera.position.x = 40;camera.position.y = 20;camera.position.z = 60;camera.lookAt(scene.position);//创建一个WebGL渲染器并设置其大小var renderer = new THREE.WebGLRenderer();renderer.setClearColor(new THREE.Color(0xEEEEEE));renderer.setSize(window.innerWidth, window.innerHeight);//创建一个平面var planeGeometry = new THREE.PlaneGeometry(50, 50);var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});var plane = new THREE.Mesh(planeGeometry, planeMaterial);//设置平面的旋转角度和位置plane.rotation.x = -0.5 * Math.PI;plane.position.x = 0;plane.position.y = 0;plane.position.z = 0;//将平面添加场景中scene.add(plane);//在平面上方添加一个个小方块var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);for (var j = 0; j < (planeGeometry.parameters.height / 5); j++) {for (var i = 0; i < planeGeometry.parameters.width / 5; i++) {var rnd = Math.random() * 0.75 + 0.25;var cubeMaterial = new THREE.MeshLambertMaterial();cubeMaterial.color = new THREE.Color(rnd, 0, 0);var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);cube.position.z = -((planeGeometry.parameters.height) / 2) + 2 + (j * 5);cube.position.x = -((planeGeometry.parameters.width) / 2) + 2 + (i * 5);cube.position.y = 2;scene.add(cube);}}//添加环境光var ambientLight = new THREE.AmbientLight(0x292929);scene.add(ambientLight);//添加平行光var directionalLight = new THREE.DirectionalLight(0xffffff, 0.7);directionalLight.position.set(-20, 40, 60);scene.add(directionalLight);//将渲染的结果输出到指定页面元素中document.getElementById("WebGL-output").appendChild(renderer.domElement);//dat.GUI对象使用的配置（存放有所有需要改变的属性的对象）var controls = new function () {//当前使用的摄像机类型this.perspective = "Perspective";//切换摄像机this.switchCamera = function () {if (camera instanceof THREE.PerspectiveCamera) {//切换成正交投影摄像机camera = new THREE.OrthographicCamera(window.innerWidth / -16,window.innerWidth / 16, window.innerHeight / 16,window.innerHeight / -16, -200, 500);camera.position.x = 40;camera.position.y = 20;camera.position.z = 60;camera.lookAt(scene.position);this.perspective = "Orthographic";} else {//切换成透视投影摄像机camera = new THREE.PerspectiveCamera(45,window.innerWidth / window.innerHeight, 0.1, 1000);camera.position.x = 40;camera.position.y = 20;camera.position.z = 60;camera.lookAt(scene.position);this.perspective = "Perspective";}};};//创建dat.GUI，传递并设置属性var gui = new dat.GUI();gui.add(controls, 'switchCamera').name("切换摄像机");gui.add(controls, 'perspective').listen();//渲染场景render();//渲染场景function render() {stats.update();//通过requestAnimationFrame方法在特定时间间隔重新渲染场景requestAnimationFrame(render);//渲染场景renderer.render(scene, camera);}//初始化统计对象function initStats() {var stats = new Stats();//设置统计模式stats.setMode(0); // 0: fps, 1: ms//统计信息显示在左上角stats.domElement.style.position = 'absolute';stats.domElement.style.left = '0px';stats.domElement.style.top = '0px';//将统计对象添加到对应的<div>元素中document.getElementById("Stats-output").appendChild(stats.domElement);return stats;}}//确保init方法在网页加载完毕后被调用window.onload = init</script></body></html>
THREE.PerspectiveCamera 和 THREE.OrthographicCamera 这两种摄像机创建方法是不一样的，它们接收的参数分别如下：
1，透视投影摄像机（ThREE.PerspectiveCamera）
原文:Three.js - 摄像机的使用详解（透视投影摄像机、正交投影摄像机）
参数 描述 推荐默认值
fov 表示视场。这是在摄像机中能够看到的那部分场景。
比如：人类有接近 180 度的视场，而有些鸟类有接近 360 度的视场。但由于计算机不能完全显示我们能够看到的景象，所以一般会选择一块较小的区域。对于游戏而言，视场大小通常为 60 度到 90 度。 50
aspect（长宽比） 这是渲染结果的横向尺寸和纵向尺寸的比值。这个长宽比决定了横向视场和纵向视场的比例关系。
在上面的样例中，由于使用窗口作为输出界面，所以使用的是窗口的长宽比。 window.innerWidth / window.innerHeight
near（近面距离） 该属性定义了从距离摄像机多近的距离开始渲染。
通常情况下这个值会设置得尽量小，从而能够渲染从摄像机位置可以看到的所有物体。 0.1
far（远面距离） 该属性定义了摄像机从它所出的位置能够看多远。
如果这个值设置得较小，那么场景中有一部分不会被渲染。
如果设置的较大，那么就会影响渲染的性能。
1000
zoom（变焦） 可以使用该属性放大或缩小场景。
如果这个值设置得小于 1，那么场景就会被缩小。
如果这个值设置得大于 1，那么场景就会被放大。
如果设置的值为负数，那么场景就会上下颠倒。
1000
2，正交投影摄像机（ThREE.OrthographicCamera）
由于正交投影摄像机渲染出的物体大小都是一样的，所以它并不关心使用什么长宽比，或者以什么样的视角了观察场景。
我们使用正交投影摄像机时，要定义的是一个需要被渲染的方块区域。
原文:Three.js - 摄像机的使用详解（透视投影摄像机、正交投影摄像机）
参数 描述
left（左边界） 可视范围的左平面。我们可以将它看作是渲染部分的左边界。任何比这个左边界的物体都不会被渲染。
right（右边界） 和 left 属性一样，只不过它定义的是可被渲染区域的另一个侧面。任何比这个右边界远的物体都不会被渲染。
top（上边界） 可被渲染区域的最上面。
bottom（下边界） 可被渲染区域的最下面。
near（近面距离） 基于摄像机所在的位置，从这一点开始渲染场景。
far（远面距离） 基于摄像机所在的位置，渲染场景到这一点为止。
zoom（变焦） 可以使用该属性放大或缩小场景。
如果这个值设置得小于 1，那么场景就会被缩小。
如果这个值设置得大于 1，那么场景就会被放大。
如果设置的值为负数，那么场景就会上下颠倒。
三、将摄像机聚焦在指定点上
1，改变摄像机所指向的位置
通常来说，摄像机会指向场景的中心，用坐标表示就是 position(0,0,0)。但我们可以通过 lookAt() 方法改变摄像机所指向的位置：
1
camera.lookAt(new THREE.Vector3(x, y, z));
2，让摄像机追随某个物体
由于 THREE.Mesh 对象的位置都是 THREE.Vector3 对象，所以可以使用 lookAt() 方法使摄像机指向场景中特定的某个网格。
比如我们在 render 循环中执行如下代码，看到的效果就是摄像机随着物体的移动而移动。
1
camera.lookAt(mesh.position);
