使用 Three.js 创建类似屋顶的结构答案

【问题标题】：Create roof-like structures with Three.js使用 Three.js 创建类似屋顶的结构
【发布时间】：2013-02-21 05:06:55
【问题描述】：

我目前正在尝试一种在 Three.js 中的挤压形状之上创建屋顶状结构的方法。在不深入研究straight skeletons 的情况下，我能想到的最简单的方法是拉伸并缩放我的拉伸网格的顶面，使其看起来像屋顶，或者在顶部创建一个形状像屋顶的新网格。

如果应用于拉伸矩形（立方体），这是我所追求的最基本样式：

屋顶的阴影区域高于非阴影区域。

同样的样式，如果应用于更复杂的挤压形状：

我不知道如何创建这样的屋顶结构，尤其是对于像第二个示例这样的复杂形状。我有建筑物“足迹”的顶点，但我不知道如何在缩放顶面以产生倾斜的侧面时挤压它们。

我绝对可以计算出缩放的顶点位置，但我还有另一个问题是不知道如何将顶部（缩放）面连接到底部面（即如何制作侧面）。

有什么想法吗？

【问题讨论】：

ExtrudeGeometry 不应该已经关闭顶部了吗？ mrdoob.github.com/three.js/examples/webgl_geometry_shapes.html
ExtrudeGeometry 关闭顶部，但它是平顶。我想要的是一个必胜客风格的屋顶，其中在顶部挤压屋顶上方有另一个面，稍微小一点，所以侧面朝它倾斜……就像屋顶一样。
嗨罗宾，你有没有完成过单面斜角？看起来我在 2 年后遇到了同样的问题。

标签： three.js

【解决方案1】：

【讨论】：

我确实认为这可能是一个解决方案，尽管根据以前的经验，我认为斜角在两端。现在单边斜面就足够了，所以我将深入研究 ExtrudeGeometry 代码，看看我能做什么。
是的。只需 fork ExtrudeGeometry 即可满足您的需求。开源 FTW！
@mrdoob，我也需要这个功能。在 Java 中，我曾经使用 Poly2Tri 库来绘制多边形。一个有用的功能是 polygon.addSteinerPoint() 方法，它允许在 2D 多边形平面之外有一个点，并让多边形自动拉伸以包含该点。这使我能够创建任何形状的屋顶。我可以通过移动 steiner 点来编辑屋顶。 THREE.Shape 是否支持 steiner 点？如果没有，是否有可能添加此功能？

【解决方案2】：

由于顶部屋顶多边形将具有与底部屋顶多边形相同数量的顶点，这不只是循环通过每个顶部屋顶多边形顶点并将其连接到其底部屋顶多边形顶点的情况吗？

而且，顶部屋顶多边形上的任何两个顶点以及底部屋顶多边形上的关联顶点将为您提供侧面的所有顶点。

【讨论】：