Three.js 3.js填充边缘之间的间隙

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

我将其导出为一个.obj文件，并使用OBJLoader加载项以3js格式导入

当我在我的应用程序中使用它时，它似乎在孔的侧面画了一个面：

我是否需要在ThreeJS中使用一个设置来避免像这样的间隙？还是我如何创建模型的问题？我在这里完全迷路了，谢谢你的指导

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

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

---

编辑2：抱歉耽搁了。这是混合器文件：

您遇到的问题是因为（有超过4条边的多边形）

为three.js建模就像为游戏建模一样，因此最好避免使用超过4条边的多边形，因为当渲染器（或视频卡，我不知道）尝试渲染模型时，它必须应用三角剖分，并且可能以意外的方式进行

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

这是我发现的一段youtube视频，它似乎解释了很多关于NGON的事情。

（虽然我只看了第一分钟左右）

下面是一个我将如何做的示例，红线表示添加的边。请记住，在导出之前，在两侧都执行此操作，并应用平滑组

---

您遇到的问题是因为（有超过4条边的多边形）

为three.js建模就像为游戏建模一样，因此最好避免使用超过4条边的多边形，因为当渲染器（或视频卡，我不知道）尝试渲染模型时，它必须应用三角剖分，并且可能以意外的方式进行

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

这是我发现的一段youtube视频，它似乎解释了很多关于NGON的事情。

（虽然我只看了第一分钟左右）

下面是一个我将如何做的示例，红线表示添加的边。请记住，在导出之前，在两侧都执行此操作，并应用平滑组

---

您能在这个线程中共享

blend

文件吗？当然可以！我现在不在家，但我会在几个小时后上传。很抱歉最初没有包括它@我添加了.blend文件。抱歉耽搁了！我已将资产导出到

glTF

而不是

OBJ

，并通过以下基于

three.js

的查看器对其进行了验证：。结果看起来是正确的

glTF

实际上是

three.js

的推荐3D格式。因此，使用

glTF

可能是最简单的解决方案。谢谢@Mugen87！感谢您抽出时间：）我将尝试使用glTF格式。您可以在此线程中共享

blend

文件吗？当然可以！我现在不在家，但我会在几个小时后上传。很抱歉最初没有包括它@我添加了.blend文件。抱歉耽搁了！我已将资产导出到

glTF

而不是

OBJ

，并通过以下基于

three.js

的查看器对其进行了验证：。结果看起来是正确的

glTF

实际上是

three.js

的推荐3D格式。因此，使用

glTF

可能是最简单的解决方案。谢谢@Mugen87！感谢您抽出时间：）我将尝试glTF格式，非常感谢！愚蠢的问题，但你是如何添加这些边的？我通过选择两个顶点（一个“锚定”和一个沿孔）并按下

f

，尝试使用“生成边/面”工具。不过，我怀疑这会添加一个面/做一些奇怪的事情，因为它会沿着模型的面创建可见的线。有没有更好的方法给一个形状添加边呢？在我发布的图片中，我只是在photoshop中画线来演示。如何加入2个垂直将取决于您使用的3d软件。在谷歌上快速搜索应该会得到你使用的任何软件的结果。真的很感激！愚蠢的问题，但你是如何添加这些边的？我通过选择两个顶点（一个“锚定”和一个沿孔）并按下

f

，尝试使用“生成边/面”工具。不过，我怀疑这会添加一个面/做一些奇怪的事情，因为它会沿着模型的面创建可见的线。有没有更好的方法给一个形状添加边呢？在我发布的图片中，我只是在photoshop中画线来演示。如何加入2个垂直将取决于您使用的3d软件。在谷歌上快速搜索应该会得到你使用的任何软件的结果。