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

Question

我正在尝试使用 Three.js 将一种几何图形转变为另一种几何图形。这是我到目前为止所做的事情(有关实例，请参阅 http://stemkoski.github.io/Three.js/Morph-Geometries.html)。

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

这导致了一次不算糟糕但也不算出色的第一次尝试。由于(通常)较大立方体的任何顶点都不是较小多面体任何顶点的最终位置，因此立方体表面的大部分都丢失了。因此，接下来我通过添加更多顶点来细化较小的多面体，如下所示:对于较大立方体的每个顶点，我向原点进行光线转换，并且每条光线与较小多面体的一个面相交，我删除了该三角形面并添加了点交叉点和三个较小的面来替换它。现在变形更好了(这是上面链接的实时示例)，但变形仍然没有填充立方体的整个体积。

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

Answer 1

事实证明，这是一个复杂的问题。在技​​术文献中，我感兴趣的算法有时被称为“ map 叠加算法”；我正在构建的网格有时被称为“ super 网格”。

我读过的一些关于这个问题的有用著作包括:

• 网格变形:最新技术和概念。
  博士。 Jindrich Parus 的论文
  http://herakles.zcu.cz/~skala/MSc/Diploma_Data/REP_2005_Parus_Jindrich.pdf
  (第 4 章特别有帮助)

• 计算几何:算法与应用(书籍)
  马克·德伯格等人
  (第 2 章特别有帮助)

• 多面体对象的形状变换(文章)
  计算机图形学，26, 2，1992 年 7 月
  作者:詹姆斯·R·肯特 (James R. Kent) 等人
  http://www.cs.uoi.gr/~fudos/morphing/structural-morphing.pdf

我已经开始编写一系列演示来构建实现上述文献中讨论的算法所需的机制，以解决我最初的问题。到目前为止，这些包括:

• 网格的球形投影@ http://stemkoski.github.io/Three.js/Sphere-Project.html
• THREE.Geometry @ http://stemkoski.github.io/Three.js/Topology-Data.html 的拓扑数据结构

还有更多工作要做；随着我取得更多进展，我会定期更新这个答案，并仍然希望其他人能够贡献信息!