Three.js學習筆記

Three.js是一個3D JavaScript庫。Three.js封裝了底層的圖形接口，使得程序員可以在無需掌握繁冗的圖形學知識的狀況下，也能用簡單的代碼實現三維場景的渲染。

一個典型的Three.js程序至少要包括渲染器（Renderer）、場景（Scene）、照相機（Camera），以及你在場景中建立的物體。

渲染器（Renerer）

渲染器將和Canvas元素進行綁定，在HTML中手動定義了id爲mainCanvas的Canvas元素，那麼Renderer能夠這樣寫：

var renderer = new THREE.WebGLRenderer({
        canvas: document.getElementById('mainCanvas')
    });

將背景色（用於清除畫面的顏色）設置爲黑色：

renderer.setClearColor(0x000000);

場景（Scene）

在Three.js中添加的物體都是添加到場景中的，所以它至關於一個大容器。通常說，場景裏沒有很複雜的操做，在程序最開始的時候進行實例化，而後將物體添加到場景中便可。

var scene = new THREE.Scene();

照相機（Camera）

咱們使用Three.js建立的場景是三維的，而一般狀況下顯示屏是二維的，那麼三維的場景如何顯示到二維的顯示屏上呢？照相機就是這樣一個抽象，它定義了三維空間到二維屏幕的投影方式。
WebGL和Three.js使用的座標系是右手座標系。

var camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100);
//咱們把 camera 放在 XYZ 座標爲 (50, 50, 50) 的位置上，而且朝向座標原點。
camera.position.set(50, 50, 50);
camera.lookAt(new THREE.Vector3(0, 0, 0));
scene.add(camera);

正交投影照相機（Orthographic Camera）的構造函數是：

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

這六個參數分別表明正交投影照相機拍攝到的空間的六個面的位置，這六個面圍成一個長方體，咱們稱其爲視景體（Frustum）。只有在視景體內部（下圖中的灰色部分）的物體纔可能顯示在屏幕上，而視景體外的物體會在顯示以前被裁減掉。

爲了保持照相機的橫豎比例，須要保證(right - left)與(top - bottom)的比例與Canvas寬度與高度的比例一致。
near與far都是指到照相機位置在深度平面的位置，而照相機不該該拍攝到其後方的物體，所以這兩個值應該均爲正值。爲了保證場景中的物體不會由於太近或太遠而被照相機忽略，通常near的值設置得較小，far的值設置得較大，具體值視場景中物體的位置等決定。

渲染

在定義了場景中的物體，設置好的照相機以後，渲染器就知道如何渲染出二維的結果了。這時候，咱們只須要調用渲染器的渲染函數，就能使其渲染一次了。

renderer.render(scene, camera);