What is Three.js
什么是threejs,很簡單,你將它理解成three + js就可以了。three表示3D的意思,js表示javascript的意思。那么合起來,three.js就是使用javascript 來寫3D程序的意思。
Javascript是運行在網頁端的腳本語言,那么毫無疑問Three.js也是運行在瀏覽器上的。
1、javascript能寫高效率的3D程序嗎?
能。技術在進步,幾年前也許這是不行,寫3D程序,最好是用c++,這樣才能保證效率,但是現在,世界改變了。javascript的計算能力因為google的V8引 擎得到了迅猛的增強,做3D程序,做服務器都沒有問題。如果你對服務器感興趣,你可以看看nodejs,當然,不是現在。現在,你最好保持熱情,將Three.js學精深,在以后的工作學習中做出 更大的成績。
2、javascript不是在瀏覽器上運行的嗎,那怎么能寫3D程序呢?
是的,不錯javascript是在瀏覽器里運行的,但是沒有說3D程序就不能在瀏覽器上運行。
瀏覽器對3D的支持,是一個激動人心的特性,現在,是的,就是現在,你可以寫基于瀏覽器的3D應用了。
Threejs能做什么
一言以蔽之,它能寫出在瀏覽器上流暢運行的3D程序。
Threejs來源
它源自github的一個開源項目,發展相當迅速,現在已經發展到r73版了
下載代碼,它的地址是: https://github.com/mrdoob/three.js。
剖析源目錄結構
Build目錄:包含兩個文件,three.js 和three.min.js 。這是three.js最終被引用的文件。一個已經壓縮,一個沒有壓縮的js文件。
Docs目錄:這里是three.js的幫助文檔,里面是各個函數的api,可惜并沒有詳細的解釋。試圖用這些文檔來學會three.js是不可能的。
Editor目錄:一個類似3D-max的簡單編輯程序,它能創建一些三維物體。
Examples目錄:一些很有趣的例子demo,可惜沒有文檔介紹。對圖像學理解不深入的同學,學習成本非常高。
Src目錄:源代碼目錄,里面是所有源代碼。
Test目錄:一些測試代碼,基本沒用。
Utils目錄:存放一些腳本,python文件的工具目錄。例如將3D-Max格式的模型轉換為three.js特有的json模型。
.gitignore文件:git工具的過濾規則文件,沒有用。
CONTRIBUTING.md文件:一個怎么報bug,怎么獲得幫助的說明文檔。
LICENSE文件:版權信息。
README.md文件:介紹three.js的一個文件,里面還包含了各個版本的更新內容列表。
配置你的開發環境
1、為什么我的瀏覽器不能運行Three.js?
Three.js本質上是Webgl,如果你的瀏覽器不支持Webgl,那么肯定你就不能完整的運行Three.js。支持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 同時,你也可以在我們的網盤直接下載:http://pan.baidu.com/s/1o6JQX9S和 http://pan.baidu.com/s/1tRb4a 下載
3、各位大俠,Three.js怎么調試啊?
這也是我遇到的一個問得最多的問題。按照一般的思路,在集成開發環境里面就能夠運行調試,所以應該在WebStorm中就能夠調試,但是這里我不推薦這樣 ,因為配置起來比較麻煩,沒有必要在這里浪費時間。 所以,我們使用Chrome瀏覽器自帶的功能調試代碼。 為了讓我們的本節課的主線不太長,你可以點擊下面的鏈接去學習如何調試代碼? 在chrome中調試javascript代碼。 http://zhangyongbluesky.blog.163.com/blog/static/1831941620113155739840/
第一個例子
Three.js引擎怎么嵌入網頁中,讓它運行起來呢?很簡單,只要html文件中引入three.js文件就可以了。引入了three.js文件后,這個文件會自己初始化threejs的一些變量和環境。如果文件無法下載,可能是無法訪問github的原因,你可以下載初級課程的源碼,并更改一下這個js引用地址就可以了。
為了驗證Threejs確實啟動,我們用Chrome瀏覽器打開上面的那個網頁,瀏覽器里面什么都沒有,這時按F12鍵,打開調試窗口,并在Console下輸入 THREE.REVISION命令,得到73,這表示現在使用的three.js文件的版本是73。這樣,就說明Three.js確實運行起來了。