Three-js 創建第一個3D場景

1.一個場景至少需要的三種類型組件

    相機/決定哪些東西將在屏幕上渲染
    光源/他們會對材質如何顯示，以及生成陰影時材質如何使用產生影響
    物體/他們是在相機透視圖里主要的渲染隊形：方塊、球體等

2.瀏覽器兼容

    Moziller Firefox：4.0版本以后開始支持；
    Google Chrome：第9版以后開始支持
    Safari：5.1版本開始支持；
    Opera：12.00版本以后開始支持。要讓Opera支持WebGL，你還需要打開opera:config文件，設置WebGL，並將Enable hardare Acceleration設置為1;
    Inernet Explorer：從IE11開始支持WebGL
    如果想讓舊版本IE支持WebGL,可以使用iewebgl插件，下載網址是http://iewebgl.com/。

3.材質

    Three.js里有兩種材質對光源產生反應：MeshLambertMaterial和MashPhongMaterial。

4.添加陰影

    添加陰影必須指定幾個步驟。首先需要讓渲染器支持陰影:

render.shadowMapEabled = true; // render為WebGLRenderer對象

    其次需要設置哪些物體作為陰影源，哪些物體作為接受陰影：

plane.receiveShadow = true; // plane平面接受陰影
cube.castShadow = true; // cube立方體產生陰影
sphere.castshadow = true; // sphere球體產生陰影

    最后需要置頂哪些光源可產生投影：

spotLight.castShadow = true // spotLight光源可產生陰影

5.檢測動畫幀頻插件state.js

    Three.js作者也寫了一個顯示每秒幀數（FPS）的插件，可用來統計渲染。首先在頁面引入state.js文件。然后創建一個檢測顯示的div：

<div id="State-output"></div>

    寫一個初始化統計函數：

function initStats() {

            var stats = new Stats();

            stats.setMode(0); // 0: fps, 1: ms

            // Align top-left
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.left = '0px';
            stats.domElement.style.top = '0px';

            document.getElementById("Stats-output").appendChild(stats.domElement);

            return stats;
        }

    在創建渲染對象時，我們也初始化state：   

var state = initState();

    在執行渲染的動畫函數中，每次執行時都調用下state的update函數：

function render() {
            stats.update();
            ...
            requestAnimationFrame(render);
            renderer.render(scene, camera);
        }

6.使用dat.GUI庫簡化試驗

    Google幾個人創建了一個名為dat.GUI的庫，使用它，你很容易就可以創建一個簡單的界面組件，用以修改代碼中的變量。例如我們可以實時修改球體的彈跳速度，方塊的旋轉速度等等。    
    就像添加其他對象一樣，首先需要引入dat.gui.js，接下來需要一定一個javascript對象，保存想通過dat.GUI庫修改的那些變量，也可以綁定函數而調用對象函數。如定義一個controls對象：     

var controls = new function(){             
this.rotationSpeed = 0.02;             
this.bouncingSpeed = 0.03;         
}

    定義了兩個屬性，以及設置了默認值。接下來把這個對象傳遞給dat.GUI對象，並定義兩個屬性的取值范圍，如下所示：

(function(){
...
var gui = new dat.GUI();
gui.add(controls, 'rotationSpeed', 0, 0.5);
gui.add(controls, 'bouncingSpeed', 0, 0.5);
...
});

    現在要做的是保證在render循環里直接飲用這兩個屬性。這樣當我們在dat.GUI界面修改時可直接影響物體的旋轉速度和彈跳速度。

function render(){
...
cube.rotation.x += controls.rotationSpeed;
cube.rotation.y += controls.rotationSpeed;
cube.rotation.z += controls.rotationSpeed;
step += controls.bouncingSpeed;

sphere.position.x = 20 + (10 * (Math.cos(step)));
sphere.position.y = 2 + (10 * Math.abs(Math.sin(step)));
...
requestAnimationFrame(render);
}

    運行界面，在界面右上角可看到定義的兩個屬性，我們可以實時修改屬性，查看界面動畫效果。

