Рекомендуемая библиотека JS для анимации складывания бумаги в стиле оригами

Я хотел бы создать анимацию складывания бумаги в стиле оригами, используя WebGL или Canvas (без Flash!). Эффект, который я хотел бы воспроизвести, аналогичен тому, что показан в видео. здесь.

Четкое представление финальной анимации для куба можно представить следующим образом:

Я пытался использовать библиотеку three.js, но не не смог найти способ анимировать одно лицо THREE.Mesh. Я также попробовал простую анимацию CSS3, но было бы очень сложно анимировать твердое тело с более чем 6 гранями, поскольку невозможно создать отношения между 2 или более гранями.

Кто-нибудь может порекомендовать другие библиотеки JS? Или есть способ добиться этого с помощью three.js? Конечно, было бы здорово, если бы можно было заставить его работать только с помощью canvas2d, но я думаю, что это маловероятно!


person Roberto    schedule 18.05.2012    source источник
comment
Просто мысль. Похоже, вы создаете куб и хотите анимировать грани. Что, если вы создадите 6 прямоугольных призм (всего 6 кубов с нулевой или почти нулевой толщиной) и анимируете каждую грань как отдельный объект? Возможно, тогда вы сможете абстрагировать процесс для работы с трехмерными фигурами с N гранями?   -  person Kasapo    schedule 19.05.2012


Ответы (3)


Я не уверен, какой фреймворк лучше, но я думаю, что лучше всего использовать фреймворк, который поддерживает меши со скинами и воспроизведение анимации. Беглый поиск дал...

http://www.oak3d.com/

... но я понятия не имею, подходит ли это. Три имеют (или, по крайней мере, имели) поддержку скиннинга, но получить данные из 3D-программы было непросто, а воспроизведение анимации было/есть ограниченным.

person MikaelEmtinger    schedule 19.05.2012
comment
да, это может сработать... как только я смогу сделать рабочую демонстрацию, я опубликую ее здесь... тем не менее было бы лучше реализовать родную анимацию в JS, не используя сначала 3D-программу... - person Roberto; 23.05.2012
comment
Скорее всего, вы сможете взять кости скелетного меша и сделать анимацию в JS. - person MikaelEmtinger; 28.05.2012
comment
А теперь это сайт японского кладбища - person JqueryToAddNumbers; 19.08.2015
comment
А теперь это китайский биржевой рынок каучука. - person Matt Sephton; 17.09.2019

если вы используете Maya как 3D-программу, попробуйте www.inka3d.com. затем вы можете анимировать его в Maya, просто привязав верхнюю грань к передней грани, а все боковые грани к полу (каждая из которых является плоским объектом) и создав несколько ключевых кадров. затем добавьте камеру, сделайте «экспортировать все ...» и все готово

person Jochen    schedule 21.06.2012

Я бы рекомендовал http://oridomi.com/ в качестве источника вдохновения. Он предлагает базовые анимации складывания.

person Asimov4    schedule 29.08.2014