談論three.js之前我們需要了解一下WebGL...先自問自答一下

1：什么是WebGL ?

webGL是基于OpenGL es 2.0 的web標準，可以通過html5 canvas元素作為dom訪問接口。

2：WebGL可以做什么？

現(xiàn)在大部分瀏覽器都實現(xiàn)了WebGL。它不僅可以創(chuàng)建二維圖形和應用，還可以利用CPU，來創(chuàng)建漂亮的、高效的三維應用。

3:那什么是Three.js?

Three.js封裝了底層的圖形接口，提供了基于WebGL的非常易用的JavaScript API。且簡化WebGL的開發(fā)。

一個典型的Three.js程序至少包括 渲染器、場景、照相機、以及場景中創(chuàng)建的物體。如下所示：

 //渲染器
var renderer = new THREE.WebGLRenderer({
    canvas:document.getElementById('myCanvas')
});
renderer.setClearColor(0x000000);

//場景
var scene = new THREE.Scene();

//照相機
var camera = new THREE.PerspectiveCamera(45, 4 / 3, 1, 1000);
camera.position.set(0, 0, 5);
scene.add(camera);

//物體
var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3),
    new THREE.MeshBasicMaterial({
        color: 0xff0000
    })
);
scene.add(cube);

//渲染
renderer.render(scene,camera);

第一部分：相機

1.1什么是照相機？

他定義了三維空間到二維空間屏幕的投影方式。

Three.js中有兩種不同的相機。正交投影相機 和 透視投影相機

th1.png

透視投影(a)：近大遠小效果
正交投影(b)：在三維空間內(nèi)平行的線，在二維空間也一定是平行的。

（1）正交投影相機

    //設置正交投影相機
    THREE.OrthographicCamera(left, right, top, bottom, near, far)

th2.png