2013-06-27 63 views
4

我正在嘗試使用Three.js將一個幾何體變形爲另一個幾何體。這是我迄今爲止所做的(參見http://stemkoski.github.io/Three.js/Morph-Geometries.html瞭解實例)。Three.js - 變形幾何體和細化三角網格

我正在嘗試從一個小多面體轉變爲一個更大的立方體(既是三角形的,也是以原點爲中心)。動畫是通過着色器完成的。較小多面體上的每個頂點都有兩個關聯的屬性,它們的最終位置和最終的UV座標。爲了計算每個頂點的最終位置,我從原點通過較小的多面體的每個頂點發射光譜,並找到與較大立方體的交點。爲了計算最終的UV值,我使用重心座標和較大立方體的相交面的頂點處的UV值。

這導致了一個不可怕但不是很好的第一次嘗試。由於(通常)較大立方體的頂點沒有一個是較小多面體的任何頂點的最終位置,因此立方體表面的大塊缺失。所以接下來我通過添加更多的頂點來細化較小的多面體,如下所示:對於較大立方體的每個頂點,我朝向原點發射光線,並且每條光線與較小多面體的一個面相交,然後移除該三角形面並添加點十字路口和三個較小的面來代替它。現在變形更好(這是上面鏈接的活動示例),但變形仍不會填充整個體積。

我最好的猜測是,除了將較大的立方體的頂點投影到較小的多面體之外,我還需要投影邊 - 如果A和B是由較大立方體上的邊連接的頂點,則這些頂點在較小的多面體上的投影也應該通過邊緣連接。但是,當然有可能投影的邊將會跨過多個已存在的小三角形的網格中的多邊形,需要添加多個新的頂點,retriangularization等。看來,我真正需要的是一種算法計算兩個三角網格的共同細化。有沒有人知道如上所述的變形(具有不同三角形化的兩個網格之間)的這種算法和/或示例(帶有代碼)?

回答

7

事實證明,這是一個複雜的問題。在技​​術文獻中,我感興趣的算法有時被稱爲「地圖疊加算法」。我正在構建的網格有時被稱爲「超級網格」。

一些有用的作品我一直在閱讀有關此問題包括:

我已經開始寫了一系列的演示,建立以實現上面提到的要解決我原來的問題文獻討論的算法所需要的機械。到目前爲止,這些包括:

還有還需要做更多的工作;我會在我額外取得進展的同時定期更新這個答案,並且仍然希望其他人有信息作出貢獻!