Создаем 3D-объекты для веб-сайта

Создаем 3D-объекты для веб-сайта

Сервис Tridiv создает на базе каскадных таблиц стилей (CSS) трехмерные космические корабли и логотипы, которые легко можно вставить на свой сайт или в блог.

Чтобы успешно справиться со всеми этапами нашего пошагового руководства, вам понадобится браузер, поддерживающий технологию WebKit. К таким относятся Chrome, Safari, Opera и Edge. В них вебслужба Tridiv может запустить свой графический интерфейс, похожий на программу для рендеринга Blender.

Из простых геометрических тел в этой службе получится создавать сложные 3D-объекты, наделять их текстурой и размещать получившийся результат на своем сайте или в блоге. Для этого используется либо «плавающий» фрейм, либо короткий вебадрес.

Кроме того, Tridiv выдает полный HTMLи CSS-код, который затем можно использовать по своему усмотрению. В пунктах с 1 по 5 рассказывается об основном принципе работы Tridiv, пункты 6 и 7 посвящены оптимизации полученных в результате работы объектов. И в завершение мы покажем, как добавить законченный 3D-объект на свой веб-сайт.

Как это сделать:

1. Запуск редактора Tridiv

Зайдите на сайт tridiv.com. Для создания нового пустого проекта нажмите «Start using the app». Можно начать работу со службой и по-другому: выберите в «Examples» один из трех предложенных примеров.

schritt1 Если на экране ничего не показывается или изображение искажено, значит, ваш браузер не поддерживает технологию WebKit. Выход один — поменять обозреватель на один из тех, что перечислены выше.

2. Загрузка основных форм в редактор

Убедитесь, что включен режим «Editor», и на панели инструментов выберите для загрузки в редактор одну из четырех основных пространственных форм, кликнув по ней мышью.

schritt2

3. Изменение формы геометрического тела

Если около выбранной вами формы не отображается круг с различными символами, кликните по геометрическому телу. С помощью значков, расположенных на появившемся круге, вращайте основную форму, изменяйте ее размер, дублируйте геометрическое тело или совсем удалите его из редактора.

schritt3

4. Настройка цвета и уровня прозрачности

Изменяйте уровень прозрачности тела с помощью ползунка «Opacity», находящегося на панели инструментов справа. При значении «0» объект становится полностью прозрачным, а при значении «1» — непрозрачным. Прямо под этим ползунком расположена кнопка «Colors». Нажав на нее, вы сможете выбрать цвет для всех граней тела.

schritt4

5. Наделение объекта текстурой

Чтобы разместить картинку на поверхности объекта, сначала загрузите ее в веб-хранилище или в блог. Затем в Tridiv нажмите «Images» и введите URL загруженного изображения. Там же можно выбрать, будет ли текстура перенесена на весь объект или только на его части.

schritt5

6. Создание сложных объектов

Загрузите в редактор еще несколько основных геометрических форм, расположите их в нужном порядке, настройте цвета и текстуры. Теперь, применяя ранее освоенные методы, вы сумеете построить все: от простого логотипа компании до космического корабля из «Звездных войн».

Создаем 3D-объекты для веб-сайта

7. Оптимизация настройки света и CSS-кода

Закончив проектирование объекта, включите режим «Preview». В нем вы можете выбрать статический или динамический источник света, отрегулировать яркость освещения и изменить цвет фона. Поскольку расчет динамического освещения является довольно ресурсоемким процессом, с такими сложными моделями, как космический корабль, мы рекомендуем использовать статический источник света. Кроме готового объекта программа также показывает конечный код.

schritt7

Если вы хотите изменить его или перепроверить, нажмите кнопку «Edit on CodePen», и вы перейдете на другую страницу, которая отобразит код HTML и CSS, а также созданный вами объект. В случае, если объект здесь выглядит не так, как на сайте Tridiv, нажмите кнопку «Settings», перейдите на вкладку «CSS» и активируйте в диалоговом окне опцию «AutoPrefixer ».

Подтвердите действие, нажав «Close». Теперь объект должен отображаться правильно. Нажмите кнопку «Save» для сохранения оптимизированного кода.

8. Добавление объекта на собственный сайт

Вернитесь обратно на сайт Tridiv. В режиме «Preview» существуют два способа добавления готового объекта на свой сайт или в блог. Первый способ: нажмите «Short URL» для создания веб-адреса, указывающего на сохраненный в сервисе Tridiv объект.

schritt8

Второй способ: кликните по «Embed» для добавления объекта на сайт в качестве «плавающего» фрейма. Скопируйте отображаемый там код в буфер обмена и вставьте в нужное место на вашем сайте или в блоге.

Фото: компании-производители

Рекомендуем