What is Three.js

什么是threejs，很簡(jiǎn)單，你將它理解成three + js就可以了。three表示3D的意思，js表示javascript的意思。那么合起來(lái)，three.js就是使用javascript 來(lái)寫(xiě)3D程序的意思。

Javascript是運(yùn)行在網(wǎng)頁(yè)端的腳本語(yǔ)言，那么毫無(wú)疑問(wèn)Three.js也是運(yùn)行在瀏覽器上的。

1、javascript能寫(xiě)高效率的3D程序嗎？

能。技術(shù)在進(jìn)步，幾年前也許這是不行，寫(xiě)3D程序，最好是用c++，這樣才能保證效率，但是現(xiàn)在，世界改變了。javascript的計(jì)算能力因?yàn)間oogle的V8引 擎得到了迅猛的增強(qiáng)，做3D程序，做服務(wù)器都沒(méi)有問(wèn)題。如果你對(duì)服務(wù)器感興趣，你可以看看nodejs，當(dāng)然，不是現(xiàn)在?，F(xiàn)在，你最好保持熱情，將Three.js學(xué)精深，在以后的工作學(xué)習(xí)中做出 更大的成績(jī)。

2、javascript不是在瀏覽器上運(yùn)行的嗎，那怎么能寫(xiě)3D程序呢？

是的，不錯(cuò)javascript是在瀏覽器里運(yùn)行的，但是沒(méi)有說(shuō)3D程序就不能在瀏覽器上運(yùn)行。

瀏覽器對(duì)3D的支持，是一個(gè)激動(dòng)人心的特性，現(xiàn)在，是的，就是現(xiàn)在，你可以寫(xiě)基于瀏覽器的3D應(yīng)用了。

Threejs能做什么

一言以蔽之，它能寫(xiě)出在瀏覽器上流暢運(yùn)行的3D程序。

Threejs來(lái)源

它源自github的一個(gè)開(kāi)源項(xiàng)目，發(fā)展相當(dāng)迅速，現(xiàn)在已經(jīng)發(fā)展到r73版了

下載代碼，它的地址是： https://github.com/mrdoob/three.js。

剖析源目錄結(jié)構(gòu)

Build目錄：包含兩個(gè)文件，three.js 和three.min.js 。這是three.js最終被引用的文件。一個(gè)已經(jīng)壓縮，一個(gè)沒(méi)有壓縮的js文件。

Docs目錄：這里是three.js的幫助文檔，里面是各個(gè)函數(shù)的api，可惜并沒(méi)有詳細(xì)的解釋。試圖用這些文檔來(lái)學(xué)會(huì)three.js是不可能的。

Editor目錄：一個(gè)類(lèi)似3D-max的簡(jiǎn)單編輯程序，它能創(chuàng)建一些三維物體。

Examples目錄：一些很有趣的例子demo，可惜沒(méi)有文檔介紹。對(duì)圖像學(xué)理解不深入的同學(xué)，學(xué)習(xí)成本非常高。

Src目錄：源代碼目錄，里面是所有源代碼。

Test目錄：一些測(cè)試代碼，基本沒(méi)用。

Utils目錄：存放一些腳本，python文件的工具目錄。例如將3D-Max格式的模型轉(zhuǎn)換為three.js特有的json模型。

.gitignore文件：git工具的過(guò)濾規(guī)則文件，沒(méi)有用。

CONTRIBUTING.md文件：一個(gè)怎么報(bào)bug，怎么獲得幫助的說(shuō)明文檔。

LICENSE文件：版權(quán)信息。

README.md文件：介紹three.js的一個(gè)文件，里面還包含了各個(gè)版本的更新內(nèi)容列表。

配置你的開(kāi)發(fā)環(huán)境

1、為什么我的瀏覽器不能運(yùn)行Three.js？

Three.js本質(zhì)上是Webgl，如果你的瀏覽器不支持Webgl，那么肯定你就不能完整的運(yùn)行Three.js。支持Webgl的瀏覽器很多，例如Chrome、FireFox、360安 全瀏覽器6.0等，而IE瀏覽器對(duì)Webgl標(biāo)準(zhǔn)的支持就不太好。所以我們推薦使用Chrome瀏覽器，你可以在如下地址下載： https://www.google.com/intl/zh-CN/chrome/browser/

2、javascript用什么工具開(kāi)發(fā)比較好，可以有智能提示？

老實(shí)說(shuō)，并沒(méi)有太好的javascript開(kāi)發(fā)工具。我們?cè)?jīng)試過(guò)很多種javascript開(kāi)發(fā)工具，例如Dreamweaver、Visual Studio、Zend Studio、Notepad++、 Eclipse等。發(fā)現(xiàn)都不好用，沒(méi)有太好的智能提示，使用起來(lái)特別麻煩。直到遇到了WebStorm，才心花怒放，一見(jiàn)鐘情，從此開(kāi)發(fā)javascript再也沒(méi)有離開(kāi)過(guò)WebStorm。 在工具的使用上，我走了很多彎路，浪費(fèi)了很多眼球細(xì)胞，所以你就不要在這上面多費(fèi)時(shí)間了，我估計(jì)能節(jié)約你5天的時(shí)間吧。 你可以到百度里去尋找WebStorm，然后下載它，為了給你節(jié)省時(shí)間，這里提供一個(gè)下載地址： http://www.ddxia.com/view/129861415446916.html 同時(shí)，你也可以在我們的網(wǎng)盤(pán)直接下載：http://pan.baidu.com/s/1o6JQX9S和 http://pan.baidu.com/s/1tRb4a 下載

3、各位大俠，Three.js怎么調(diào)試啊？

這也是我遇到的一個(gè)問(wèn)得最多的問(wèn)題。按照一般的思路，在集成開(kāi)發(fā)環(huán)境里面就能夠運(yùn)行調(diào)試，所以應(yīng)該在WebStorm中就能夠調(diào)試，但是這里我不推薦這樣 ，因?yàn)榕渲闷饋?lái)比較麻煩，沒(méi)有必要在這里浪費(fèi)時(shí)間。 所以，我們使用Chrome瀏覽器自帶的功能調(diào)試代碼。 為了讓我們的本節(jié)課的主線(xiàn)不太長(zhǎng)，你可以點(diǎn)擊下面的鏈接去學(xué)習(xí)如何調(diào)試代碼？ 在chrome中調(diào)試javascript代碼。 http://zhangyongbluesky.blog.163.com/blog/static/1831941620113155739840/

第一個(gè)例子

Three.js引擎怎么嵌入網(wǎng)頁(yè)中，讓它運(yùn)行起來(lái)呢？很簡(jiǎn)單，只要html文件中引入three.js文件就可以了。引入了three.js文件后，這個(gè)文件會(huì)自己初始化threejs的一些變量和環(huán)境。如果文件無(wú)法下載，可能是無(wú)法訪(fǎng)問(wèn)github的原因，你可以下載初級(jí)課程的源碼，并更改一下這個(gè)js引用地址就可以了。

為了驗(yàn)證Threejs確實(shí)啟動(dòng)，我們用Chrome瀏覽器打開(kāi)上面的那個(gè)網(wǎng)頁(yè)，瀏覽器里面什么都沒(méi)有，這時(shí)按F12鍵，打開(kāi)調(diào)試窗口，并在Console下輸入 THREE.REVISION命令，得到73，這表示現(xiàn)在使用的three.js文件的版本是73。這樣，就說(shuō)明Three.js確實(shí)運(yùn)行起來(lái)了。