在3D開發中，Babylon.js的場景加載器(Scene Loader)是加載各種3D模型格式的核心工具。本文將詳細介紹如何高效使用Scene Loader加載多種格式的3D模型文件。

一、基本概念與支持格式

要加載特定類型的文件，Babylon.js需要先注冊對應的文件類型插件。目前官方支持的格式包括：

• .gltf/.glb（包括二進制版本）

• .obj（Wavefront OBJ格式）

• .stl（立體光刻格式）

• .ply/.compressed.ply/.splat/.spz（點云相關格式）

開發者也可以創建自定義導入器來支持更多文件類型。

二、引入加載器插件

通過CDN引入（適合學習/實驗環境）

<!-- 生產環境鏈接 -->
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script><!-- 預覽環境鏈接（測試最新功能） -->
<script src="https://preview.babylonjs.com/babylon.js"></script>
<script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>

???重要提示：CDN僅適用于學習和小型實驗，生產環境應使用自己的CDN托管相關文件

通過NPM引入（適合項目開發）

npm install @babylonjs/loaders

推薦方式：動態注冊加載器

import { registerBuiltInLoaders } from "@babylonjs/loaders/dynamic";// 注冊所有內置加載器（按需加載）
registerBuiltInLoaders();

這種方式只會按需加載特定格式的解析器，優化了性能。

備選方式：靜態導入（不推薦）

import "@babylonjs/loaders"; // 靜態導入所有加載器

?? 靜態導入會增加包體積，建議優先使用動態注冊方式

三、核心加載方法

1. LoadAssetContainerAsync - 加載資源容器

加載所有資源但不添加到場景，返回AssetContainer對象：

const container = await BABYLON.LoadAssetContainerAsync("模型路徑", scene
);// 手動添加資源到場景
container.addAllToScene();

2. AppendSceneAsync - 追加到當前場景

加載資源并直接附加到當前場景：

await BABYLON.AppendSceneAsync("模型路徑", scene
);

3. LoadSceneAsync - 創建新場景

加載資源并創建全新場景：

const newScene = await BABYLON.LoadSceneAsync("模型路徑", engine
);

4. ImportAnimationsAsync - 導入動畫

僅加載文件中的動畫數據：

await BABYLON.ImportAnimationsAsync("模型路徑", scene
);

5. ImportMeshAsync - 導入網格

僅加載文件中的網格數據：

await BABYLON.ImportMeshAsync("模型路徑", scene
);

四、高級加載技巧

從字符串數據加載模型

可以直接傳遞模型數據的字符串形式：

// 加載GLTF字符串
await BABYLON.AppendSceneAsync("data:" + gltfString, scene);// 加載Base64編碼的GLB數據
const base64Data = "data:;base64,BASE64編碼數據...";
await BABYLON.AppendSceneAsync(base64Data, scene);

支持的MIME類型：

"data:application/octet-stream;base64,..."
"data:model/gltf-binary;base64,..."

加載非glTF格式的字符串數據

需指定pluginExtension參數：

// 加載OBJ格式字符串
const objData = "data:;base64,ZyB0ZXRyYWhlZHJvbwoKdiAx...";
await BABYLON.AppendSceneAsync(objData, scene, { pluginExtension: "obj" 
});

五、高級配置選項

自定義根路徑

await BABYLON.AppendSceneAsync("model.glb", scene, {rootUrl: "https://example.com/assets/"
});

glTF加載器專屬配置

const container = await BABYLON.LoadAssetContainerAsync("LevelOfDetail.glb", scene,{pluginOptions: {gltf: {skipMaterials: false, // 不跳過材質extensionOptions: {MSFT_lod: { maxLODsToLoad: 1 } // LOD配置}}}}
);

六、最佳實踐總結

1. 生產環境：使用NPM + 動態注冊加載器 (registerBuiltInLoaders)

2. 路徑處理：始終使用rootUrl明確資源位置

3. 格式選擇：

   • 優先使用glb格式（單一文件，加載快）

   • 復雜場景使用glTF（資源分離，易管理）

4. 性能優化：

   • 使用LOD配置減少細節層級

   • 按需加載網格/動畫

5. 錯誤處理：

   try {await ImportMeshAsync(...);
   } catch (error) {console.error("加載失敗:", error);
   }

   參考鏈接：Loading Any File Type | Babylon.js Documentation (babylonjs.com)