camera

上篇大致了解了three.js ，并可以创建一个简单的可动的立方体。下来我们着重了解下camera （照相机），照相机其实就是视角，就像你的眼睛。Three.js有两种不同的相机模式:直角相机(OrthographicCamera)和透视相机(PerspectiveCamera),最好的方式去理解这两个照相机的不同是－用你的眼睛去观察它们。

透视相机

下图是透视相机的投影

构造函数

THREE.PerspectiveCamera(fov, aspect, near, far)

实例

var camera = new THREE.PerspectiveCamera(45, 400 / 300, 0.1, 1000);

透视相机参数解析

直角相机

下图是直角投影相机

构造函数

THREE.OrthographicCamera(left, right, top, bottom, near, far)

实例

var camera = new THREE.OrthographicCamera(-2, 2, 1.5, -1.5, 1, 10);

直角相机参数

如你所看到的 ，如果我们用直角相机，所有的元素的尺寸大小都是相同的，不管距离，这种相机类型将用于老的2D游戏（如下图）

现在我们看看相机是如何工作的

为了达到更好的视觉效果，我们通常使用透视相机，她更像是真实世界，如果你想尝试一个Demo，下面是相机切换的一个函数

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 = 2;
camera.position.y = 1;
camera.position.z = 3;
camera.lookAt(scene.position);
this.perspective = "Orthographic";
} else {
camera = new THREE.PerspectiveCamera(45,
window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.x = 120;
camera.position.y = 60;
camera.position.z = 180;
camera.lookAt(scene.position);
this.perspective = "Perspective";
}
};

当我们切换相机，我们通常需要把相机集中到确定的位置，由 lookAt 函数来完成

camera.lookAt(new THREE.Vector3(x,y,z));

翻译与参考文章
https://www.script-tutorials.com/webgl-with-three-js-lesson-9/
http://www.ituring.com.cn/article/49446