全网最详Babylon.js入门教材(2)-插入几何体上一章节我们已经学习了如何用Babylon.js来创建一个3D世界

Q：Babylon.js是什么？🤔️

Babylon.js 是一个强大的、开源的、基于 WebGL 和 WebGPU 的 3D 引擎，用于在网页上创建和渲染 3D 图形。它提供了一套丰富的 API 和功能，包括物理引擎、粒子系统、骨骼动画、碰撞检测、光照和阴影等，可以帮助开发者快速创建复杂的 3D 场景和交互。

Q：我为什么要写该系列的教材? 🤔️

因为公司业务的需要因而要在项目中使用到 Babylon.js，虽然官方的文档看起来覆盖面都挺全，且 playgroud 上的案例也都比较多，但一些具体的 API 或者功能属性也都没有特别多详细的介绍，包括很多使用方式的很多坑都得自己去源码中或者论坛上找。在将其琢磨完之后, 决定写一系列关于它的教材来帮助更多 babylon.js 的使用者或者是期于学习 Web 3D 的开发者。同时也是自己对其的一种巩固。

Babylon.js中插入几何体

从人生的尺度上， 大家最早开始接触到几何体这样的概念，应该就是在孩童时期学习数学时：立方体、球体、圆柱、圆锥、圆环等等。

当然，在实际生活或者建模中，所看到几何体都不会和上面一样，是灰白色“果(luo)体”的，或多或少都穿了件衣服：

可能像上面的立方体一样，只穿了件“单色”的衣服，也可能像其他几何体一样穿了花花绿绿的衣服。穿上不同的衣服这些几何体才有了能更好模拟现实世界的能力。

在3D中，这种“没穿衣服果体”的玩意我们称之为网格(Mesh)，给它们穿的衣服称之为材质(Material)。

// 创建一个立方体
const box = BABYLON.MeshBuilder.CreateBox("box", { size: 1 }, scene);

// 创建一个材质
const material = new BABYLON.StandardMaterial("material", scene);
material.diffuseColor = new BABYLON.Color3(0, 1, 0);
// 把材质应用到立方体上
box.material = material;

在此章节，我们学习是如何创建 Mesh，材质会放在后面章节单独再说。

为什么叫 Mesh？

不知道大家会不会和我一样有所疑问，Babylon.js 为什么管这些几何体叫 Mesh？而不是 Shape? Geometry?

那是因为在 3D 领域中，网格(Mesh) 是一个很重要的概念。

如果你了解过顶点、三角面的概念，应该就能知道：三角面是由三个顶点组成的几何图形，是3D中最基本和广泛使用的几何图元（如果不了解这些概念也没事，在后面我们会有一个章节来专门介绍顶点、三角面这些概念）。

只要用这些三角面拼拼凑凑，按一定的规则组合起来，就能描述出一个现实物体在 3D 场景中的“形状”了。如下面的球所示，内部其实是空心的，只不过是用一个个三角面片拼凑成了球的形状：

像这种，通过定义顶点和这些顶点之间的连接方式，形成一系列的三角面，进而构建出复杂的 3D 模型，我们就称之为 网格（Mesh）。

Babylon.js中有哪些 Mesh？

其实 Babylon.js 中对 Mesh 的分类有很多种，上面看到的立方体、球啊、胶囊啊这种规则的形状也只是其中一种，还有一些不规则的形状、甚至是线、虚线，需要时还可以自定义形状。

根据官网的介绍和查看源码，我对 Babylon.js 提供的 Mesh 做了一下整理：

可以看到，Babylon.js对于几何体的创建，真是“细致入微”啊，除了常见的立方体、球这种形状，甚至对于地板砖、平面、车床都单独提供了接口来供开发者使用。同时不管是体、还是面也都有自定义的接口来使用，也提供了自定义 Mesh 的功能让开发者传入顶点数据和索引列表来实现更灵活的创建。

Mesh 的基本使用

