简介
PixiJS 是一个基于 HTML5 Canvas 技术的 JavaScript 游戏引擎，其拥有一个庞大的开源社区，提供了众多功能强大的插件和工具包。在这些插件中，@pixi/mesh 是一款非常实用的扩展，可以让你在 PixiJS 中实现更复杂的形状和图形。
本教程将重点介绍 @pixi/mesh 包的使用方法，帮助读者深入了解如何创建和绘制基于网格的形状，并且提供一些示例代码和实用技巧，方便新手快速掌握相关技术。
安装
要使用 @pixi/mesh 包，首先需要安装它。可以通过 npm 命令行安装：
npm install @pixi/mesh
创建基本的网格形状
使用 @pixi/mesh 包创建基于网格的形状需要以下几个步骤：
- 配置 Geometry 对象，用于存储形状的顶点信息。
- 配置 Material 对象，用于存储形状的着色器和纹理信息。
- 创建 Mesh 对象，将 Geometry 和 Material 组合起来，形成一个可渲染的形状实体。
首先，我们来创建一个简单的三角形形状。可以使用 PIXI.Geometry 对象创建一个包含三个顶点的对象：
const geometry = new PIXI.Geometry()
.addAttribute('aVertexPosition', // Attribute name
[ // Array of values
0, 0, // x, y for vertex 1
100, 0, // x, y for vertex 2
50, 100 // x, y for vertex 3
], 2) // Components per vertex这里使用 addAttribute 方法为 Geometry 对象添加顶点信息。第一个参数表示顶点的属性名称，这里是 aVertexPosition，后面的数组表示每个顶点在 x 和 y 轴上的位置，最后的数字 2 表示每个顶点由两个分量表示。
接下来，我们需要为三角形形状配置 Material 对象。在这个例子中，我们不需要使用纹理，只需要简单地填充一个颜色即可：
const material = new PIXI.MeshMaterial({
color: 0x00ff00
})注意到这里使用了 PIXI.MeshMaterial 对象来创建 Material 对象，这是因为 @pixi/mesh 包基于 MeshMaterial 来创建 Mesh 对象。
最后，我们可以将 Geometry 和 Material 组合起来，创建一个 Mesh 对象：
const triangle = new PIXI.Mesh(geometry, material)
现在，我们已经成功地创建了一个三角形形状的对象，并可以将它添加到舞台中进行渲染。具体代码：
-- -------------------- ---- -------
----- --- - --- -------------------
------------------------------------
----- -------- - --- ---------------
--------------------------------
-
-- --
---- --
--- ---
-- ---
----- -------- - --- -------------------
------ --------
--
----- -------- - --- ------------------- ----------
-----------------------------创建基本的多边形
上面的例子是一个简单的三角形形状，但是在实际使用中，我们更经常需要创建更为复杂的、不规则形状的网格。对于这种情况，我们可以使用 @pixi/mesh 提供的 PIXI.Polygon 对象来创建多边形形状。
const polygon = new PIXI.Polygon([
100, 0,
200, 200,
0, 200
])这里，我们依然需要指定一个顶点数组，但是这次我们可以随意指定顶点的顺序和数量，从而创建任意形状的多边形。
接下来，我们仍然需要创建 Material 对象，为其指定颜色和纹理：
const material = new PIXI.MeshMaterial({
color: 0xff0000,
map: PIXI.Texture.from('path/to/texture.png')
})注意到这里除了指定一个颜色外，还为 Material 对象添加了一个纹理。这是因为在实际应用中，我们经常需要使用复杂图案或纹理来填充我们的多边形形状。
最后，我们可以将 Polygon 和 Material 对象组合起来，创建一个 Mesh 对象：
const polygonMesh = new PIXI.Mesh(new PIXI.Geometry().addAttribute('aVertexPosition',
polygon.points, 2), material);这里使用了与之前相同的 addAttribute 方法来添加 Geometry 对象的顶点信息，不过这次我们是使用 Polygon 对象的点数组来填充其中了。
至此，我们已经成功地创建了一个带有纹理的多边形形状，并可以将它添加到舞台中进行渲染。
完整代码：
-- -------------------- ---- -------
----- --- - --- -------------------
------------------------------------
----- ------- - --- --------------
---- --
---- ----
-- ---
--
----- -------- - --- -------------------
------ ---------
---- ----------------------------------------
--
----- ----------- - --- ------------- -----------------------------------------------
--------------- --- ----------
--------------------------------
其它用途
@pixi/mesh 包不仅可以用于创建网格形状，还可以用来对已有的形状实体进行修改和优化。
例如，可以使用 PIXI.MeshBatchUvs 类来生成网格的 UV 坐标，这样可以更精细地设置多边形内纹理的映射位置。
-- -------------------- ---- -------
----- -------- - --- -------------------------- --------------- - -- ------
----- --- - -------------
--- ---- - - -- - - ---------------- - -- -- -
----- - - ------------
----- - - ---------- - ---
------ - -- - ----- - ------
----- - -- - -- - ----- - -------
-
-------- - ----这里，我们创建了一个 PIXI.MeshBatchUvs 对象，并为它指定了纹理和顶点数量。之后，我们可以使用 uvs 数组设置每个顶点的 UV 坐标，从而更精细地对多边形形状进行纹理映射。
除此之外，@pixi/mesh 还提供了许多其它实用的类和方法，可以满足各种需求场景。这些类和方法的详细介绍可以参考官方文档。
结论
@pixi/mesh 包提供了丰富实用的类和方法，可以帮助前端工程师轻松地创建和修改基于网格的形状实体，方便实现更加复杂的图形渲染逻辑。
本教程介绍了 @pixi/mesh 的基础知识和常用技巧，如果你想深入学习相关知识，可以参考官方文档和代码示例。
参考文献
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/164582