- Threejs到底是什麼?
- 學習Threejs需要提前瞭解什麼?
- 3D方面知識以及術語解釋
- 看段示例程式碼
注意下述內容是作為筆者的視角下很短時間內所學到知識點的總結,如有遺漏(不解處)及時指出 筆者做修復。(Threejs使用經驗是接過外邊的專案.. - -，)
threejs 到底是什麼?
The aim of the project is to create an easy to use, lightweight, cross-browser, general purpose 3D library. The current builds only include a WebGL renderer but WebGPU (experimental), SVG and CSS3D renderers are also available in the examples.
通俗介紹來說就是包含WebGL 渲染器的3D庫。簡單進行一個我的認知評價(我看了部分原始碼和示例):
優點:
- 物件導向程式設計實現,這樣來說對於入門來說非常簡單 以及後續擴充工作的簡化,便捷化(OOP物件導向程式設計主要功能就是繼承,這樣想擴充直接基於基礎類進行一個繼承然後擴充就好了。)
- 完整三維特性：PBR、風格化渲染、動畫、粒子... 基本上上三維程式常用的功能特性都有支援。
- 底層(原始碼)功能擴充非常簡單, 上面提到了OOP的實現, 以至於底層的擴充不需要去了解它細節部分的實現邏輯。只需要繼承一個基礎類然後擴充就好啦。
- 生態全,行業認可度高 WebGL封裝完善.... 挺多的
缺點:
- 效能 大部分原因還是WebGL效能方面問題,其次還有就是封裝問題 threejs目的是作為渲染器 那麼在你特殊場景的無用模組的佔用資源效能開銷...
- 沒啥大的缺點(我現在的場景沒遇到..有的可以評論), 當然你不能說載入非常大的模型, 或者說要求和遊戲引擎去比資源管理啊 這些完備功能。
學習Threejs需要提前瞭解什麼?
如果你是一個前端er, 好像沒什麼需要準備的。因為three本身上手就蠻簡單的。況且你可是一個前端工程師~!
不抖機靈了。進入正題:
- Javascript/typescript
- WebGL相關概念/簡單使用(在three程式設計中這方面封裝特別好,以至於感知太差 不過最好還是瞭解學習一下)
- 3D相關理論知識學習
- 數學 簡單線代/矩陣的知識 不需要特別深奧回顧一下
- 至於WebGPU SVG什麼的作為興趣去學。(在three中還屬於實踐)
3D方面知識以及術語解釋
在threejs程式設計中含有的內容:
- 場景(Scene)：是物體、光源等元素的容器，可以配合 chrome 外掛使用，丟擲 window.scene即可實時調整 obj 的資訊和材質資訊。
- 相機（Camera）：場景中的相機，代替人眼去觀察，場景中只能新增一個，一般常用的是透視相機PerspectiveCamera(透視相當於人眼模式) 其他還包含正交,陣列等等。。
- 物體物件（Mesh）：包括二維物體（點、線、面）、三維物體，模型等等
- 光源（Light）：場景中的光照，如果不新增光照場景將會是一片漆黑，包括全域性光、平行光、點光源等
- 渲染器（Renderer）:場景的渲染方式，如webGL\canvas2D\Css3D。
- 控制器(Control): 可通過鍵盤、滑鼠控制相機的移動
- 其他模組:
載入器 燈光 材質 數學庫....
看段示例程式碼
瞭解了上面的概念,學習threejs官網的示例程式碼就很簡單了。按著3D模組去看。場景======渲染======相機===== 物體物件 | 控制器 | 燈光 | 載入器====== 效果圖。 so easy~
最後
視覺化相關的架構設計,原始碼學習，日常開發。我會逐步進行深入分享。如果對你有幫助請關注我後續的內容。有需要的同學可以加一下我的聯絡方式(在我的主頁,拉你進群聊)。