Babylon.js 把大部分基础形状的创建方法，都封装在 MeshBuilder 这个静态类下，我们可以通过调用 MeshBuilder 中不同的方法来创建对应的形状。

创建球

以创建球为例，一个球也是由多个“三角面片”构成的，只要这些三角面片足够多，或者说是这个球它的“精细度”越高，那么它就越趋近于一个真正的球。

在 Babylon.js 中，MeshBuilder.CreateSphere() 接口就是用来创建一个球体的，其中的 segments 参数就用来表示球的分段数，即三角面片的数量，segments 越大，三角面片越多，球越像球。

const sphere = BABYLON.MeshBuilder.CreateSphere("sphere", { segments: 8, diameter: 1 }, scene);
sphere.position.x = 0.5;

const sphere2 = BABYLON.MeshBuilder.CreateSphere("sphere", { segments: 32, diameter: 1 }, scene);		
sphere2.position.x = -0.5

如下，分别展示了 segments 为 4 和 32 的情况：

在线预览地址为：playground.babylonjs.com/#20OAV9#145…

可以通过 playground 中自带的 inspector 把场景设置为 Wireframe 模式查看网格：

当然，球还有直径信息、甚至是X、Y、Z 三个方向的直径信息：

• diameter
• diameterX
• diameterY
• diameterZ

const sphere = BABYLON.MeshBuilder.CreateSphere("sphere", { segments: 32, diameter: 1 }, scene);

const sphere = BABYLON.MeshBuilder.CreateSphere("sphere", { segments: 32, diameterX: 2 }, scene);

const sphere = BABYLON.MeshBuilder.CreateSphere("sphere", { segments: 32, diameterY: 2 }, scene);

const sphere = BABYLON.MeshBuilder.CreateSphere("sphere", { segments: 32, diameter: 2 }, scene);

展示效果如下所示：

甚至如果你只想显示一个不完整的球也可以：

const sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {arc: 0.25, sideOrientation: BABYLON.Mesh.DOUBLESIDE});

效果如下所示：

arc 参数是用来表示圆周在 0 和 1 之间的比率的，设置为 0.25，表示的就是四分之一的球。但这个球也不是一个实体的球，而是只有面片。如果想要一个看起来是实心的四分之一的球就不是用 createSphere() 了，这个我们后面再来说。

另一个参数：sideOrientation 表示的是面片的显示规则。这个其实在很多其他形状也会有这个参数。

最直观的效果就是，转动相机从不同的方向去看面片，可能就看不到了。

如下代码演示了，sideOrientation 设置为不同的值时候的效果：

const sphere = BABYLON.MeshBuilder.CreateSphere("sphere", { arc: 0.25 });

const sphere2 = BABYLON.MeshBuilder.CreateSphere("sphere2", { arc: 0.25, sideOrientation: BABYLON.Mesh.DOUBLESIDE });
sphere2.position.x = -2;

第一个球的 sideOrientation 没有传，默认只渲染外边，第二个球的 sideOrientation 设置为 DOUBLESIDE，表示两面都渲染，所以可以看到下面的效果，右边的球能看到球内部的面片，而左边的则不行。

（这也是很多新手在接触 Babylon.js 却不知道 sideOrientation 而造成的疑惑点，有时候设置了 arc 然后发现场景里没东西了？或者用 createPlane 创建一个平面也不显示，这时候不妨转动一下你的相机，也许你看的是它没渲染的那一面。）

除了 Sphere，还有很多其他的形状，我们这边就不一一列举了，在实际的开发中，如果遇到了各种形状的开发需求，查看上面的思维导图再结合着 Babylon.js Creating Meshes 的文档来开发即可。

后语

知识无价，支持原创！这篇文章就介绍到这里。

喜欢霖呆呆的小伙伴还希望可以关注霖呆呆的公众号 LinDaiDai

我会不定时的更新一些前端方面的知识内容以及自己的原创文章🎉。

你的鼓励就是我持续创作的主要动力 😊。