目錄
先知：
- 1.1 What is Threejs
- 1.2 Threejs能做什么
- 1.3 Threejs源自何方
- 13.1 下載
- 1.4 剖析源目錄結構
- 1.5 配置你的開發環境
- 1.6 讓引擎飛起來
- 1.7 第一個框架
- 1.8 第二個框架（重構）
- 1.9 轉角遇到結尾
先知：
1、 沿襲頁游戰勝桌游的經驗，Webgl游戲會成為必然趨勢。
2、 WebGL家族中Threejs將盛行。
3、 學會Threejs簡單實例。
1.1 What is Threejs
什么是threejs，很簡單，你將它理解成three + js就可以了。three表示3D的意思，js表示javascript的意思。那么合起來，threejs就是使用javascript來寫3D程序的意思。
Javascript是運行在網頁端的腳本語言，那么毫無疑問Threejs也是運行在瀏覽器上的。
看到這里，也許你就開始有很多疑問了，那么讓我來猜猜你的疑問吧。
疑問：
1、javascript能寫高效率的3D程序嗎？
能。技術在進步，幾年前也許這是不行，寫3D程序，最好是用c++，這樣才能保證效率，但是現在，世界改變了。javascript的計算能力現在是很強的，做3D程序，做服務器都沒有問題。如果你對服務器感興趣，你可以看看nodejs，當然，不是現在。現在，你最好保持熱情，將Threejs學精深，在工作學習上做出更大的成績。
2、javascript不是在瀏覽器上運行的嗎，那怎么能寫3D程序呢？
是的，不錯javascript是在瀏覽器里運行的，但是沒有說3D程序就不能在瀏覽器上運行。
瀏覽器對3D的支持，是一個激動人心的特性，現在，是的，就是現在，你可以寫基於瀏覽器的3D應用了。
提示：
好的3D應用，在騰訊開放平台上，會有一個不錯的收入。騰訊開發平台是通過廣告和訪問量來收費的，你可以寫一個好的3D應用，就能夠掙一些錢了。
1.2 Threejs能做什么
一言以蔽之，它能寫出在瀏覽器上流暢運行的3D程序。
在美的文字，也比不上圖片，所以我們喜歡看美女，而不是美文，嘿嘿。相信讀這篇文章的男性是多於女性的，所以，我不撒謊，美女我也喜歡。
讓我們看一些圖，來領會一下，Threejs能做什么？
這些就是Threejs能做的事情，我向你保證，完成這些事情，會比c++用更少的代碼。而且更容易，更酷。
1.3 Threejs源自何方
它源自github的一個開源項目，發展相當迅速，現在已經發展到r57版了。
13.1 下載
先去下載代碼，它的地址是：
https://github.com/mrdoob/three.js。
如圖所示：
如果你覺得慢，也可以在WebGL中文網網盤下載（http://yunpan.cn/Q5QaHhznwJQbM） 下載。
1.4 剖析源目錄結構
要了解事物的真相，就要解析到它的深處去，我們來看看Threejs的源目錄結果。用解壓軟件解開剛才的源碼包，各個目錄如下所示：
Build目錄：包含兩個文件，three.js和three.min.js。一個已經壓縮，一個沒有壓縮的js文件。
Docs目錄：這里是threejs的幫助文檔，里面是各個函數的api，可惜並沒有詳細的解釋。
Editor目錄：一個類似3D-max的簡單編輯程序，內容很簡單。
Examples目錄：一些很有趣的例子demo，可惜沒有文檔介紹。
Src目錄：源代碼目錄，里面中所有源代碼。
Test目錄：一些測試代碼，基本沒用。
Utils目錄：存放一些腳本，python文件的工具目錄。
.gitignore文件：git工具的過濾規則文件，沒有用。
CONTRIBUTING.md文件：一個怎么報bug，怎么獲得幫助的說明文檔。
LICENSE文件：版權信息。
README.md文件：介紹threejs的一個文件，里面還包含了各個版本的更新內容列表。
1.5 配置你的開發環境
在QQ群里，很多朋友經常問一些關於開發環境的問題，我們在這里回答一下：
1、為什么我的瀏覽器不能運行Threejs？
Threejs本質上是Webgl，如果你的瀏覽器不支持Webgl，那么肯定你就不能完整的運行Threejs。支持Webgl的瀏覽器很多，例如Chrome、FireFox、360安全瀏覽器6.0等，而IE瀏覽器對Webgl標准的支持就不太好。所以我們推薦使用Chrome瀏覽器，你可以在如下地址下載：
https://www.google.com/intl/zh-CN/chrome/browser/
2、javascript用什么工具開發比較好，可以有智能提示？
老實說，並沒有太好的javascript開發工具。我就曾經試過很多種javascript開發工具，例如Dreamweaver、Visual Studio、Zend Studio、Notepad++、Eclipse等。發現都不好用，沒有太好的智能提示，使用起來特別麻煩。直到遇到了WebStorm，才心花怒放，一見鍾情，從此開發javascript再也沒有離開過WebStorm。
在工具的使用上，我走了很多彎路，浪費了很多眼球細胞，所以你就不要在這上面多費時間了，我估計能節約你5天的時間吧。
你可以到百度里去尋找WebStorm，然后下載它，為了給你節省時間，這里提供一個下載地址：
http://www.ddxia.com/view/129861415446916.html
3、各位大俠，Threejs怎么調試啊？
這也是我遇到的一個問得最多的問題。按照一般的思路，在集成開發環境里面就能夠運行調試，所以應該在WebStorm中就能夠運行，但是這里我不推薦這樣，因為配置起來比較麻煩，沒有必要在這里浪費時間。
所以，我們使用Chrome瀏覽器自帶的功能在調試代碼。
為了，讓我們的主線不太長，你可以點擊下面的連接去學習如何調試代碼？
在chrome中調試javascript代碼。
1.6 讓引擎飛起來
Threejs引擎怎么嵌入網頁中，讓它運行起來呢？很簡單，只要html文件中引入three.js文件，就可以了。代碼如下：
這里黑體部分表示引入了three.js文件，這個文件會自己初始化threejs的一些變量和環境。
為了驗證Threejs確實啟動，我們用Chrome瀏覽器打開上面的那個網頁，瀏覽器里面什么都沒有，這時按F12鍵，打開調試窗口，並在Console下輸入THREE.REVISON命令，得到56，這表示現在使用的three.js文件的版本是56。這個過程的主要截圖如下所示：
這樣，只要得到一個結果，就說明Threejs確實運行起來了。實踐永遠出真知，現在就來試一試吧。
題外話：THREE是一個threejs對象，可以狹隘的理解為threejs引擎的抽象。它代表着threejs引擎本身，其中包含引擎的很多常用屬性和方法。例如THREE.VERSION就代碼引擎的版本。