2012-05-18 2 views
3

WebGL 또는 Canvas (no flash!)를 사용하여 종이 접기와 같은 종이 접기 애니메이션을 만들고 싶습니다. 내가 재현하고자하는 효과는 video here의 효과와 유사합니다. 큐브에 대해 다음과 같이종이 접기 모양의 종이 접기 애니메이션을위한 JS 라이브러리

최종 애니메이션의 밝은 전망이 표현 될 수있다 :

내가 three.js 라이브러리를 사용하려고했지만, 나는 하나의 얼굴을 애니메이션 할 수있는 방법을 찾을 수 없습니다 3의 메쉬. 메쉬. 또한 간단한 CSS3 애니메이션을 시도했지만, 2 개 이상의 얼굴 사이의 관계를 생성 할 가능성이 없으므로 6 개 이상의 얼굴로 단단하게 애니메이션을 작성하는 것은 매우 어려울 것입니다.

누구나 다른 JS 라이브러리를 추천 할 수 있습니까? 아니면 three.js로 이것을 달성 할 수있는 방법이 있습니까? 당연히 canvas2d를 사용하여 작동하도록 만드는 방법이 있다면 좋을 것입니다. -하지만 꽤있을 것 같지 않습니다!

+0

그냥 생각 - 당신이 큐브를 만들고있는 것처럼 들리며 얼굴을 움직이기를 원합니다. 6 개의 직사각형 프리즘 (두께가 0 또는 거의 0 인 6 개의 입방체)을 만들고 각면을 별도의 오브젝트로 애니메이트하면 어떻게 될까요? 아마도 그러면 N 개의 얼굴을 가진 3 차원 도형을 처리하는 프로세스를 추상화 할 수 있을까요? – Kasapo

답변

0

어떤 프레임 워크가 가장 좋을지 모르겠지만 스킨 된 메시와 애니메이션 재생을 지원하는 프레임 워크를 사용하는 것이 가장 좋습니다. 빠른 검색 ...

http://www.oak3d.com/

했다 ...하지만 갈 방법인지 나는 모른다. 3 개는 스키닝을 지원하지만 적어도 3D 프로그램에서 데이터를 가져 오는 것은 쉽지 않으며 애니메이션 재생은 제한적입니다.

+0

네, 작동 할 수 있습니다 ... 작업 데모를 만들 자마자 여기에 게시 할 것입니다 ... 여전히 3D 프로그램을 사용하지 않고 JS에서 애니메이션 네이티브를 구현하는 것이 더 좋을 것입니다 ... – Roberto

+0

You 're 아마도 스킨 메쉬의 뼈를 잡고 JS에서 애니메이션을 할 수있을 것입니다. – MikaelEmtinger

+0

그리고 지금은 일본 묘지 웹 사이트입니다. – ExceptionSlayer

0

Maya를 3D 프로그램으로 사용하는 경우 www.inka3d.com을 시도하십시오. 윗면을 정면으로, 모든 측면을 바닥으로 (각면은 평면 객체) 양육하고, 일부 키 프레임을 자르기 만하면 마야에서 애니메이션을 만들 수 있습니다. 그런 다음 카메라를 추가하고 "모두 내보내기 ..."를 수행하면 완료됩니다.

0

저는 영감으로 http://oridomi.com/을 권하고 싶습니다. 기본적인 접이식 애니메이션을 제공합니다.