2012-05-18 58 views
3

我想創建一個摺紙般的紙使用的WebGL或帆布摺疊動畫(不閃光!)。 我想重現的效果與video here中的效果相似。推薦JS庫摺紙般的摺紙動畫

最終的動畫的清晰視圖可以爲立方體表示如下:

我試圖用three.js庫,但我無法找到一個方法來動畫一個單面一個三.Mesh。我也嘗試過簡單的CSS3動畫,但是使用6個以上的人臉進行動畫製作會非常困難 - 因爲在兩個或更多個人臉之間創建關係並不可行。

任何人都可以推薦其他JS庫?或者有沒有辦法通過three.js來實現? 當然,如果可以通過使用canvas2d來實現它,那將是非常棒的 - 但我認爲它不太可能!

+0

只是一個想法 - 所以,它聽起來就像你正在創建一個立方體,並希望動畫面孔。如果創建6個直角棱鏡(只有6個立方體,其厚度爲0或接近0),並將每個面的動畫作爲單獨的對象?也許那麼你可以將這個過程抽象爲具有N個面的三維形狀? – Kasapo

回答

0

我不知道該框架是最好的,但我認爲這是最好使用支持蒙皮網格和動畫播放的框架。快速搜索了......

http://www.oak3d.com/

...但我不知道,如果它要走的路。三個(或至少有)支持皮膚,但從3D程序中獲取數據不是微不足道的,動畫播放是/有限的。

+0

是的,它可以工作...只要我可以做一個工作演示,我會在這裏發佈它......仍然會更好地實現JS中的動畫原生,而不先使用3D程序... – Roberto

+0

你是最有可能能夠抓住皮膚網格的骨骼並在JS中進行動畫。 – MikaelEmtinger

+0

現在它是一個日本公墓網站 – ExceptionSlayer

0

,如果你使用Maya爲3D程序然後嘗試www.inka3d.com。那麼你可以簡單地通過將頂面對準前面和將所有側面對準地面(每個都是一個平面對象)並製作一些關鍵幀來在maya中進行動畫處理。然後添加一個攝像頭,做「導出全部...」,就大功告成了