最近因爲課題的原因要學習一下three.js，說實話，以前並沒有接觸過3D圖形的編程，直接去看three.js的時候還是有點頭皮發麻的，想着3D圖形編程一定是難的要死要死的，可是沒想到各位大神把底層圖形封裝的這麼好，連我這種js新手加圖形學白癡也能很好的閱讀編寫three.js的實例代碼。
既然要學習一樣新的東西，最好稍微瞭解一下它的歷史淵源，這樣不僅在學習的時候更加穩健，也能讓你在跟大牛交流的時候不至於一頭霧水。
three.js是什麼，即使在three.js的github項目頁上頁只有短短的幾句介紹，three.js是一個JavaScript編寫的3D圖形庫，提供了<canvas>,<svg>,CSS3D和WebGL的渲染器。
three.js是託管在github上的一個開源項目，時至今日（2015-12-15）已經有519名代碼貢獻者。雖然在three.js的網站上提供了很多的基於three.js開發的實例，然而three.js的文檔實在是不友好，只是簡單的一個入門例子然後就是API，所以要學習three.js還是要去讀官方實例的源代碼，並且自己逐字逐句的來敲代碼，做註釋。
要使用three,js，首先要在你的html頁面中引入它，通常我們只是使用不做調試的話直接引用three.min.js即可，引用three.js只需要一個簡單的<script> 標籤。
<script src="/you/path/to/three.min.js"><script>在網頁中引入three.js後你可以在網頁控制檯輸入THREE.REVISION來查看版本信息，這裏推薦chrome瀏覽器。
THREE.REVISION
"73"我使用的是73版本的three.js
現在我們可以訪問到THREE下的所有方法和變量了。
下面我們先來建立一個HTML標籤頁
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>My first three.js app</title>
<script type="text/javascript" src="you/path/to/three.min.js"></script>
</head>
<body id="canvas-frame">
<script type="text/javascript">
// 在這裏寫js代碼
</script>
</body>
</html>一個典型的three.js應用至少要包含渲染器（renderer）、場景（scene）、和相機（camera）三個組件。接下來就讓我們來初始化這些組件。
<script type="text/javascript">
var scene, renderer, camera;
init();
function init(){
// 初始化一個場景
scene = new THREE.Scene();
// 初始化一個渲染器，這裏選擇了WebGL渲染器,並且開啓可抗鋸齒效果
renderer = new THREE.WebGLRenderer({antialias: true});
// 設置渲染器的款和高，這裏由於要canvas佔據整個屏幕，所以使用了窗口尺寸
renderer.setSize(window.innerWidth, window.innerHeight);
// 下面一行代碼將生成一個canvas標籤插入到body中
document.body.appendChild(renderer.domElement);
/×
初始化一個相機,選取的是透視相機
相機的四個參數分別是：
視角or視場： 類似於人眼可以看到90-110度的視場，相機也有一個類似的參數設置，關於這個數值的設定也是有很多的博客文章可以去查看
寬高比：定義了你看到的屏幕的比例
近端和遠端：定義了相機可以看到物體的距離，超過這個距離渲染器就不會對物體進行渲染了
×/
camera = new THREE.PresectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
// 設置相機位置爲z軸偏移量爲5
camera.position.set(0,0,5);
// 不要忘記把相機添加到場景中去
scene.add(camera);
// 代碼佔位...
};
</script>現在場景有了，相機有了，渲染器也有了，現在要做的就是在場景中添加自己的景色，說白了，就是在場景中放個物體，然後我們就開始盯着它看呀看呀看
那麼，是時候將物品放進去了。
我們創建物體的代碼依舊是在我們的init函數中進行的，創建一個物體分爲三個步驟，首先創建一個幾何體，然後選擇構建表面的材質，最後將幾何體參數和材質參數傳遞給三維網格系統，three.js會自動幫你生成你想要的形狀。一下是代碼實例：
<script>
function init(){
// 接上段代碼
var geometry, material, mseh;
// 創建一個盒子幾何體
geometry = new THREE.BoxGeometry(1,1,1);
// 基本材質渲染，設置顏色，啓用線框
material = new THREE.MeshBasicMarterial({color: 0xff0000, wireframe: true});
// 生成物體
mesh = new THREE.Mesh(geometry, material);
// 記得把物體添加到場景中
scene.add(mesh);
};
// 代碼佔位
</script>現在所有的準備工作都已經經行完畢，接下來要做的就是用渲染器把剛剛做好的東西交給瀏覽器去渲染。接下來定義一個新的函數
function animate(){
requestAnimationFrame(animate);
// 代碼佔位
renderer.render(scene, camera);
};寫完這個函數之後，在body標籤中加入onload時間，即可在網頁中看到結果。
<body id="canvas-frame" onload="animate()">
<script>
//我們的代碼
</script>
</body>現在我們在瀏覽器中可以看到如下樣子
這是一個靜止的線條化的立方體，接下來要做的就是讓它動起來！！
讓一個物體動起來可以採用兩種方式，一種是讓物體自己運動，還有一種就是我們的眼睛運動，在這裏也就是相機運動，或者可以相機跟物體都動-_-
//修改一下animate函數，讓立方體動起來
function animate(){
requestAnimationFrame(animate);
// 物體旋轉
mesh.rotation.x += 0.1;
mesh.rotation.y += 0.1;
// 相機移動
camera.position.y += 0.01;
renderer.render(scene, camera);
};最後在瀏覽器中我們可以看到立方體一邊旋轉一邊下落的動畫效果。
