babylon.js构建Web3D模型展示

推荐使用NSDT 3DConvert进行3D模型格式转换，支持glb、obj、stp、fbx、ifc等多种3D模型格式之间进行互相转换，在转换过程中，能够很好的保留模型原有的颜色、材质等信息。

什么是babylon.js？

Babylon.js，是由微软使用TypeScript开发的一款开源的web端3d游戏引擎，与three.js一样都支持webgpu。但相比于three.js来说，babylon.js更强大。

为什么是babylon.js？

虽然说这两引擎在github上的star相差很多，但我认为这是由于时机的关系。three.js在2009年发布，而babylon.js在2013年发布。

其次，three.js是由社区推动，并且使用javascript开发。而babylon.js有个有钱的爹——微软，使用TypeScript开发，这意味着当你进行开发时，你能够得到更好的类型提示。
babylon.js的官方社区也在快速的发展：Babylon.js (babylonjs.com)，如果你在官方论坛中提问的话，大概率半小时内能得到答复。

而且，非常重要的一点。babylon.js的定位是web3d游戏引擎，而three.js的定位为一个web3d库。

综上，我选择babylon.js，下面将先进行对模型的处理。

1.导出模型

本篇文章导出模型的建模软件为blender。

如果模型设置了修改器，请先全部应用（a全选后右键点击，选择转换到网格，勾选保留原有）。建议ctrl+j合并。

随后导出glb文件（建议勾选压缩）。

2.压缩材质图片

大多数时候我们导出的文件很大是因为材质图片太大。

gltf-pipeline提供了一个工具来对glb/gltf文件拆解和合成，我们先对这个工具进行下载，请确保你的操作系统上安装了node.js：

或者使用pnpm

使用：gltf-pipeline -i model.gltf -t 命令模板，将纹理材质图片单独输出

随后，你可以通过ps，将图片都保存为web格式，选择图片的品质，可以尝试选择低，大多数时候图片的品质并没有什么影响。但是空间却只有原来的最多1/10。

然后使用：gltf-pipeline -i model.gltf -o model.glb 命令模板，将分离的模型文件和纹理材质文件统一打包转为单体glb文件。

3.在playground中使用模型

babylon也有editor，这是一个很有潜力的项目。不过这个软件不太好用，而且是由社区开发的。所以我建议入门选手使用playground来编写程序和使用模型：

Babylon.js Playground (babylonjs-playground.com)

我们选择语言为TypeScript。

我们在playground中输入以下代码，关于各个变量和函数的作用，可以看注释：

随后我们点击抬头栏目中的下载按钮，便可以得到一个打包好的压缩文件。

下载好压缩文件后，打开压缩文件中的index.html。发现依赖包已经通过cdn引入了依赖包，你可以直接打开html文件进行预览。