Javascript 以编程方式构建网格-UV映射

我正在开发一个系统，以程序化的方式为“地雷”构建网格，现在我不想达到视觉上的完美，我更专注于基础

我得到了一个点，我能够生成矿井的形状，并从中生成2个网格，一个用于地面，一个用于矿井的“墙”

现在我正在努力使UV贴图正确，但我的问题是，地面很难正确地映射到UV坐标，而我目前无法正确地映射到UV坐标。 对于细分，我使用的是受约束版本的delaunay三角剖分，我在其中添加了一个子细分，该子细分只需将三角形至少分割一次，并在三角形面积大于X时保持分割

这里是镶嵌的2D渲染，突出显示轮廓、三角形和边

这里是3D渲染的结果（使用three.js和webgl）和我当前应用的UV贴图（以及置换贴图，请暂时忽略它）

我对UV贴图采取了一种简单的方法，网格中三角形的每个顶点都转换为0到1之间的值，就是这样。 我认为，理论上应该是正确的，但问题是顶点的顺序造成了问题，但如果是这样的话，纹理应该旋转或奇怪地显示，而不是像那样奇怪地拉伸

一旦我将获得正确的UV映射，下一步将是正确实现

我目前正在用javascript写这篇文章，但任何语言的提示或解决方案都可以，我不介意转换和/或重新设计它以使其工作

我的目标是能够按程序构建网格，将其发送给多个客户端，并实现相同的视觉渲染。在这另一个步骤实现之后，我需要添加一些片段，这样我就不能依赖客户端的着色器，因为否则服务器就不可能在地面上放置轨迹、手推车或其他东西。 一旦我解决了这些问题，我将切换到Unity 3D在客户端进行渲染，webgl和three.js目前正在使用，只是为了有一种快速简便的方式来查看正在生成的内容，而不需要客户端/服务器整个基础设施

有什么建议吗

---

谢谢

我在我的代码中解决了这个问题，但这相当愚蠢：我错误地在每个三角形中添加了3个UV映射，而不是每个点添加1个UV映射，这造成了巨大的视觉混乱。解决了这个问题，我就能够实现我所需要的

---

仍然有很多工作要做，但开始看起来不错

嗨，Daniele，我将写这篇评论，因为这不是一个完美的答案，我不确定它是否真的满足了你的需要。但是，您是否考虑过仅基于边界框（p.x/宽度，p.y/高度）规范化位置并将其用作UV？基本上是平面UV贴图。此方法将生成范围为0到1的纹理线，其值与顶点的相对距离有关。几乎像一个地图集。如果这看起来可以接受，让我知道，如果你愿意，我很乐意发布一个答案。正如迪奥戈斯利马所说，三平面投影应该可以做到这一点，所以你真的不需要把它和uv坐标搞混（这里你有一个很好的图图，说明如何在统一中实现它：），对于这样的平面，你可以只使用顶点坐标作为uv。假设X和Y轴位于地板上，Z点朝上，则可以截断（X，Y）中的整数值，并将结果用作（U，V）。因此值

2.3

变为

0.3

等。感谢您的评论！这正是我正在做的，我希望它能正常工作，但很明显，映射中存在问题。确切地说，在上一张发布的图片中，它是根据一张52x52的地图（范围从-1到51）构建的，坐标通过一个简单的比例映射到UV（X->U，Y->V）（在本例中，U=（X+1）/52…），但结果是上面奇怪的一张。即使不应用置换贴图（这当然不会改变任何东西），结果也是一样的。三角形顶点的顺序会影响纹理的贴图方式吗？哈哈，有趣的@DanieleSalvatoreabano！由于我掌握的信息很少，这更像是猜测，但是：*如果您已经使用Unity进行渲染，请查看*如果您有自定义着色器，您可以将颜色R和B设置为U和V值。这将在视觉上清楚地显示贴图是否正确，因为您将看到定义良好的多色渐变。