三.js填充边缘之间的间隙

Question

我在 Blender 中创建了一个带有孔的块的模型：

我将其导出为 .obj 文件，然后使用 OBJLoader 插件将其导入 ThreeJS。

当我在我的应用程序中使用它时，它似乎在孔的两侧绘制了一张脸：

有没有我需要在 ThreeJS 中使用的设置来避免像这样关闭间隙？或者是我如何创建模型的问题？我完全迷路了，感谢任何指导。

编辑：我通过反复试验发现问题在于具有不规则形状的面，例如与孔相邻的面。我通过对模型进行三角测量“解决了”我的问题；虽然这会稍微改变它的形状，但它可以确保孔中的每个顶点都是三角形面的一部分，这似乎是一个神奇的答案。

我仍然很好奇为什么会这样，特别是因为三角测量使盒子的角落有点奇怪。

编辑 2：抱歉耽搁了。这是搅拌机文件：https://gofile.io/?c=EoxH1r

Answer 1

您遇到的问题是因为ngons（多于 4 个边的多边形）。

为three.js 建模就像为游戏建模一样，所以最好避免使用超过4 个边的多边形，因为当渲染器（或显卡，我不知道）尝试渲染模型时，它必须应用三角剖分并且可能以意想不到的方式做到这一点。

正如您所说，对模型应用三角剖分解决了问题，但在您的建模应用程序中自动应用三角剖分也可能会产生意想不到的结果。因此，最好的办法是更改模型，以便获得预期的结果。

这是我发现的一个 youtube 视频，它似乎解释了很多关于 ngons 的内容。
https://www.youtube.com/watch?v=BjnCV2PIkKA
（虽然我只看了第一分钟左右）

这是我如何做的一个例子，红线代表添加的边缘。记得在两边都这样做，并在导出前应用平滑组。