[Фича 19] Вставка 3В объектов на сайт

Привет всем! Как часто вы видите 3D элементы на сайтах? Это выглядит очень круто, эффектно, да и посмотреть товар можно более подробно.

На тильду такие объекты можно вставлять только через костыли. Раз вы голосовали за то, что можно больше играться с кодом - сегодня научимся это делать!

Вставляем 3D объекты - поехали!

Заходим на сайт Sketchfab

Это сайт, где можно хранить или взять готовый 3д элемент для вашего сайта.
Если же вы смоделировали объект сами - можно залить его сюда. Проходим быструю регистрацию.

Ищем модель, которая вам нужна. Мне приглянулась вот такая лошадка:

Ссылочка: https://sketchfab.com/3d-models/woodtoy-horse-e114132dd22b43b5be17ae543697c9e8

Забираем нужный код

Нажимаем на кнопку "Embed". Откроется ещё одно окно, в котором отобразится кусок кода, который нам нужен. Копируем его:

Переходим на Tilda

Открываем Tilda, создаем Zero Block, нажимаем на крестик в верхнем левом углу и выбираем "ADD HTML"

Вставляем туда тот код, который мы взяли на Sketchfab.

Сохраняем, закрываем и публикуем. Элемент будет работать только после того, как вы опубликуете сайт (в предпросмотре не работает).

Как растянуть модель на 100% по ширине?

1) Растягиваем блок HTML на 100% ширины window контейнера.

В самом коде прописываем width="100%" - вторая строчка сверху.

Чтобы убрать элементы интерфейса скетчфаб придётся поиграть с блоком и выводить эти элементы за края экрана.

На этом всё, пользуйтесь! Успехов)