最近項目需要在web平臺實現三維效果的展示(在網頁繪製三維輪廓、點線面等幾何對象、外部3D模型的顯示)以及基本的三維場景交互(滑鼠事件、縮放平移、視角切換等)。從網上搜集資料找到以下幾個WebGL框架(Three.js、babylon.js),基本能滿足需求。
babylonJs: 是由微軟發布,其官網的介紹是:WebGL. Simple. Powerful. A complete JavaScript framework for building 3D games and experiences with HTML5, WebGL, WebVR and Web Audio。基於WebGL,功能強大易用,用於構建3D遊戲和HTML5、WebGL、WebVR和Web音頻體驗。
Three.js: 由居住在西班牙程式設計師Mr.doob開發的,Three.js以簡單、直觀的方式封裝了3D圖形編程中常用的對象。其官網介紹:The aim of the project is to create an easy to use, lightweight, 3D library with a default WebGL renderer. The library also provides Canvas 2D, SVG and CSS3D renderers in the examples。
babylon.Js 與 Three.js比較:
綜合比較babylon.Js/Three.js 最終選擇了Three.js,首先2個框架的功能基本相似,從功能上來說個人感覺babylon.Js還要強大些,比如模型碰撞檢測、WebVR、模型滑鼠點擊事件(射線拾取方面),另外還支持TypeScript在大型JS項目維護很有優勢。
但考慮到項目需求只是簡單進行3D展示和模型點擊等,另外Three.js完全社區推動,有完整的中文API文檔,國內使用的人比較多,可以百度到的資料和示例也比babylonJs要多的多,所以最終還是選擇了three.js。ThreeJs文檔示例等均可以從github獲取
另外WebGL 3D還有白鷺引擎egret、Layabox、Blend4Web(開源和商業版)等,效果也還不錯,適合不同場景,選擇合適自己的就好。