【发布时间】：2013-06-25 12:11:00
【问题描述】：
我正在尝试使用 Three.js 将一种几何图形变形为另一种几何图形。这是我到目前为止所做的（请参阅http://stemkoski.github.io/Three.js/Morph-Geometries.html 以获取实时示例）。
我正在尝试从一个小的多面体变形为一个更大的立方体（三角化并以原点为中心）。动画是通过着色器完成的。较小多面体上的每个顶点都有两个关联的属性，即其最终位置和其最终 UV 坐标。为了计算每个顶点的最终位置，我从原点通过较小多面体的每个顶点进行光线投射，并找到与较大立方体的交点。为了计算最终的 UV 值，我使用了重心坐标和较大立方体相交面顶点处的 UV 值。
这导致了一次不可怕但不是很好的第一次尝试。由于（通常）较大立方体的任何顶点都不是较小多面体的任何顶点的最终位置，因此立方体表面的大块缺失。所以接下来我通过添加更多顶点来细化较小的多面体，如下所示：对于较大立方体的每个顶点，我将光线投射到原点，并且每条光线与较小多面体的一个面相交，我删除了那个三角形面并添加了点交叉点和三个较小的面来替换它。现在变形更好（这是上面链接的实时示例），但变形仍然没有填满立方体的整个体积。
我最好的猜测是，除了将较大立方体的顶点投影到较小的多面体上之外，我还需要投影边——如果 A 和 B 是由较大立方体上的边连接的顶点，那么投影较小的多面体上的这些顶点也应该通过边连接。但是，当然，投影边缘可能会跨越较小多面体的网格中的多个预先存在的三角形，需要添加多个新顶点，重新三角化等。看来我真正需要的是一种算法计算两个三角形网格的共同细化。有谁知道如上所述的变形（在具有不同三角化的两个网格之间）的这种算法和/或示例（带有代码）？
【问题讨论】：
标签： three.js mesh triangulation morphing