PixiJS v8 PerspectiveMesh 实战指南用四角透视网格实现 2.5D 卡片、地板与伪 3D 场景【免费下载链接】pixijsThe HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.项目地址: https://gitcode.com/gh_mirrors/pi/pixijsPerspectiveMesh是 PixiJS v8 场景系统中专门用于假透视渲染的网格类你只需指定纹理平面四个角在屏幕上的坐标它就会在细分网格上逐顶点计算透视正确的 UV 插值把一张 2D 纹理斜放进场景。本文以 skills/pixijs-scene-mesh/references/mesh-perspective.md 为骨架结合仓库内 PerspectiveMesh 源码、PerspectivePlaneGeometry 源码 与官方示例深入讲解。读完本文你将掌握PerspectiveMesh的完整配置项、四角顺序约定、逐帧动画与纹理热替换技巧并能用它在 2D 渲染器中实现倾斜卡片、伪 3D 地板等 2.5D 效果。PerspectiveMesh 是什么UV 层面的透视投影PerspectiveMesh是一个渲染带透视投影纹理平面的网格。与真实的 3D 渲染不同它没有 Z 轴、没有深度缓冲、没有相机——透视效果完全是在 UV 坐标层面算出来的内部把平面细分成verticesX × verticesY的网格网格顶点位置与 UV 一一对应每次设置四角坐标时根据四个目标角点解出一个 2D 单应homography投影矩阵每个网格顶点都经过该矩阵变换并做齐次除法x/w、y/w从而在二维空间内模拟出近大远小的透视形变。正因为透视校正是逐顶点完成的网格越密投影越平滑网格太稀纹理就会被明显拉扯成三角形。PixiJS 把质量与性能的权衡完全交给了开发者源码注释原文It is a balance between performance and quality! We leave that to you to decide.见 PerspectiveMesh.ts。从类层次看PerspectiveMesh extends MeshPerspectivePlaneGeometry而PerspectivePlaneGeometry extends PlaneGeometryPlaneGeometry.ts。也就是说它同时继承了MeshPlane的细分平面拓扑和Mesh的通用渲染能力。它的适用场景包括2D 广告牌billboard斜放效果延伸向远方的假地板倾斜的卡牌、菜单面板布局中的伪 3D视觉欺骗把 2D 纹理映射进 3D 场景贴图源码 JSDoc 原话Great for mapping a 2D mesh into a 3D scene.。快速上手最基础的用法如下与文档 Quick Start 一致const texture await Assets.load(card.png); const mesh new PerspectiveMesh({ texture, verticesX: 20, verticesY: 20, x0: 0, y0: 0, // top-left x1: 300, y1: 30, // top-right (raised) x2: 280, y2: 300, // bottom-right x3: 20, y3: 280, // bottom-left }); app.stage.addChild(mesh);四个角坐标在局部坐标系中定义了一个四边形网格会把纹理扭曲进这个四边形并自动计算透视正确的 UV。注意四角必须从左上角开始按顺时针列出否则会产生视觉瑕疵详见下文四角顺序约定。构造函数选项详解new PerspectiveMesh(options: PerspectivePlaneOptions)注意接口名是PerspectivePlaneOptions而不是PerspectiveMeshOptions它继承自MeshPlaneOptions源码见 PerspectiveMesh.ts。OptionTypeDefaultDescriptiontextureTextureTexture.WHITE贴到四边形上的纹理。继承自MeshPlaneOptions同时决定几何体的初始width/height。verticesXnumber10网格列数。顶点越多透视越平滑绘制开销越高。verticesYnumber10网格行数。顶点越多透视越平滑绘制开销越高。x0number0左上角 x。y0number0左上角 y。x1number100右上角 x。y1number0右上角 y。x2number100右下角 x。y2number100右下角 y。x3number0左下角 x。y3number100左下角 y。几个关键点默认值来自PerspectiveMesh.defaultOptions。默认配置是一块 100×100 像素、使用Texture.WHITE、10×10 顶点网格的正方形PerspectiveMesh.ts。它是一个静态类属性可以全局覆盖例如让所有新实例默认采用 15×15 网格并自带一点倾斜PerspectiveMesh.defaultOptions { ...PerspectiveMesh.defaultOptions, verticesX: 15, verticesY: 15, // Move top edge up for default skew y0: -20, y1: -20, };构造函数不接受geometry参数PerspectiveMesh会自己构建内部的PerspectivePlaneGeometry用纹理宽高作为平面宽高见 PerspectiveMesh.ts。这也是它与基类Mesh必须显式传入geometry最重要的区别。其余MeshOptions字段shader、state、roundPixels同样有效完整字段清单见 mesh.md。所有Container选项也都合法position、scale、tint、label、filters、zIndex等完整说明见 constructor-options.md。官方示例 mesh_perspective_3d.ts 就同时使用了pivot、x、y、scale等容器属性把网格居中并放大。运行时想改变透视直接调用mesh.setCorners(x0, y0, x1, y1, x2, y2, x3, y3)即可见 PerspectiveMesh.ts。四角顺序约定顺时针从左上开始四个角必须按top-left → top-right → bottom-right → bottom-left的顺时针顺序给出mesh.setCorners( 0, 0, // top-left (x0, y0) 200, 0, // top-right (x1, y1) 200, 200, // bottom-right(x2, y2) 0, 200, // bottom-left (x3, y3) );setCorners会原地更新几何体并立即重新计算投影因此它天然适合放进每帧动画回调里。如果你违反顺序或四个角构成自交蝴蝶结形的非凸四边形UV 插值会产生明显视觉瑕疵——这一点在常见误区一节还会详细展开。核心使用模式静态倾斜卡片只需把上边两个角稍微抬高/压低就能得到一张斜插进画面的卡牌const card new PerspectiveMesh({ texture, verticesX: 20, verticesY: 20, x0: 0, y0: 0, // top-left x1: 300, y1: 30, // top-right (raised) x2: 280, y2: 300, // bottom-right x3: 20, y3: 280, // bottom-left });这也是 PerspectiveMesh.ts JSDoc 示例中top-right raised的用法。视觉回归测试 perspective-mesh.scene.ts 中同样用y1: 0抬高右上角、压低左上角来验证倾斜渲染注意该测试排除了 canvas 渲染器因为透视网格依赖 GPU 顶点变换。逐帧动画透视在app.ticker里每帧调用setCorners几何体会自动重算透视 UVconst mesh new PerspectiveMesh({ texture, verticesX: 20, verticesY: 20, }); app.ticker.add(() { const t performance.now() / 1000; const wave Math.sin(t) * 30; mesh.setCorners(0, wave, 200, -wave, 200, 200, 0, 200); });上下两个角反向摆动卡牌就像在绕水平轴轻微翻转。由于setCorners只是原地改写顶点缓冲并调用buffer.update()上传 GPU逐帧调用开销很小见 applyProjectiveTransformationToPlane.ts。更进一步官方示例 mesh_perspective_3d.ts 展示了真正的进阶玩法对四个角点做 3D 旋转矩阵 透视除法scale perspective / (perspective - z)把旋转结果喂给setCorners再用鼠标位置驱动angleX/angleY就能在纯 2D 渲染器里模拟出跟随鼠标旋转的 3D 卡牌交互效果。这正是文档所说no Z axis限制下最实用的补偿手段。顶点密度与质量权衡const coarse new PerspectiveMesh({ texture, verticesX: 5, verticesY: 5 }); const smooth new PerspectiveMesh({ texture, verticesX: 30, verticesY: 30 });5×5 网格透视形变会呈现明显的三角形拉伸20×20文档建议的不错默认值30×30 及以上平滑但顶点/索引数量与每次setCorners的计算量同步上升。两个轴默认都是10。透视校正发生在每个顶点上所以倾斜越明显网格就要越密。伪 3D 地板Fake Floor把远的两个角放在屏幕更高处、并且比近的两个角更靠拢就能制造出地面向远处延伸的效果const floor new PerspectiveMesh({ texture: floorTex, verticesX: 20, verticesY: 20, x0: 200, y0: 300, // near left on screen x1: 600, y1: 300, // near right x2: 800, y2: 200, // far right x3: 0, y3: 200, // far left }); app.stage.addChild(floor);搭配上方滚动播放的TilingSprite如天空或路面贴图即可做出风格化的 2D 驾驶/跑酷游戏背景。这是PerspectiveMesh在 2D 游戏中最经典的落地场景之一。运行时热替换纹理mesh.texture await Assets.load(new-card.png);PerspectiveMesh覆写了texturesetterPerspectiveMesh.ts换纹理时会自动调用textureUpdated()把几何体的width/height更新为新纹理尺寸并重新执行一次updateProjection()PerspectiveMesh.ts。结果是四角位置保持不变透视投影在换图后依然成立只是平面尺寸跟随新纹理同步。源码级原理从四角坐标到透视网格理解底层实现能帮你更准确地预估质量与性能也能避免踩坑。1. 网格生成PlaneGeometry.buildPerspectivePlaneGeometry继承自PlaneGeometry构造时按verticesX × verticesY生成规则网格位置缓冲按行列铺满width × heightUV 缓冲按[0,1]归一化索引缓冲按每格两个三角形组织PlaneGeometry.ts。初始四角corners就是[0, 0, width, 0, width, height, 0, height]——一个未变形的矩形PerspectivePlaneGeometry.ts。2. 单应矩阵求解compute2DProjectionupdateProjection()把纹理的四个源角(0,0)、(width,0)、(width,height)、(0,height)映射到你给定的四个目标角交给compute2DProjection解出一个 3×3 投影矩阵PerspectivePlaneGeometry.ts。数学内核在 compute2DProjections.ts它通过basis-to-points矩阵、伴随矩阵adjugate与 3×3 矩阵乘法求出把源四边形射影变换到目标四边形的单应矩阵——这正是透视校正的数学本质能正确处理平行线汇聚、近大远小等仿射变换做不到的效果。3. 逐顶点应用applyProjectiveTransformationToPlane拿到投影矩阵后applyProjectiveTransformationToPlane.ts 遍历每个网格顶点const newX (a00 * x) (a01 * y) a02; const newY (a10 * x) (a11 * y) a12; const w (a20 * x) (a21 * y) a22; vertices[i] newX / w; // 齐次除法 vertices[i 1] newY / w;每个顶点都要做一次齐次坐标除法x/w、y/w这也是透视的由来距离越远的顶点w越大位置被压缩得越厉害。最后调用buffer.update()把新位置推给 GPU。网格越密这一步的顶点数与矩阵运算量越大——这就是verticesX/verticesY直接影响性能的底层原因。从 MeshPlane.ts 的对比可以看出普通MeshPlane只做网格细分和可选autoResize而PerspectiveMesh在此之上追加了角点 → 单应 → 顶点重投影整条链路这是两者能力上的分水岭。常见误区[HIGH] 期望真正的 3DPerspectiveMesh只是带 UV 校正的 2D 网格没有 Z 轴、没有深度缓冲、没有相机。真正的 3D 需要借助完整的 WebGL/WebGPU 3D 库或者在外部手动计算好顶点位置后喂给setCorners官方示例 mesh_perspective_3d.ts 就是手动驱动路线的参考实现。文档明确警告This is not a full 3D mesh, it is a 2D mesh with a perspective projection applied to it.[MEDIUM] 顶点太少倾斜时明显拉伸错误写法2×2 网格只有两个三角形纹理被线性拉伸、毫无透视校正const mesh new PerspectiveMesh({ texture, verticesX: 2, verticesY: 2, x0: 0, y0: 0, x1: 300, y1: 50, x2: 280, y2: 250, x3: 20, y3: 200, });正确写法20×20 网格透视平滑const mesh new PerspectiveMesh({ texture, verticesX: 20, verticesY: 20, x0: 0, y0: 0, x1: 300, y1: 50, x2: 280, y2: 250, x3: 20, y3: 200, });经验法则只要能看到明显的倾斜就把密度提到 10×10 以上。[MEDIUM] 非凸四角自交/蝴蝶结形如果四个角构成自交或非凸四边形UV 插值必然产生视觉伪影。始终按一致的顺时针顺序列角并确认四边形是凸的。这与compute2DProjection解单应矩阵的前提直接相关——对退化四边形的映射在数学上不稳定会表现为纹理撕裂或扭曲。相关资源与进一步阅读技能总览pixijs-scene-mesh/SKILL.md —— 了解Mesh、MeshSimple、MeshPlane、MeshRope、PerspectiveMesh五个变体如何选型需要倾斜 2D 卡片或地板 →PerspectiveMesh。基类参考mesh.md ——MeshOptions的shader、state、roundPixels等继承字段以及MeshGeometry的 batching 规则。源码PerspectiveMesh.ts、PerspectivePlaneGeometry.ts、compute2DProjections.ts、applyProjectiveTransformationToPlane.ts。官方示例examples/mesh_perspective_3d.ts鼠标驱动的伪 3D 旋转卡牌。视觉回归测试tests/visual/scenes/mesh/perspective-mesh.scene.ts。通用构造函数选项constructor-options.md。【免费下载链接】pixijsThe HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.项目地址: https://gitcode.com/gh_mirrors/pi/pixijs创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 PixiJS v8 PerspectiveMesh 实战指南：用四角透视网格实现 2.5D 卡片、地板与伪 3D 场景
PixiJS v8 PerspectiveMesh 实战指南用四角透视网格实现 2.5D 卡片、地板与伪 3D 场景【免费下载链接】pixijsThe HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.项目地址: https://gitcode.com/gh_mirrors/pi/pixijsPerspectiveMesh是 PixiJS v8 场景系统中专门用于假透视渲染的网格类你只需指定纹理平面四个角在屏幕上的坐标它就会在细分网格上逐顶点计算透视正确的 UV 插值把一张 2D 纹理斜放进场景。本文以 skills/pixijs-scene-mesh/references/mesh-perspective.md 为骨架结合仓库内 PerspectiveMesh 源码、PerspectivePlaneGeometry 源码 与官方示例深入讲解。读完本文你将掌握PerspectiveMesh的完整配置项、四角顺序约定、逐帧动画与纹理热替换技巧并能用它在 2D 渲染器中实现倾斜卡片、伪 3D 地板等 2.5D 效果。PerspectiveMesh 是什么UV 层面的透视投影PerspectiveMesh是一个渲染带透视投影纹理平面的网格。与真实的 3D 渲染不同它没有 Z 轴、没有深度缓冲、没有相机——透视效果完全是在 UV 坐标层面算出来的内部把平面细分成verticesX × verticesY的网格网格顶点位置与 UV 一一对应每次设置四角坐标时根据四个目标角点解出一个 2D 单应homography投影矩阵每个网格顶点都经过该矩阵变换并做齐次除法x/w、y/w从而在二维空间内模拟出近大远小的透视形变。正因为透视校正是逐顶点完成的网格越密投影越平滑网格太稀纹理就会被明显拉扯成三角形。PixiJS 把质量与性能的权衡完全交给了开发者源码注释原文It is a balance between performance and quality! We leave that to you to decide.见 PerspectiveMesh.ts。从类层次看PerspectiveMesh extends MeshPerspectivePlaneGeometry而PerspectivePlaneGeometry extends PlaneGeometryPlaneGeometry.ts。也就是说它同时继承了MeshPlane的细分平面拓扑和Mesh的通用渲染能力。它的适用场景包括2D 广告牌billboard斜放效果延伸向远方的假地板倾斜的卡牌、菜单面板布局中的伪 3D视觉欺骗把 2D 纹理映射进 3D 场景贴图源码 JSDoc 原话Great for mapping a 2D mesh into a 3D scene.。快速上手最基础的用法如下与文档 Quick Start 一致const texture await Assets.load(card.png); const mesh new PerspectiveMesh({ texture, verticesX: 20, verticesY: 20, x0: 0, y0: 0, // top-left x1: 300, y1: 30, // top-right (raised) x2: 280, y2: 300, // bottom-right x3: 20, y3: 280, // bottom-left }); app.stage.addChild(mesh);四个角坐标在局部坐标系中定义了一个四边形网格会把纹理扭曲进这个四边形并自动计算透视正确的 UV。注意四角必须从左上角开始按顺时针列出否则会产生视觉瑕疵详见下文四角顺序约定。构造函数选项详解new PerspectiveMesh(options: PerspectivePlaneOptions)注意接口名是PerspectivePlaneOptions而不是PerspectiveMeshOptions它继承自MeshPlaneOptions源码见 PerspectiveMesh.ts。OptionTypeDefaultDescriptiontextureTextureTexture.WHITE贴到四边形上的纹理。继承自MeshPlaneOptions同时决定几何体的初始width/height。verticesXnumber10网格列数。顶点越多透视越平滑绘制开销越高。verticesYnumber10网格行数。顶点越多透视越平滑绘制开销越高。x0number0左上角 x。y0number0左上角 y。x1number100右上角 x。y1number0右上角 y。x2number100右下角 x。y2number100右下角 y。x3number0左下角 x。y3number100左下角 y。几个关键点默认值来自PerspectiveMesh.defaultOptions。默认配置是一块 100×100 像素、使用Texture.WHITE、10×10 顶点网格的正方形PerspectiveMesh.ts。它是一个静态类属性可以全局覆盖例如让所有新实例默认采用 15×15 网格并自带一点倾斜PerspectiveMesh.defaultOptions { ...PerspectiveMesh.defaultOptions, verticesX: 15, verticesY: 15, // Move top edge up for default skew y0: -20, y1: -20, };构造函数不接受geometry参数PerspectiveMesh会自己构建内部的PerspectivePlaneGeometry用纹理宽高作为平面宽高见 PerspectiveMesh.ts。这也是它与基类Mesh必须显式传入geometry最重要的区别。其余MeshOptions字段shader、state、roundPixels同样有效完整字段清单见 mesh.md。所有Container选项也都合法position、scale、tint、label、filters、zIndex等完整说明见 constructor-options.md。官方示例 mesh_perspective_3d.ts 就同时使用了pivot、x、y、scale等容器属性把网格居中并放大。运行时想改变透视直接调用mesh.setCorners(x0, y0, x1, y1, x2, y2, x3, y3)即可见 PerspectiveMesh.ts。四角顺序约定顺时针从左上开始四个角必须按top-left → top-right → bottom-right → bottom-left的顺时针顺序给出mesh.setCorners( 0, 0, // top-left (x0, y0) 200, 0, // top-right (x1, y1) 200, 200, // bottom-right(x2, y2) 0, 200, // bottom-left (x3, y3) );setCorners会原地更新几何体并立即重新计算投影因此它天然适合放进每帧动画回调里。如果你违反顺序或四个角构成自交蝴蝶结形的非凸四边形UV 插值会产生明显视觉瑕疵——这一点在常见误区一节还会详细展开。核心使用模式静态倾斜卡片只需把上边两个角稍微抬高/压低就能得到一张斜插进画面的卡牌const card new PerspectiveMesh({ texture, verticesX: 20, verticesY: 20, x0: 0, y0: 0, // top-left x1: 300, y1: 30, // top-right (raised) x2: 280, y2: 300, // bottom-right x3: 20, y3: 280, // bottom-left });这也是 PerspectiveMesh.ts JSDoc 示例中top-right raised的用法。视觉回归测试 perspective-mesh.scene.ts 中同样用y1: 0抬高右上角、压低左上角来验证倾斜渲染注意该测试排除了 canvas 渲染器因为透视网格依赖 GPU 顶点变换。逐帧动画透视在app.ticker里每帧调用setCorners几何体会自动重算透视 UVconst mesh new PerspectiveMesh({ texture, verticesX: 20, verticesY: 20, }); app.ticker.add(() { const t performance.now() / 1000; const wave Math.sin(t) * 30; mesh.setCorners(0, wave, 200, -wave, 200, 200, 0, 200); });上下两个角反向摆动卡牌就像在绕水平轴轻微翻转。由于setCorners只是原地改写顶点缓冲并调用buffer.update()上传 GPU逐帧调用开销很小见 applyProjectiveTransformationToPlane.ts。更进一步官方示例 mesh_perspective_3d.ts 展示了真正的进阶玩法对四个角点做 3D 旋转矩阵 透视除法scale perspective / (perspective - z)把旋转结果喂给setCorners再用鼠标位置驱动angleX/angleY就能在纯 2D 渲染器里模拟出跟随鼠标旋转的 3D 卡牌交互效果。这正是文档所说no Z axis限制下最实用的补偿手段。顶点密度与质量权衡const coarse new PerspectiveMesh({ texture, verticesX: 5, verticesY: 5 }); const smooth new PerspectiveMesh({ texture, verticesX: 30, verticesY: 30 });5×5 网格透视形变会呈现明显的三角形拉伸20×20文档建议的不错默认值30×30 及以上平滑但顶点/索引数量与每次setCorners的计算量同步上升。两个轴默认都是10。透视校正发生在每个顶点上所以倾斜越明显网格就要越密。伪 3D 地板Fake Floor把远的两个角放在屏幕更高处、并且比近的两个角更靠拢就能制造出地面向远处延伸的效果const floor new PerspectiveMesh({ texture: floorTex, verticesX: 20, verticesY: 20, x0: 200, y0: 300, // near left on screen x1: 600, y1: 300, // near right x2: 800, y2: 200, // far right x3: 0, y3: 200, // far left }); app.stage.addChild(floor);搭配上方滚动播放的TilingSprite如天空或路面贴图即可做出风格化的 2D 驾驶/跑酷游戏背景。这是PerspectiveMesh在 2D 游戏中最经典的落地场景之一。运行时热替换纹理mesh.texture await Assets.load(new-card.png);PerspectiveMesh覆写了texturesetterPerspectiveMesh.ts换纹理时会自动调用textureUpdated()把几何体的width/height更新为新纹理尺寸并重新执行一次updateProjection()PerspectiveMesh.ts。结果是四角位置保持不变透视投影在换图后依然成立只是平面尺寸跟随新纹理同步。源码级原理从四角坐标到透视网格理解底层实现能帮你更准确地预估质量与性能也能避免踩坑。1. 网格生成PlaneGeometry.buildPerspectivePlaneGeometry继承自PlaneGeometry构造时按verticesX × verticesY生成规则网格位置缓冲按行列铺满width × heightUV 缓冲按[0,1]归一化索引缓冲按每格两个三角形组织PlaneGeometry.ts。初始四角corners就是[0, 0, width, 0, width, height, 0, height]——一个未变形的矩形PerspectivePlaneGeometry.ts。2. 单应矩阵求解compute2DProjectionupdateProjection()把纹理的四个源角(0,0)、(width,0)、(width,height)、(0,height)映射到你给定的四个目标角交给compute2DProjection解出一个 3×3 投影矩阵PerspectivePlaneGeometry.ts。数学内核在 compute2DProjections.ts它通过basis-to-points矩阵、伴随矩阵adjugate与 3×3 矩阵乘法求出把源四边形射影变换到目标四边形的单应矩阵——这正是透视校正的数学本质能正确处理平行线汇聚、近大远小等仿射变换做不到的效果。3. 逐顶点应用applyProjectiveTransformationToPlane拿到投影矩阵后applyProjectiveTransformationToPlane.ts 遍历每个网格顶点const newX (a00 * x) (a01 * y) a02; const newY (a10 * x) (a11 * y) a12; const w (a20 * x) (a21 * y) a22; vertices[i] newX / w; // 齐次除法 vertices[i 1] newY / w;每个顶点都要做一次齐次坐标除法x/w、y/w这也是透视的由来距离越远的顶点w越大位置被压缩得越厉害。最后调用buffer.update()把新位置推给 GPU。网格越密这一步的顶点数与矩阵运算量越大——这就是verticesX/verticesY直接影响性能的底层原因。从 MeshPlane.ts 的对比可以看出普通MeshPlane只做网格细分和可选autoResize而PerspectiveMesh在此之上追加了角点 → 单应 → 顶点重投影整条链路这是两者能力上的分水岭。常见误区[HIGH] 期望真正的 3DPerspectiveMesh只是带 UV 校正的 2D 网格没有 Z 轴、没有深度缓冲、没有相机。真正的 3D 需要借助完整的 WebGL/WebGPU 3D 库或者在外部手动计算好顶点位置后喂给setCorners官方示例 mesh_perspective_3d.ts 就是手动驱动路线的参考实现。文档明确警告This is not a full 3D mesh, it is a 2D mesh with a perspective projection applied to it.[MEDIUM] 顶点太少倾斜时明显拉伸错误写法2×2 网格只有两个三角形纹理被线性拉伸、毫无透视校正const mesh new PerspectiveMesh({ texture, verticesX: 2, verticesY: 2, x0: 0, y0: 0, x1: 300, y1: 50, x2: 280, y2: 250, x3: 20, y3: 200, });正确写法20×20 网格透视平滑const mesh new PerspectiveMesh({ texture, verticesX: 20, verticesY: 20, x0: 0, y0: 0, x1: 300, y1: 50, x2: 280, y2: 250, x3: 20, y3: 200, });经验法则只要能看到明显的倾斜就把密度提到 10×10 以上。[MEDIUM] 非凸四角自交/蝴蝶结形如果四个角构成自交或非凸四边形UV 插值必然产生视觉伪影。始终按一致的顺时针顺序列角并确认四边形是凸的。这与compute2DProjection解单应矩阵的前提直接相关——对退化四边形的映射在数学上不稳定会表现为纹理撕裂或扭曲。相关资源与进一步阅读技能总览pixijs-scene-mesh/SKILL.md —— 了解Mesh、MeshSimple、MeshPlane、MeshRope、PerspectiveMesh五个变体如何选型需要倾斜 2D 卡片或地板 →PerspectiveMesh。基类参考mesh.md ——MeshOptions的shader、state、roundPixels等继承字段以及MeshGeometry的 batching 规则。源码PerspectiveMesh.ts、PerspectivePlaneGeometry.ts、compute2DProjections.ts、applyProjectiveTransformationToPlane.ts。官方示例examples/mesh_perspective_3d.ts鼠标驱动的伪 3D 旋转卡牌。视觉回归测试tests/visual/scenes/mesh/perspective-mesh.scene.ts。通用构造函数选项constructor-options.md。【免费下载链接】pixijsThe HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.项目地址: https://gitcode.com/gh_mirrors/pi/pixijs创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考