Создать CSS 3D Shape с легкостью, используя Tridiv

Вы когда-нибудь работали с 3D в Интернете? Если так, то вы, вероятно, знакомы с WebGL (Библиотека веб-графики), JavaScript API, предназначенный для рендеринга 3D и 2D-графики в вашем веб-браузере без использования плагинов. В этом посте мы представляем Tridivбесплатное веб-приложение для легкого создания 3D-форм CSS.

Если вы знакомы с смесительTridiv – это одно из самых популярных приложений для 3D-моделирования на рабочем столе. Он построен поверх популярных библиотек, таких как Animate.css, Hint.css, PrefixFree, Photon, Mousetrap и других.

Рекомендуемое чтение: 25 (бесплатных) приложений для 3D моделирования, которые вы не должны пропустить

обзор

К сожалению, это приложение предназначено только для браузеров на основе Webkit, что означает, что оно поддерживается только в Chrome, Safari и Opera 15+. Будем надеяться, что он скоро появится в Firefox.

Для начала Tridiv поставляется с тремя типами трехмерных фигур. Ниже приведены примеры основных, средних и продвинутая формаs. Как видите, уровень сложности зависит от количества фигур и граней. Чем выше число, тем сложнее становится.

Чтобы увидеть, что внутри, начнем с загрузки базовой формы iPhone 4S. Вы будете доставлены в Страница редактора, В Tridiv есть две основные страницы: редактор и предварительный просмотр. Вы можете работать над созданием фигур в режиме редактора, а затем дополнить их, используя множество инструментов, доступных в режиме предварительного просмотра.
Работа с редактором
На первый взгляд страница редактора выглядит как упрощенная версия Blender. Со всеми инструментами, расположенными только справа и сверху, Tridiv фокусируется на редакторе интерфейса с четырьмя панелями. Интерфейс показывает вам угол формы сверху, спереди и сбоку. Внутри разных панелей вы можете вращать, редактировать, дублировать и удалять фигуры.

В правом верхнем углу страницы находятся элементы управления проектами для переименования, сохранения, открытия и создания новых проектов. Когда вы сохраните проект, он будет храниться локально на вашем компьютере. Сохраненный документ можно использовать в будущем с функцией «Открыть проект».

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

Дополнительные параметры, такие как свойства документа и формы, а также стили доступны в правой части документа. Дополнительные параметры для них отображаются после выбора формы, которую вы добавили.

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

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

Пока вы редактируете, Tridiv также генерирует HTML и CSS, позволяя вам использовать фигуру без iframe. Вы также можете редактировать код в Tridiv или более на CodePen.

Последние мысли

Действительно, Tridiv – пока единственное мощное приложение для CSS 3D-редактора в Интернете. Однако в настоящее время не хватает документации и учебных пособий. Потребуется некоторое время, чтобы понять, как использовать инструмент. Тем не менее, это все еще удивительное и полезное приложение, которым руководит только один человек, Джулиан Гарнье,

Хороший способ использовать Tridiv – это создание анимированных логотипов, таких как тот, который вы видите на целевой странице, и простых элементов пользовательского интерфейса. Так скажите нам, что бы вы построили с помощью этого инструмента?