Three.js 學習歷程與總結

做慣了2D的平面web設計,我突然對3D技術產生了濃厚的技術,不僅僅是因為那炫酷的效果,更是因為它用途的廣泛性,隨著軟件編程的社會分工越來越細化,以后3D開發也有可能會從前端的大范疇里獨立出來,作為一個很吃香的職業.這也不是不可能的.誠然,3D必然比web設計復雜,很多,多了一個維度的嘛.有人說,我2D開發都在做不好,怎么去做3D的開發那,但我想問你一句,你炒菜不行,就能代表你飯煮的也很差嗎? 我看未必吧...... 而且隨著信息技術的深入,一些傳統行業的改造在使用現有的web技術以及顯得很吃力了,必然工業組裝的可視化,物聯網.在線模型編輯....隨著信息技術不斷對傳統行業的滲入,那么必然會有一場對現有web技術的考驗,是故步自封,還是從現在開始迎接改變...勢必會成為web前端開發的分水嶺.未雨綢繆,現在和我一起開始學習3D技術吧.

初學Three.js沒有啥好方法,因為這東西不是學幾個api一時半會就能做出很符合實際使用的案例.所以如果你抱著像學jquery那樣學習Three.js 必然會遭受大挫.甚至一蹶不振.下面介紹一下我學習Three.js的歷程,已供各位參考.

首先,github倉庫上下載最新的版本.使用vscode編輯器打開.了解這個庫都包含哪些內容

以上就是從github下載的庫,目錄如上.

其中build是用于庫編譯的目錄,用于生產,沒有注釋.

docs是Three.js的文檔,

editor是一個官方的3D編輯器,運用于web瀏覽器

examples目錄包含了很多案例,都是開發者提交到官方的,被收錄的,我希望有一天我的 案例也能出現在這里,供人參考,學習

files目錄是案例用到的一些文件,圖片,字體,svg,css....

src目錄存放的就是Three.js的模塊,分散在各個文件夾中,使用typeScript編寫,最后在打包到build以供使用.閱讀源碼其實閱讀 的就是src中的代碼.有注釋,結構清晰,分層明確. 編譯使用npm run build. 編譯是使用到的是rollup這個庫

test是一些測試案例.可以使用 npm run test 來運行測試用例

"scripts": {

"build": "rollup -c",

"build-test": "rollup -c test/rollup.unit.config.js",

"build-closure": "rollup -c && google-closure-compiler --warning_level=VERBOSE --jscomp_off=globalThis --jscomp_off=checkTypes --externs utils/build/externs.js --language_in=ECMASCRIPT5_STRICT --js build/three.js --js_output_file build/three.min.js",

"build-examples": "rollup -c rollup-examples.config.js",

"dev": "concurrently --names \"ROLLUP,HTTP\" -c \"bgBlue.bold,bgGreen.bold\" \"rollup -c -w -m inline\" \"http-server -c-1 -p 8080\"",

"dev-test": "concurrently --names \"ROLLUP,ROLLUPTEST,HTTP\" -c \"bgBlue.bold,bgRed.bold,bgGreen.bold\" \"rollup -c -w -m inline\" \"rollup -c test/rollup.unit.config.js -w -m inline\" \"http-server -p 8080\"",

"start": "npm run dev",

"lint": "eslint src --ext js --ext ts",

"test": "npm run build-test && qunit test/unit/three.source.unit.js",

"travis": "npm run lint && npm test"

},

"devDependencies": {

"concurrently": "^4.1.0",

"eslint": "^5.16.0",

"eslint-config-mdcs": "^4.2.3",

"eslint-plugin-html": "^5.0.3",

"@typescript-eslint/parser": "^1.9.0",

"@typescript-eslint/eslint-plugin": "^1.9.0",

"typescript": "^3.4.5",

"google-closure-compiler": "20190415.0.0",

"http-server": "^0.11.1",

"qunit": "^2.9.2",

"rollup": "^1.10.1"

}

如果對編譯過程和具體使用的庫感興趣,可以再npm官網搜索devDependencies下的每一個庫,了解每個庫的作用,看看在哪里引用,又是怎么使用的.

剩下的文件就是一些,git,eslint,rollup...的配置這里不做一一解釋.

了解了文件目錄及其所包含的內容后,就會有個大概的輪廓

接下來如果有能力就去直接看src下的文件 了解大致模塊,主要方法 這是對于有你能的人來說的.

那么源碼理解能力弱一點的同學應該如何去學習那. 看文檔和Demo吧

從github下載的文件里也是包含文檔的,就是docs目錄,可以將其整個目錄放到web服務器中,進行訪問,由于國外的地址一直很慢,我就把文檔在我的服務器部署了一個,地址為國內Three.js文檔(建議保存書簽,以備查看)

學習思路就是看文檔和demo

具體來做就是

文檔大致瀏覽一遍,兩遍,三遍,四五六七遍,頭幾篇看文檔不需要逐字逐句去看.那么多文檔,你也不能一下子記完.先去了解一些基本概念,比如攝像機,渲染器.點,光線....

文檔看了幾遍后,就去看demo了,example文件夾里有很多優秀的開發者提交的案例.能夠幫助你快速了解api的使用,以及效果的預覽.這里是官方的案例鏈接

如下圖

demo也是 分門別類的. 動畫,攝像機,裁剪,效果,多立方.......

研讀一個demo的代碼要比研讀庫的源碼的要求低的多,

閱讀demo代碼時,不一定要句句理解透徹,但涉及到的每個api,它的參數,以及作用都要掌握住,要不然你看demo就是沒有任何收獲的.

舉個例子,第一個例子草原上隨風飄蕩的白布?它的右上角有一塊合適區域, 看到這里,我們既要向,這個東西是干嘛用的,

在胡亂操作后,我們發現這個黑色區域是用來控制是否有風,是否顯示球,是否將白布調制成一個支點. 知道了作用之后我們就要去尋找相應的代碼, 在尋找代碼的過程中我們要注意頁面內的所有

<fieldset id="42aac"></fieldset>

<tfoot id="42aac"></tfoot>