談?wù)搕hree.js之前我們需要了解一下WebGL...先自問(wèn)自答一下

1：什么是WebGL ?

webGL是基于OpenGL es 2.0 的web標(biāo)準(zhǔn)，可以通過(guò)html5 canvas元素作為dom訪問(wèn)接口。

2：WebGL可以做什么？

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

3:那什么是Three.js?

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

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

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

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

//照相機(jī)
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);

第一部分：相機(jī)

1.1什么是照相機(jī)？

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

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

th1.png

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

（1）正交投影相機(jī)

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

th2.png