Бесплатный инструмент без регистрации заменит Blender для простых задач.
Дизайнер делает логотип в Figma или Illustrator - получает плоский SVG-файл. А дальше начинается магия: нужен объём, нужна анимация, нужен красивый 3D-рендер для презентации или сайта. Обычно на этом этапе подключается 3D-дизайнер, покупается подписка на Cinema 4D или хотя бы Blender с неделями обучения. А можно просто загрузить тот же SVG в браузер и получить готовый трёхмерный объект за пару минут.
3dsvg - это бесплатный инструмент с открытым кодом, который превращает обычные векторные картинки в интерактивные 3D-объекты. Работает двумя способами: через онлайн-редактор на сайте 3dsvg.design и через компонент для React-разработчиков, который можно встроить в своё приложение. Лицензия MIT - делайте с результатом что хотите.
Как 3dsvg.design превращает плоскую картинку в объёмный объект
Открываете сайт 3dsvg.design - и сразу попадаете в рабочее пространство. Никакой регистрации, никаких аккаунтов. Четыре способа загрузить исходник: напечатать текст (есть 10 шрифтов от Google), нарисовать пиксели вручную, вставить SVG-код или перетащить файл прямо на страницу.
Как только картинка появляется на холсте - она уже трёхмерная. Программа автоматически выдавливает плоский вектор в объём, добавляет освещение и тени. Результат виден мгновенно: можно вращать мышкой, приближать колёсиком, менять ракурс. Это не скриншот из тяжёлого 3D-редактора - это живой объект прямо в браузере.
Материалы и анимации, которые делают картинку «живой»
Десять готовых материалов - от матового пластика до блестящего хрома и голографического эффекта. Есть золото, стекло, резина, глина, светящийся эмиссивный материал. Каждый настраивается: положение источника света, интенсивность, окружающее освещение, тени. Можно загрузить свою текстуру поверх.
Семь типов анимации: вращение, плавание в воздухе, пульсация, покачивание, маятник, комбинация вращения с плаванием - или статичный объект без движения. Анимация работает сразу, без дополнительной настройки. Выбираете из списка - и объект начинает двигаться.
Экспорт: от картинки до 3D-модели для печати
Это сильная сторона инструмента. Готовый результат можно выгрузить в пяти форматах:
PNG - прозрачный или с фоном, до 4K-разрешения. Видео - 60 кадров в секунду, MP4 или WebM, с контролем качества и удобным обрезанием по времени, как в iPhone. Трёхмерные модели - GLB (с сохранением цветов и материалов), STL (для 3D-принтера), OBJ и PLY.
Отдельно стоит камера: как в смартфоне - кнопка спуска, выбор соотношения сторон, видоискатель. Удобно, когда нужен точный кадр для презентации.
Для разработчиков: компонент SVG3D для React
Если вы пишете сайт или приложение на React - можно встроить 3D-объект прямо в код. Компонент называется SVG3D, устанавливается одной командой через npm. Минимальный пример: передаёте текст или путь к SVG-файлу, указываете материал и тип анимации - и трёхмерный элемент появляется на странице.
В онлайн-редакторе есть кнопка «Embed code» - она генерирует готовый фрагмент кода с настройками из текущего состояния редактора. Скопировали, вставили в проект - работает. Не нужно вручную переносить параметры материала, освещения или анимации.
Что под капотом и почему это быстро
Инструмент написан на TypeScript, для 3D-рендеринга используется Three.js - это библиотека, которая давно стала стандартом для трёхмерной графики в браузере. Поверх неё стоит React Three Fiber - обёртка, которая делает работу с Three.js удобной для React-разработчиков. Видео конвертируется прямо в браузере через FFmpeg, работающий в изолированном режиме без сервера.
Редактор построен на Next.js, стилизован через Tailwind CSS. Всё работает локально - никуда данные не уходят.
Честно о том, что может оттолкнуть
Проект молодой - первые изменения в репозитории появились совсем недавно. 301 звезда на GitHub - это скромно. Нет мобильной версии редактора: на телефоне работать не получится, нужен компьютер с мышкой.
Набор материалов и анимаций пока ограничен десятками и семью вариантами. Для типовых задач - логотипы, иконки, декоративные элементы - хватает. Но если нужна сложная физика материалов или кастомные шейдеры - придётся лезть в код компонента вручную.
Редактор работает только с SVG. Если ваш исходник в PNG или JPG - сначала нужно конвертировать его в вектор, иначе результат будет некрасивым.
Кому это пригодится прямо сейчас
Дизайнерам, которые делают презентации, лендинги, баннеры и хотят добавить объём без перехода в Blender. Фронтенд-разработчикам, которым нужен интерактивный 3D-элемент на сайт без тяжёлых библиотек. Владельцам небольших проектов, которые ищут бесплатную замену платным сервисам для рендера 3D-текста и логотипов.
Инструмент не заменит профессиональный 3D-пакет. Но для задач, где достаточно «красивая объёмная картинка с анимацией» - работает отлично и стоит ноль рублей.
Источник: 3dsvg
🔔 КликХак - канал, где IT-находки проверяют на себе, а не переписывают с лендинга. Если это похоже на ваш подход к технике - добро пожаловать.