談?wù)搕hree.js之前我們需要了解一下WebGL...先自問自答一下
1：什么是WebGL ?
webGL是基于OpenGL es 2.0 的web標準他去，可以通過html5 canvas元素作為dom訪問接口峦萎。
2：WebGL可以做什么驻龟？
現(xiàn)在大部分瀏覽器都實現(xiàn)了WebGL载慈。它不僅可以創(chuàng)建二維圖形和應(yīng)用，還可以利用CPU苫费，來創(chuàng)建漂亮的汤锨、高效的三維應(yī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）正交投影相機
//設(shè)置正交投影相機
THREE.OrthographicCamera(left, right, top, bottom, near, far)
th2.png
