Как работает 3d на сайте?

Question

[Николай Ерофеев]

Есть сайт sonorans-valley.com, на главной странице увидите череп в 3d. Хотел спросить как это сделано, неужто отрисовано все на канве?

Answer 1

[Aleksandr Shpak]

А почему бы и нет?
судя по <canvas class="title"></canvas> это он родимый и есть.
Так же встречаются куски кода типа:

var e=t.createElement("canvas");return!(!e.getContext||!e.getContext("2d"))

что как бы намекает.

Comments

[SHVV]

Префикс "THREE" в vendor.js как бы намекает на библиотеку Three.js.

[Aleksandr Shpak]

SHVV: посыпаю голову пеплом, протупил.

Answer 2

[KuzmenkoArtem]

библиотека three.js
или еще можно unity3d

Answer 3

[Keyten]

Canvas имеет 2 контекста -- Context2D и WebGL.
Если первый используется, в основном, для рисования 2D (хотя 3D на нём отрисовать тоже можно, и даже не слишком сложно, поищите на хабре статьи юзера haqreu), то WebGL -- практически полный аналог OpenGL (а на OpenGL работает огромное количество игр и приложений, да хотя бы квейк на нём был). Соответственно, работает быстро, 3D легко рисуется.

Ну и я уже не говорю про огромное количество библиотек для рисования 3D на нём, одна из самых известных -- уже указанный ThreeJS.

Answer 4

[Николай Антонов]

3d на webGl. Даже когда инициализируете канвас то надо писать строку getContext('2d')