好的~在我們了解那麼多前情提要後，終於可以來選library幫助我們開發。
以下列出常被提到用於WebXR的library的比較：
| 特性 / 面向 | Three.js | A-Frame | React Three Fiber (R3F) | Babylon.js |
|---|---|---|---|---|
| 核心理念 | 輕量級 3D 渲染函式庫 | 基於 HTML 的 VR 框架 | React 的 3D 渲染器 | 全功能網頁遊戲引擎 |
| 開發方式 | 用 JavaScript 物件和方法建構場景 | 用類似 HTML 的標籤定義場景 | 用 React 元件 (JSX) 定義場景 | 用 TypeScript /JavaScript 物件和方法建構場景 |
| 效能 | 極高，接近原生 WebGL/WebGPU | 中等，抽象層會帶來一些開銷 | 高，但受 React 渲染週期的影響 | 極高，與 Three.js 相當，有很好的優化 |
| 生態系 | 極其龐大，範例、外掛和社群資源最多 | 良好，有許多社群開發的元件 | 依賴 React 和 Three.js 的生態系 | 非常完整，官方提供所有工具，也有跟各前端框架的整合的官方文件 |
| 限制 | 需要理解 3D 圖形學基礎 | 調整彈性較低 | 需要熟悉 React | API 豐富但需要學習 |
| 物理引擎支援 | 不內建，需手動整合第三方函式庫 (如 cannon-es, rapier, ammo.js)。彈性高，但最繁瑣。 |
不內建，但有豐富的社群元件 (如 aframe-physics-system) 可輕易整合，但彈性低。最易上手。 |
不內建，但有優秀的生態系函式庫 (@react-three/rapier, @react-three/cannon)， |
內建物理引擎插件，無縫支援 Havok, Cannon.js, Ammo.js。功能最完整、整合度最高。 |
| WebGL/WebGPU | WebGL: 成熟。WebGPU: 實驗性。 | WebGL: 穩定。WebGPU: 不直接支援。 | WebGL: 穩定。WebGPU: 實驗性。 | WebGL: 成熟。WebGPU: 支援最完整 |
| 適合誰 | 需要極致彈性和效能的開發者 | 快速原型開發 | 需要完整遊戲引擎功能的開發者, 半官方的react-babylonjs 可以很好的結合React。 |
如果要開發簡單的3D ，Three.js系列是很好的選擇，尤其他已經發布這麼多年，資源相對多很多，一定可以找到剛好合適的。而且WebGPU在實驗性階段，未來也會發布關於WebGPU可以用的解法。甚至如果有legacy要兼顧，Three.js 的確也是個不錯的選擇。相信開發網站久了，或多或少都會有接觸過Three.js ，畢竟以需求面來說，dashboard 時常會以圖表方式來呈現。東西摸過了就有一股熟悉感。
如果需求中有多個物件的狀態互相作用或需要加入物理引擎實現重力、碰撞等，雖然是可以用Three.js加上引入引擎或library來組合成符合需求的樣子。但是Babylon.js 系列在這方面用了很多現代技術和做法，不僅僅是改善developer experience讓加入這些功能變的門檻變低以及好控制，且有系統的管理整個專案。文件也很完整好查閱，還有Babylon.js論壇活耀的在進行討論。現今的潮流下，把WebGPU當做第一公民的Babylon.js 會是我認為的首選。在整合前端框架上，官網中也有教學，甚至react-babylonjs可以說是半官方在為維護的。所以接下來我會來深入介紹babylon.js。
iThome鐵人賽
看影片追技術
看更多
