使用three.js摺疊矩形以形成立方體

Question

我正在嘗試使用給定的6個面作爲一個面可移動的立方體網絡作爲面。是這樣的：

在上述圖像中，有6個面，一個面（藍色）的可移動的。

人們可以沿着它們的邊緣一起旋轉它們以形成「網」。 一旦他們認爲他們完成了，他們可以按下一個「摺疊」按鈕 - 所有的邊都會變成90度來創建立方體（或者如果他沒有在適當的位置加入藍色臉部，則可能不是立方體）。

按下「摺疊」按鈕後，下面是中間狀態。

面折疊後，它應該是這樣的：

相應的動畫這裏給出：http://www.mathematikus.de/10/

（不知該鏈接不工作在Mac）

我不知道該怎麼做。任何幫助表示讚賞。

感謝您提前。

Answer 1

您可以使用對象的層次結構。

var obj1 = new THREE.Mesh(...); 
var obj2 = new THREE.Mesh(...); 
obj1.add(obj2); 

有一個很好的example它。

所以，使用這個原理，我在你的問題中給出了摺疊立方體的動畫。當然，這不是最終的解決方案，這只是一個起點。

jsfiddle例如

UPD：我已經更新了小提琴。您可以點擊PressMe按鈕開始摺疊。使用Tween.js製作的動畫（請參閱foldTheCube()函數）