網頁3D展示-WebGL開源框架的選擇

2021-01-09 IT點滴

最近項目需要在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獲取

github three.js代碼
three.js api文 可以中英文切換)
three.js 示例

另外WebGL 3D還有白鷺引擎egret、Layabox、Blend4Web(開源和商業版)等,效果也還不錯,適合不同場景,選擇合適自己的就好。

相關焦點

  • 網頁三維地圖展示 基於開源WebGL-GIS初探
    最近需要在web平臺實現三維地圖展示,以及在三維地圖進行建築模型的展示、漫遊等效果。 從前期了解到的web gis開源框架,基本鎖定在以下2個框架openlayers、cesium。openlayers:openlayers是一個基於BSD開源協議的高性能JavaScript庫,用於在 Web 上創建2D地圖。可以從Google Maps、Yahoo、 Map、微軟bing地圖等來源加載地圖瓦片矢量數據標記。cesium:Cesium 是AGI公司基於Apache開源的WebGL的地圖引擎,Cesium支持2D、2.5D、3D的形式進行地圖展示。
  • WebGL 入門 – WebGL框架
    但是,也有很多人基於WebGL開發出了各種開源框架,現在,我們就來看看目前有哪些框架能夠為我們所用。Three.js Three.js 是一個開源的JavaScript 3D引擎,該項目的目標是創建一個低複雜、輕量級的3D庫,用最簡單、直觀的方式封裝WebGL中的常用方法。
  • 分享基於vue.js和three.js的開源3D模型展示引擎
    模型展示變得越來越重要。今天我將給大家介紹基於vue.js和three.js的開源3D模型展示引擎vue-3d-model。vue-3d-model項目介紹vue-3d-model是一個在Three.js基礎上構建的Web端3D應用的框架。它提供了一個展示三維模型的Vue組件,支持模型操作和模型點擊事件,能自動縮放模型到合適大小並校正偏移,支持多種格式的模型。
  • 盤點2020JavaScript遊戲框架
    pixi是一款免費開源的遊戲引擎,它最大的特點就是渲染速度快,此外它還有著靈活的api,可以非常方便地開發出優雅的遊戲。它支持在webgl和canvas之間無縫切換,不僅可以讓遊戲支持的更廣泛,同時也讓遊戲得到最佳體驗。
  • WebGL 3D程序開發
    WebGL全稱Web Graphics Library,是一項新的Web 3D圖形標準,一種3D繪圖協議,也是HTML5大家庭中的一員,一項用來在網頁上繪製和渲染複雜三維圖形(3D圖形),並允許用戶與之交互的技術。
  • ThingJS:基於WebGL的3D技術在網頁中的運用
    3D加速渲染,這樣Web開發人員可以藉助系統顯卡在瀏覽器裡更流暢地展示3D場景和模型。利用WebGL進行繪圖的流程如下所示:由此得知,原生 WebGL進行3D網頁製作,其過程非常繁瑣,開發難度很多,所使用的開發概念非常底層,嚴重影響WebGL的開發效率。
  • HTML5+WebGL:構建3D網頁新世界
    今年下半年, HTML5 和 WebGL 變成極熱門詞語,3D 網頁來勢洶洶。主流的瀏覽器 Google Chrome 以及 Mozilla Firefox 均致力於 HTML5+WebGL 的 3D 網頁技術方案的發展,各種實驗性項目層出不窮。這是一個轉折時期——網際網路最重要的門戶瀏覽器正在從主流支持 2D 平面網頁內容到原生的支持 3D物體形象的展示。
  • 使用WebGL 2.0更快地渲染 3D
    WebGL 2.0 轉換反饋演示:github.com/toji/webgl2-particles-2要開始使用 WebGL 2.0,請查閱 WebGL 2.0 樣例包:github.com/WebGLSamples/WebGL2Samples其中包含了小巧的自包含樣例,展示了大多數的新 API 功能。
  • 開源框架 A-Frame:只要增加一行代碼就可以製作VR網頁
    近日,Mozilla旗下的VR研究團隊MozVR推出開源框架 A-Frame,幫助開發者更容易完成VR網頁的製作,而無需花時間學習複雜的3D繪圖標準WebGL。具體來說,開發者只要增加以下這行代碼,然後通過使用熟悉的HTML代碼,便可以集成VR網頁的基本組件。如下:<script src="https://aframe.io/releases/latest/aframe.min.js"></script>根據 MozVR 團隊的介紹,A-Frame框架在WebGL協議下運行。
  • 圖形學基礎——WebGL 基礎(上)
    webGL 程序的結構在HTML中,動態網頁包含HTML和JavaScript兩種語言,引入webgl後,還需要加入著色器語言GLSLES。我們是通過對 GPU 進行編程,進行渲染圖形:對於 GPU 編程主要從下面兩個方面進行編程:webgl:API glTranslate/glRotatefGLSL:頂點著色器 - gl_Position 和 片元著色器 - gl_FragColor#webgl 渲染管線JavaScript通過顯存的Buffer來實現頂點著色器與片元著色器的數據傳遞
  • webgl 迷宮項目開發總結
    整體網頁需要接收2個參數:N和M, 迷宮的大小為N*M。第二部分是交互操作Guide。在迷宮入口設置一個老鼠圖片,然後可以通過左右鍵調整老鼠的朝向,方向鍵上來前進一步。收穫webgl 三個js庫webgl-utils.jswebgl-debug.jscuon-utils.js圖片加載var img = new Image();img.src = '.
  • ImagePy——UI界面支持開放插件的Python開源圖像處理框架
    在 github:https://github.com/Image-Py/imagepy 上,不僅有關於這款圖像處理軟體的詳細介紹,還有一些使用示例,雷鋒網 AI 科技評論接下來將詳細介紹這一開源圖像處理框架。
  • 一鍵生成3d城市,免費實現3d地圖
    精美3d城市如何一鍵生成?擁有gis數據如何變現?智慧城市搭建需要哪些工具或者知識?這些ThingJS都能為您解決!ThingJS專們製作了一個功能,用以一鍵生成城市模型,不但能夠一鍵生成選擇的區域的城市模型,還能夠根據上傳的gis數據生成對應區域的城市模型!
  • 10個頂級的CSS UI開源框架
    作為開發者,我們需要了解一些 寶貴的CSS UI開源框架資源,它們可以幫助我們更快更好地實現一些現代化的界面,包括一些行動裝置的網頁界面風格設計。本文分享了10個頂級的CSS UI開源框架,有幾個確實不錯,一起來看看。
  • 三大最棒的開源Web開發模板或框架
    如今,很少有程式設計師從頭開始設計web網頁了。大多數程式設計師都使用預製模板設計,自定義適合其內容管理系統的選擇。即使是構建複雜Web應用程式的程式設計師也依賴於模板庫。  但是,如果要為內容管理系統或靜態站點生成器構建新模板,該怎麼辦?如果想使用單個目標網頁或少量不太可能經常更改的靜態網頁構建簡單網站,該怎麼辦?
  • 基於WebGL的3D可視化告警系統關鍵技術解析 ThingJS
    #三維可視化# #3D開發#WebGL 3D技術新一代3D框架-ThingJS3D可視化告警系統案例基於ThingJS的通用架構設計WebGL 3D技術WebGL是一種在網頁瀏覽器中渲染3D圖形的 JavaScript API,無需加裝插件,只需編寫網頁代碼即可實現3D圖形的展示。
  • 開源WEB統一開發框架項目期待您的加盟
    源WEB統一開發框架是針對中等規模的交互式網站產品的付費型開源項目;目的是為了適應目前異地合作開發web項目的需要,以及順應未來分散式工作方法的方向。
  • 索愛宣布將 Android 4.0 上的 WebGL 後端實現開源
    目前,作為下一步跟進,索愛正在將這一支持延續到Android 4.0上,而且是完全開源的。1月25日,索愛高級軟體架構師Anders Edenbrandt在開發者頻道的網站上對此進行了詳細的說明。所以,為了對此作出積極的回應,也為了感謝開發者社區對索愛長期以來持續的支持,以及像HTML5和WebGL這樣開放的標準,還有索愛那顆透明的 心,索愛決定將Android 4.0系統上的WebGL的後端實現開源。任何對此有興趣的人都可以使用這些代碼,當然也希望以此為基礎能有更多的人不斷貢獻新的代碼。
  • 預看未來,6款AR/VR開源庫優秀大放送
    接下來,推薦幾款優秀的 AR/VR 開源庫。   1、AR.js 它適用於任何帶有 webgl 和 webrtc 的手機,且運行速度非常快,在手機上也能高效運行,包括 Android、IOS 和 Windows phone 。   2、Lullaby
  • 推薦10 款 CSS 框架,網頁設計就是這麼簡單
    程序開發人員和網頁設計人員掐架的事情常有聽說,程式設計師們總是為自己設計不出來漂亮的網頁而糾結。