Three.js - 变形几何和精化三角网格

时间:2013-06-27 20:24:25

标签: three.js mesh triangulation morphing

我试图使用Three.js将一个几何体变形为另一个几何体。这是我到目前为止所做的事情(参见http://stemkoski.github.io/Three.js/Morph-Geometries.html的实例)。

我试图从一个小的多面体变形到一个更大的立方体(三角形并且在原点处居中)。动画通过着色器完成。较小的多面体上的每个顶点都有两个相关的属性,即最终位置和最终的UV坐标。为了计算每个顶点的最终位置,我从原点通过较小的多面体的每个顶点进行了射线扫描,并找到了与较大立方体的交点。为了计算最终的UV值,我使用了重心坐标和较大立方体相交面顶点的UV值。

这导致了一次不可怕但不是很好的第一次尝试。由于(通常)较大立方体的顶点都不是较小多面体的任何顶点的最终位置,因此缺少立方体表面的大块。接下来我通过添加更多顶点来改进较小的多面体,如下所示:对于较大立方体的每个顶点,我向原点射线,并且每条射线与较小多面体的面相交,我移除了那个三角形面并添加了点交叉点和三个较小的面来替换它。现在变形更好(这是与上面链接的实例),但变形仍然没有填满立方体的整个体积。

我最好的猜测是,除了将较大立方体的顶点投影到较小的多面体上之外,我还需要投影边缘 - 如果A和B是由较大立方体上的边连接的顶点,则投影这些顶点在较小的多面体上也应该通过边连接。但是,当然,投影边缘可能会跨越较小多面体网格中的多个预先存在的三角形,需要添加多个新顶点,重新化,等等。看来我实际需要的是一个算法计算两个三角形网格的共同细化。有没有人知道如上所述的这种算法和/或变形的示例(带代码)(在具有不同三角化的两个网格之间)?

1 个答案:

答案 0 :(得分:8)

事实证明,这是一个错综复杂的问题。在技​​术文献中,我感兴趣的算法有时被称为“地图叠加算法”;我正在构建的网格有时被称为“超级网格”。

我一直在阅读有关此问题的一些有用的工作包括:

我已经开始编写一系列演示来构建实现上面引用的文献中讨论的算法所需的机器来解决我原来的问题。到目前为止,这些包括:

还有更多工作要做;我会定期更新这个答案,因为我取得了额外的进展,并且仍然希望其他人有信息可以做出贡献!