Threejs介紹
我們開發 webgl 主要是使用 threejs 這個庫,因為 webGL太難用,太復雜!但是現代瀏覽器都支持WebGL,這樣我們就不必使用Flash、Java等插件就能在瀏覽器中創建三維圖形。
threejs 它提供-一個很簡單的關于WebGL特性的JavaScript API, 使得用戶不需要詳細地學習webgl ,就能輕松創作出好看的三維圖形樣例。
webgl 原生的 api 是一種非常低級的接口,而且還需要一些數學和圖形學的相關技術。對于沒有相關基礎的人來說,入門真的很難,Three.js將入門的門檻降低了整整的一大截,對WebGL進行封裝,簡化我們創建三維
動畫場景的過程。
微信小游戲跳一跳也是在Three,js的基礎上開發出來的。
Threejs該項目的目的是使用默認的 webgl 渲染器創建一個易于使用,輕量級的3D庫。該庫還在示例中提供了 Canvas2D,SVG和CSS3D渲染器。
https://github.com/mrdoob/three.js
特點
優勢
- Three.js掩蓋了3D渲染的細節:Three.js將WebGL原生API的細節抽象化,將3D場景拆解為網格、材質和光源,即它內置了圖形編程常用的一些對象種類。
- 面向對象:開發者可以使用上層的 JavaScript對象,而不是僅僅調用JavaScript函數。
- 功能非常豐富:Three.js除了封裝了WebGL原始API之外,Three,js還包含了許多實用的內置對象,可以方便地應用于游戲開發、動畫制作、幻燈片制作、高分辨率模型和一些特殊的視覺效果制作。
- 速度很快:Three.is采用了3D圖形最佳實踐,來保證在不失可用性的前提下,保持極高的性能。支持交互:webgl 本身并不提供拾取(picking)功能(即是否知道鼠標正處于某個物體上)。而Three.js則固化了拾取支持,這就使得你可以輕松為你的應用添加交互功能。
- 包含數學庫:Three.is擁有一個強大易用的數學庫,你可以在其中進行矩陣、投影和矢量運算。
- 內置文件格式支持:你可以使用流行的3D建模軟件導出文本格式的文件,然后使用Three.isjs 加載,也可以使用Three.js自己的 json 格式或二進制格式。
- 擴展性很強:為Three.js添加新的特性或進行自定義優化是很容易的事情。如果你需要某個特殊的數據結構,那么只需要封裝到Three,js即可。
痛點
- 官方問的粗糙,對新手不友好
- 國內資源匱乏
- 如果想要開發游戲,threejs 不是游戲引擎,需要二次開發
與Babylon.js對比:
Babylon.JS是最好的 JavaScript.3D游戲引擎,它能創建專業級三維游戲。主要以游戲開發和易用性為主。與Three,js之間的對比:
- Three,js比較全面,而Babylon.js專注于游戲方面。
- Babylon.js提供了對碰撞檢測、場景重力、面向游戲的照相機Three.js 本身不自帶,需要依靠引入插件實現。
- 對于WebGL的封裝,雙方做的各有千秋,Three,js淺一些,好處是易于擴展,易于向更底層學習;Babylon.js深一些,好處是易用擴展難度大一些。
- Three.js的發展是依靠社區推動,出來的比較早,發展比較成熟,Babylon.js是由微軟公司在2013推出,文檔和社區都比較健全,國內還不怎么火。
threejs 在線編輯器:https://threejs.org/editor/