在 Three.js 中减去几何(或者实际上,一般的 3D 编程)

Subtracting Geometry in Three.js (or really, 3D programming in general)

我目前正在做一个小项目,我需要在 mousemove 上减去一个立方体的矩形区域(想一想,用于在屋)。 'door' 在点击时会是 'placed',但在用户决定其位置时需要是 'visualized';实际上,除了用户不再移动它之外,没有任何变化。

这里的问题是找到一种允许用户四处移动门的有效方法,同时它可以交互并修改房屋网格。我一直在研究 CSG for Three.js,但我认为对于我的用例可能有更好的算法。我觉得从场景中移除立方体,将其转换为 CSG 网格,减去,然后转换回网格并将其添加回场景中的成本非常高每一帧直到用户决定它的位置。

这里的 CSG 方法是错误的吗?我应该直接修改顶点吗?如果是这样,我将如何处理 calculating/adding 在正方形中创建 'indention' 所需的顶点?实际上,我正在寻找游戏和 3D 应用程序程序员认为处理此类案例的最佳实践。 SketchUp 这样的应用程序如何处理 pushing/pulling 几何图形之类的东西?

谢谢。

我个人认为 CSG 最适合多边形汤类几何体,在这种情况下您对网格及其拓扑的了解不多。 CSG 使用相当繁重的计算,应该适合您可能拥有的几乎所有任务,但它也可能会给您带来一些问题,例如缺乏对称性或一些精度问题。

另一方面,您的几何图形非常简单,您想即时创建它,因此创建两个简单的立方体和 运行 较重的 CSG 没有多大意义。

如果我有类似的任务,我会手工创建这个几何图形,这非常简单:

首先,从一个简单的 2D 形状开始,而不是 3D 几何体,然后想象您将墙分成 3 个部分 - 门的左侧、门的右侧、门的上方。您可能会注意到您只有 3 个矩形,其位置和大小取决于墙壁和门的位置和大小。 这只给你 6 个三角形,基本上是你墙的前面。现在你在一些小距离添加 6 个相似的三角形(但记得镜像它们的法线)并且你有你的墙的第二面。您还需要 8 个窄矩形来连接几何体的两侧,您就完成了。

我没有给你任何具体的方程式,因为它是非常基础的数学,比如 + 和 - 但如果你仍然有问题,我可能会进一步帮助你。我认为您可能对实际网格数据有更多问题,例如顶点索引等。但这是一个很好的练习,可以了解网格内部结构。

顺便说一句:最好将墙分成 5 部分,而不是 3 部分,这会给你更好的网格,但我现在不想让它过于复杂。

顺便说一句 2:您也可以扩展此解决方案以在将来使用更多 doors/windows,但现在让我们坚持您的问题:)。