three.js的學習

1，three.js是什麼？

Three.js 是一款運行在瀏覽器中的 3D 引擎，你可以用它創建各種三維場景，包括了攝影機、光影、材質等各種對象。你可以在它的主頁上看到許多精彩的演示。不過，這款引擎還處在比較不成熟的開發階段，其不夠豐富的 API 以及匱乏的文檔增加了初學者的學習難度（尤其是文檔的匱乏）three.js的代碼託管在github上面。

2，三大組件：

場景 scene  ; 相機 camera ; 渲染器 renderer ;有了這三樣東西才能將物體渲染到網頁中取；

創建這三要素的代碼如下：

var scene = new THREE.Scene();  // 場景
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);// 透視相機
var renderer = new THREE.WebGLRenderer();   // 渲染器
renderer.setSize(window.innerWidth, window.innerHeight);    // 設置渲染器的大小爲窗口的內寬度，也就是內容區的寬度
document.body.appendChild(renderer.domElement);

3，場景介紹：在 Three.js中場景就只有一個，用 tHREE來表示，構建一個常見只需啊喲new一個對象就可以了，代碼如下：

var scene = new THREE.Scene() ;  場景是所有物體的容器，想要顯示一個物體，需要將物體放入場景中；

4，相機介紹：相機決定了場景中的哪個角度的物體會顯示出來，場景只有一個，而相機卻有很多個，three.js中的相機有多種，這裏介紹一種透視相機，（參數的含義後面文章介紹）（Perspective ： 透視的）

var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);

5，渲染器介紹：渲染器決定了渲染的結果應該畫在頁面的什麼元素上；並且以怎樣的方式來繪製，這裏使用了 WebGLRenderer 

var renderer = new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);

渲染器renderer的domElement元素，表示渲染器中的畫布，所有的渲染都是畫在domElement上的，所以這裏的appendChild表示將這個畫布domElement掛載body下面；這樣渲染的結果就能夠在頁面中顯示了；

6，添加物體到場景中：

var geometry = new THREE.CubeGeometry(1,1,1); // 繪製一個幾何體（長寬深各爲1）
var material = new THREE.MeshBasicMaterial({color: 0x00ff00});// 設置材質
var cube = new THREE.Mesh(geometry, material); // Mesh是一個構造器，將幾何體和材質結合
scene.add(cube); // 場景中添加構造後的幾何體

(  cube 立方體； Geometry 幾何結構  ，Mesh：網絲，Material：材料)

CubeGeometry(width, height, depth, segmentsWidth, segmentsHeight, segmentsDepth, materials, sides)  ；這是全部參數；上面只用了前三個參數；寬度，高度；深度；

MeshBasicMaterial是一種非常簡單的材質

7，渲染：

renderer.render(scene, camera);

渲染函數的原型如下：

render( scene, camera, renderTarget, forceClear )

各個參數的意義是：

scene：前面定義的場景

camera：前面定義的相機

renderTarget：渲染的目標，默認是渲染到前面定義的render變量中

forceClear：每次繪製之前都將畫布的內容給清除，即使自動清除標誌autoClear爲false，也會清除。

8, 渲染循環：實時渲染和離線渲染；

循環渲染：

function render() {
    cube.rotation.x += 0.1;
    cube.rotation.y += 0.1;
    renderer.render(scene, camera);
    requestAnimationFrame(render);
 // requestAnimationFrame，這個函數就是讓瀏覽器去執行一次參數中的函數
}