Привет, VC 👋!
Что делают дизайнеры на новогодних каникулах, когда им становится скучно? Правильно — свои пет-проекты. Вот и мне стало скучно на праздниках, и я решил запрыгнуть в поезд популярности 3D-иконок. Но не просто сделать очередной пак иконок, а дать людям возможность менять на лету цвет, материалы и, конечно, ракурс камеры. И чтобы все это работало прямо в браузере.
Ну, собственно, вот — vertex.im
Бесплатно, конечно.
Технологический стек
На фронте — React для стейт-менеджмента, three.js для 3D.
Бекенда нет — весь функционал работает в клиентском браузере.
Иконки сделаны в Blender. Потрясающий редактор, да еще и бесплатный.
По сути, единственной сложностью оказалась невозможность привести итоговый вид иконки в браузере к тому, как она выглядит при рендере в Блендере. Очевидно, что 100% попадания быть не может — в Блендере классический рейтрейсинг, а в three.js грустная растеризация. Пришлось изрядно повозится с подбором материалов и выбором освещения. Но, думаю, как минимум удалось приблизится. Хотя, есть еще куда улучшать.
Планы на будущее
- Поработать над UX. Некоторые вещи замечаешь только начав полноценно пользоваться.
- Новые иконки — еще много непокрытых стандартных метафор, плюс логотипы, emoji, тематические паки.
- Сделать полноценный редактор сцены, чтобы можно было составлять композиции из многих объектов, а не ограничиваться только одним. Ну и, конечно, новые материалы, больше возможностей по управлению светом, окружением и т.д.
Реализация - супер! Единственное, там какая-то ссылка в мобильной версии, которая вроде как никуда не ведёт.
Она вообще на почту ведет )
Спасибо.
А, ой, отставить. Это если с виси открывать он не грузит, а с браузера очень даже грузит;)
У меня она просто начинает грузится и на этом все:(
Там сделан классический mailto, который должен открывать почтовый клиент. Хорошая идея, кстати, просто прямо почту указать )
Спасибо, переделаю.
Классный проект! Спасибо! 👍
Не нашёл (может, плохо искал?) возможность вручную задавать значения 😶
Нет, такого нет. Отказался в угоду упрощения.
Когда сделаю вторую версию с полноценной сценой - там, конечно, будет более тонкая настройка.
Спасибо, подожду обновление 🤞
Чтобы при работе с несколькими иконками можно было сделать их все в едином стиле, под одним углом.
Там специально для этого остается свет один и тот же на все иконки. Но с углом - да, это надо делать.
Спасибо за фидбек!
Мне нравится. Самого волнует тема генерации ассетов. Единственное картинка на выходе отличается от превью.
Пофиксил, спасибо!
Крутая штука! Можно было бы свои кастомные модельки туда добавлять
Здорово! Только медленно и нагружает компьютер сильно. И еще у меня не получилось вращать в произвольных плоскостях.
Что вы имеете в виду под «произвольными плоскостями»?
Любые плоскости. У меня получилось вращать только вокруг оси, направленной от меня, но не вокруг вертикальной или горизонтальной. Так и было задумано?
Нет, конечно нет. А что за устройство/браузер?