一、架構圖
二、Three.js、ThingJS、Unity3D
調研reactNative加載3D效果
一、理論介紹
OpenGL 是用於計算機圖形繪制的編程接口標准,支持不同平台上的圖形繪制。
OpenGL ES 針對於嵌入式設備(是一種嵌入機械或電氣系統內部、具有專一功能和實時計算性能的計算機系統:如手機游戲機等)圖形開發的標准OpenGL ES。
WebGL 是一項用來 在網頁上繪制和渲染復雜三維圖形(3D圖形),並允許用戶與之交互的技術。 隨着個人計算機和瀏覽器的性能越來越強,我們能夠在Web上創建越來越精美、越來越復雜的3D圖形。
OpenGL ES 可以說是 OpenGL 為了滿足嵌入式設備需求而開發一個特殊版本,是其一個子集;而 WebGL,是為了網頁渲染效果,將 JavaScript 和 OpenGL ES 2.0 結合在一起,通過增加 OpenGL ES 2.0 的一個JavaScript綁定得到
Three.js 是一款運行在瀏覽器中的 3D 引擎,它是對webGL的封裝,你可以用它創建各種三維場景,包括了攝影機、光影、材質等各種對象。
react-three-fiber是Three.js進一步封裝用於react.js前端架構。
二、RN加載3D模型
方案一:
在rn中直接編寫代碼加載3D模型
實現方案
1、通過expo-three組件庫去加載3D模型
2、通過react-three-fiber組件庫去加載3D模型
結果:都不能很好的支持
1、最新的版本快速開始都不能運行
2、版本回退可以顯示,但有一些事件不能很好的支持
https://github.com/expo/expo-three/issues/257
https://github.com/pmndrs/react-three-fiber/issues/2171
方案二:
rn通過webview去加載3D。 可行✅
參考:
https://zhuanlan.zhihu.com/p/216100434
https://www.cnblogs.com/thingjs/p/13925390.html