简介
PixiJS 是一个基于 HTML5 Canvas 技术的 JavaScript 游戏引擎，其拥有一个庞大的开源社区，提供了众多功能强大的插件和工具包。在这些插件中，@pixi/mesh 是一款非常实用的扩展，可以让你在 PixiJS 中实现更复杂的形状和图形。
本教程将重点介绍 @pixi/mesh 包的使用方法，帮助读者深入了解如何创建和绘制基于网格的形状，并且提供一些示例代码和实用技巧，方便新手快速掌握相关技术。
安装
要使用 @pixi/mesh 包，首先需要安装它。可以通过 npm 命令行安装：
--- ------- ----------
创建基本的网格形状
使用 @pixi/mesh 包创建基于网格的形状需要以下几个步骤：
- 配置 Geometry 对象，用于存储形状的顶点信息。
- 配置 Material 对象，用于存储形状的着色器和纹理信息。
- 创建 Mesh 对象，将 Geometry 和 Material 组合起来，形成一个可渲染的形状实体。
首先，我们来创建一个简单的三角形形状。可以使用 PIXI.Geometry 对象创建一个包含三个顶点的对象：
----- -------- - --- ---------------
-------------------------------- -- --------- ----
- -- ----- -- ------
-- -- -- -- - --- ------ -
---- -- -- -- - --- ------ -
--- --- -- -- - --- ------ -
-- -- -- ---------- --- ------这里使用 addAttribute 方法为 Geometry 对象添加顶点信息。第一个参数表示顶点的属性名称，这里是 aVertexPosition，后面的数组表示每个顶点在 x 和 y 轴上的位置，最后的数字 2 表示每个顶点由两个分量表示。
接下来，我们需要为三角形形状配置 Material 对象。在这个例子中，我们不需要使用纹理，只需要简单地填充一个颜色即可：
----- -------- - --- -------------------
------ --------
--注意到这里使用了 PIXI.MeshMaterial 对象来创建 Material 对象，这是因为 @pixi/mesh 包基于 MeshMaterial 来创建 Mesh 对象。
最后，我们可以将 Geometry 和 Material 组合起来，创建一个 Mesh 对象：
----- -------- - --- ------------------- ---------
现在，我们已经成功地创建了一个三角形形状的对象，并可以将它添加到舞台中进行渲染。具体代码：
----- --- - --- -------------------
------------------------------------
----- -------- - --- ---------------
--------------------------------
-
-- --
---- --
--- ---
-- ---
----- -------- - --- -------------------
------ --------
--
----- -------- - --- ------------------- ----------
-----------------------------创建基本的多边形
上面的例子是一个简单的三角形形状，但是在实际使用中，我们更经常需要创建更为复杂的、不规则形状的网格。对于这种情况，我们可以使用 @pixi/mesh 提供的 PIXI.Polygon 对象来创建多边形形状。
----- ------- - --- --------------
---- --
---- ----
-- ---
--这里，我们依然需要指定一个顶点数组，但是这次我们可以随意指定顶点的顺序和数量，从而创建任意形状的多边形。
接下来，我们仍然需要创建 Material 对象，为其指定颜色和纹理：
----- -------- - --- -------------------
------ ---------
---- ----------------------------------------
--注意到这里除了指定一个颜色外，还为 Material 对象添加了一个纹理。这是因为在实际应用中，我们经常需要使用复杂图案或纹理来填充我们的多边形形状。
最后，我们可以将 Polygon 和 Material 对象组合起来，创建一个 Mesh 对象：
----- ----------- - --- ------------- -----------------------------------------------
--------------- --- ----------这里使用了与之前相同的 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