Babylon.js内置的模型文件类型是.babylon，加载此类型的文件不需要任何插件。如果要加载其他类型如gltf、glb(gltf的二进制类型)、obj、stl、splat的模型文件则需要额外插件的支持，幸运地的是Babylon.js已经提供了这些插件，并且对使用者来说导入这些类型的模型都是一致的API，不会感知到有什么差异。

关于怎么搭建Babylon.js项目请参考我之前的文章《》，项目搭建完成后执行cnpm install @babylonjs/loaders命令安装支持其他类型模型的插件。

cnpm install @babylonjs/loaders

loaders插件安装成功后可以看到其中支持的文件类型，导入这些文件类型前首先需要添加代码import "@babylonjs/loaders"引入插件

使用Blender创建一个简单的围棋模型，右边的场景树显示包含三个部件table、black、white，然后导出为glb格式模型文件，将导出的模型文件如go.glb放到项目的public目录下。

在createScene方法中使用BABYLON.SceneLoader.ImportMeshAsync异步方法加载模型文件。

ImportMeshAsync(meshNames, rootUrl, sceneFilename?, scene?, onProgress?, pluginExtension?, name?): Promise<ISceneLoaderAsyncResult>将网格导入场景ImportMeshAsync方法参数说明如下1. meshNames：可以是 undefined、null、string 或 readonly string[] 类型。这个参数决定了要加载的模型名称。如果传入空字符串（""），则加载所有模型；如果传入一个字符串，只加载该名称的模型；如果传入字符串数组，则加载数组中指定的所有模型名称2. rootUrl：string 类型。这是模型文件所在的根目录路径3. sceneFilename：SceneSource 类型，可选参数。这是要加载的场景文件名4. scene：Nullable<Scene> 类型，可选参数。这是要将模型加载到的场景，默认为当前场景5. onProgress：Nullable<(event) => void> 类型，可选参数。这是一个回调函数，用于在加载过程中报告进度6. pluginExtension：Nullable<string> 类型，可选参数。这是插件扩展名，用于指定加载模型时使用的插件7. name：string 类型，可选参数。这是加载操作的名称该方法返回一个 Promise<ISceneLoaderAsyncResult>，包含了加载的模型、粒子系统、骨骼和动画组等信息

在异步加载的回调方法中，可以通过scene.getMeshByName获取对应的部件，并设置其位置、旋转、是否显示等属性，下面的示例代码将黑白子设置为不显示。

// 导入支持其他文件类型的插件import "@babylonjs/loaders"//... 省略他代码// 在createScene方法添加加载模型代码createScene(): BABYLON.Scene { // Creates a basic Babylon Scene object const scene = new BABYLON.Scene(this.engine); // 显示inspector scene.debugLayer.show() // 隐藏inspector // scene.debugLayer.hide() // 创建摄像机，也就是观察者 // Creates and positions a free camera const camera = new BABYLON.ArcRotateCamera("camera1", -Math.PI / 2, Math.PI / 6, 3.6, BABYLON.Vector3.Zero(), scene) // This attaches the camera to the canvas camera.attachControl(this.canvas, true); // 添加环境光 // Creates a light, aiming 0,1,0 - to the sky const hlight = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0), scene); // Dim the light a small amount - 0 to 1 hlight.intensity = 0.36; // 加载围棋模型(仅显示棋盘)，第一个参数为空表示加载所有的模型 BABYLON.SceneLoader.ImportMeshAsync("", "./", "go.glb").then((result) => { console.log(result) const table = this.scene.getMeshByName("table"); table.position.y = 0.44; table.position.x = 0; table.position.z = 0; table.rotate(BABYLON.Axis.Y, Math.PI, BABYLON.Space.LOCAL); // 不显示黑白棋子 const white = this.scene.getMeshByName("white") const black = this.scene.getMeshByName("black") if (white) { white.setEnabled(false) } if (black) { black.setEnabled(false) } }) return scene;}

运行cnpm run dev启动开发web服务，随时可以查看显示效果，可以启用Babylon.js提供inspector查看模型部件，和blender显示的部件是差不多的。

运行cnpm run build对项目进行打包，成功后会生成dist目录，同时public目录下的模型等资源文件也会复制到dist目录中。接下来运行cnpm run preview就可以为打包好的代码提供web托管服务进行预览。

参考文献

[1]. https://doc.babylonjs.com/features/introductionToFeatures/chap1/first_import/[2]. https://doc.babylonjs.com/typedoc/classes/BABYLON.SceneLoader#ImportMeshAsync