Как реализовать эффект 3D?

Question

[myskypesla]

Есть сайт pro.boombotix.com

И на нём есть такой блок:



Вопрос: как реализовать эффект 3D?

Answer 1

[Николай]

Если речь о колонке - то это canvas, в котором на webGL рисуется всё.

Answer 2

[GreatRash]

Это заранее отрендеренное видео воспроизведение которого управляется прокруткой.

Answer 3

[trushka]

www.jqueryscript.net/tags.php?/360%20Degrees
Там типа спрайт из изображений обьекта с разных ракурсов. В зависимости от положения ползунка выбирается нужная позиция спрайта

Comments

[Николай]

вы б сайт хоть открыли : )

[trushka]

Николай, конкретно это имел в виду. В вопросе же именно про функционал этого куска сайта имеется в виду - при "таскании" полукруглого "ползунка" справа колонка "вращается"

[Николай]

Там полноценный канвас. И колонка реально вращается. Ну правда же, откройте инспектор и посмотрите.

[trushka]

Николай, я говорю о том, что можно такого эффекта добиться с помощью указанного мной плагина. Там есть демка с вращающимся кедом - тот же эффект. Только тут ещё и "инерции" добавили. Полноценное 3D можно было бы во всех плоскостях вращать, в том же ThreeJs есть встроенный механизм для этого. А тут, если присмотреться, видно, что анимация ступенчато происходит. Ну, что использовали для этого дела canvas, это уже другое дело, но принцип, похоже, тот же. К тому же, не думаю, что это производительнее будет. А если спрайт с кадрами двигать не как background-position, а как отдельный блок, меняя transform, то можно вообще всё вынести на GPU - кстати, то, что сайт, приведенный в посте, довольно ощутимо тормозит у меня на, хоть и довольно мощном, но всё же нетбуке, говорит о том, что это сделано на обычном 2D-canvas'e, потому что webGl-штуки всякие на нём намного плавнее крутятся