Babylon.js的web專案怎麼整合前端框架?

相信對於現代的前端開發來說，更關心有更好的組織性以及較佳的擴展性和可讀性的modern web，想必很多人都會很關心BJS能不能好好的整合在前端框架中。前面提到很多Babylon.js的功能，不難發現在XR專案中，較多的互動通常需要管理大量的狀態。前端框架可以扮演的是「場景的組織者」和「狀態的管理者」，這有助於保持程式碼的組織性，提高可維護性。

當然一般若只是想用簡單的babylon.js功能，像是展示模型或是小型模型少又單純的專案，直接cdn引入使用也是沒問題的。

Babylon.js提供多種第三方整合的教學，我們以下會以官網教學Babylon.js + External Libraries為主。
其中包含如何整合前端框架，像是React、Vue、 Ionic Angular。以下是分析Babylon.js與框架的整合差異：

1. Babylon.js + React

react-babylonjs的GitHub
react-babylonjs 完整的文件和範例網站

react-babylonjs是目前最主流、整合度最高、資源也最豐富的組合。無論是大型商業專案還是個人學習，這條路徑最平坦、工具最齊全。可以非常自然地使用 React Hooks (useState, useEffect) 或 Redux/Zustand 等工具來驅動 3D 場景的變化。並擁有最多的教學、範例和問題解答。

• 整合方式：react-babylonjs 是一個完整的 React 渲染器 (React Renderer)。這意味著它能完全用 React 的方式來「思考」和「建構」3D 場景。

• 開發方式 (範例)：不需要寫傳統的 Babylon.js 指令式程式碼，而是像寫 HTML 一樣，用 JSX 元件來描述您的 3D 世界。

  jsx
  <Scene>
    <arcRotateCamera name="camera" target={Vector3.Zero()} radius={10} />
    <hemisphericLight name="light" direction={new Vector3(1, 1, 0)} />
    <box name="box" position={new Vector3(0, 1, 0)} />
  </Scene>
  

2. Babylon.js + Vue

這是一個可行的、但社群相對較小的組合。對於 Vue 開發者來說，開發模式很熟悉，且可以利用 Vue 的響應式系統和狀態管理工具（如 Pinia）。官方教學中包含了Vue2的整合和Vue3的整合，但目前還沒有一個專門的文件網站。

• 核心：社群開發的 vue-babylonjs

• 整合方式：這些庫的目標與 React 類似，提供 Vue 元件來對應 Babylon.js 的物件，讓您可以在 Vue 的 <template> 中以宣告式語法來建構場景。

• 開發方式 (範例)：

  <template>
    <Scene>
      <Camera />
      <Light />
      <Mesh type="Box" />
    </Scene>
  </template>
  

3. Babylon.js + Ionic / Angular

是三者中整合最困難、最不常見的組合。

• 整合方式：需要手動進行整合。
• 開發模式 (手動命令)：
  1. 在 Angular 元件的模板中建立一個 <canvas> 元素。
  2. 使用 @ViewChild 取得 canvas 的 DOM 。
  3. 在 ngAfterViewInit 這個生命週期hook中，手動初始化 Babylon.js 的 Engine 和 Scene，然後開始編寫傳統的、指令式的 Babylon.js 程式碼。
  4. 需要自己處理狀態同步，例如透過 Angular 的 Service 和 RxJS 的 Observable 來傳遞數據，然後在訂閱中手動更新 3D 物件的屬性。
  5. 在 ngOnDestroy 中，必須手動呼叫 engine.dispose() 來銷毀引擎。

總結比較表格