7.Three.Scene常用函數和屬性

    scene.add(object)：添加一個對象到場景對象匯總。包括Sphere、Box、Cube、Light等。
    scene.remove(object):從Scene中刪除一個對象
    scene.getChildByName(name):通過名稱獲取Scene下的對象，名稱可通過例如cube.name = 'cube-1'這種方式指定。
    scene.children():獲取場景中的所有子對象列表
    scene.traverse(function(e){}):遍歷scene下的子對象。我們可以通過例如e instaceof THREE.Mesh來判斷類型進行過濾
    scene.fog:通過該屬性設置場景的霧化效果。它可以渲染出一層霧氣，隱藏遠處的物體
    scene.overrideMaterial:通過這個屬性，你可以強制場景中的所有物體使用同一個材質

8.霧化效果

    three.js添加霧化效果很簡單，第一種方式：

//new THREE.Fog(color, near, far)
scene.fog = new THREE.Fog(0xffffff, 0.015, 100);

    包含三個參數，第一個參數color指定霧化顏色，第二個參數near指定近點位置，第三個far參數指定遠點位置。第二種方式：

scene.fog = new THREE.FogExp2(0xffffff, 0.015);

    這種方式不指定near和far屬性，只給顏色和濃度。濃度也就是霧化因子，霧化因子也是通過near和far算出來的。

9.動態修改物體的頂點

    three.js假設一個網格的幾何體在其生命周期內不會改變。為了支持動態修改頂點坐標。我們需要在渲染的時候添加下面的代碼：

mesh.children.forEach(function(e){
                e.geometry.vertices = vertices;
                e.geometry.verticesNeedUpdate = true;
                e.geometry.computeFaceNormals();
            });

    verticesNeedUpdate屬性指定頂點需要重新渲染，computeFaceNormals指定Face需要重新渲染。

10.網格Mesh常用函數和屬性

    position(位置)/決定該對象相對其父對象的位置。多數情況下，一個對象的父對象是THREE.Scene()對象

    rotation(旋轉)/通過這個屬性你可以設置對象繞任何一個軸旋轉弧度

    scale(比例）/通過這個屬性可以沿着x、y、z軸縮放對象

    translateX(amout)/沿x軸將對象平移指定的距離。如果是負數則沿着x軸負方向  

    translateY(amout)/沿y軸將對象平移指定的舉例。如果是負數則沿着y軸負方向

    translateZ(amout)/沿z軸將對象平移指定的舉例。如果是負數則沿着z軸負方向

11.正投影相機和透視投影相機

    three.js提供了兩種相機：THREE.PerspectiveCamera(透視投影相機)和THREE.OrthographicCamera(正投影相機)。首先看PerspectiveCamera構造函數new THREE.PerspectiveCamera(fov, aspect, near, far)參數：

    fov/fov表示視場。這是從相機位置能夠看到的部分場景。推薦默認值為45

    aspect/長寬比，這是渲染結果輸出區的橫向長度和縱向長度的比值。默認推薦window.innerWidth/window.innerHeight。

    near/近面，near屬性定義的是three.js庫從距離相機多斤的地方開始渲染場景。默認值推薦為0.1。

    far/遠面，far屬性定義的而是相機可以從它所處的位置看多遠。默認值推薦為1000.

    正投影相機構造函數new THREE.OrthographicCamera(left, right, top, bottom, near, far)的參數：

    left/左邊界;right/右邊界;top/上邊界；bottom/下邊界；near/近邊界;far遠邊界。

    創建了相機之后，我們需要指定聚集點的位置：

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

12.Canvas Renderer和WebGL Renderer區別

    HTML5 canvas renderer和WebGL renderer主要區別是，HTML5 canvas渲染器直接使用javascript在canvas上繪制3D場景。這種方式最主要的問題是糟糕的表現。而使用THREE.WebGLRenderer，我們可以通過硬件加速執行渲染。但THREE.CanvasRenderer對象，我們不得不完全依賴軟件渲染，這導致了低性能呈現。另外一個缺點是，THREE.CanvasRenderer不能使用three.js提供的高級材質，而只有WebGL才可以使用。