Vertex: 3D-иконки, которые можно настраивать в браузере

Привет, VC 👋!

Что делают дизайнеры на новогодних каникулах, когда им становится скучно? Правильно — свои пет-проекты. Вот и мне стало скучно на праздниках, и я решил запрыгнуть в поезд популярности 3D-иконок. Но не просто сделать очередной пак иконок, а дать людям возможность менять на лету цвет, материалы и, конечно, ракурс камеры. И чтобы все это работало прямо в браузере.

Ну, собственно, вот — vertex.im

Бесплатно, конечно.

Технологический стек

На фронте — React для стейт-менеджмента, three.js для 3D.

Бекенда нет — весь функционал работает в клиентском браузере.

Иконки сделаны в Blender. Потрясающий редактор, да еще и бесплатный.

По сути, единственной сложностью оказалась невозможность привести итоговый вид иконки в браузере к тому, как она выглядит при рендере в Блендере. Очевидно, что 100% попадания быть не может — в Блендере классический рейтрейсинг, а в three.js грустная растеризация. Пришлось изрядно повозится с подбором материалов и выбором освещения. Но, думаю, как минимум удалось приблизится. Хотя, есть еще куда улучшать.

Планы на будущее

  • Поработать над UX. Некоторые вещи замечаешь только начав полноценно пользоваться.
  • Новые иконки — еще много непокрытых стандартных метафор, плюс логотипы, emoji, тематические паки.
  • Сделать полноценный редактор сцены, чтобы можно было составлять композиции из многих объектов, а не ограничиваться только одним. Ну и, конечно, новые материалы, больше возможностей по управлению светом, окружением и т.д.
0
16 комментариев
Написать комментарий...
Артем Ткаченко

Реализация - супер! Единственное, там какая-то ссылка в мобильной версии, которая вроде как никуда не ведёт.

Ответить
Развернуть ветку
Useforlogin
Автор

Она вообще на почту ведет )
Спасибо.

Ответить
Развернуть ветку
Артем Ткаченко

А, ой, отставить. Это если с виси открывать он не грузит, а с браузера очень даже грузит;)

Ответить
Развернуть ветку
Артем Ткаченко

У меня она просто начинает грузится и на этом все:(

Ответить
Развернуть ветку
Useforlogin
Автор

Там сделан классический mailto, который должен открывать почтовый клиент. Хорошая идея, кстати, просто прямо почту указать )

Спасибо, переделаю.

Ответить
Развернуть ветку
PCT URL

Классный проект! Спасибо! 👍

Не нашёл (может, плохо искал?) возможность вручную задавать значения 😶

Ответить
Развернуть ветку
Useforlogin
Автор

Нет, такого нет. Отказался в угоду упрощения.

Когда сделаю вторую версию с полноценной сценой - там, конечно, будет более тонкая настройка.

Ответить
Развернуть ветку
PCT URL

Спасибо, подожду обновление 🤞

Чтобы при работе с несколькими иконками можно было сделать их все в едином стиле, под одним углом.

Ответить
Развернуть ветку
Useforlogin
Автор

Там специально для этого остается свет один и тот же на все иконки. Но с углом - да, это надо делать.

Спасибо за фидбек!

Ответить
Развернуть ветку
Andrew Karelskiy

Мне нравится. Самого волнует тема генерации ассетов. Единственное картинка на выходе отличается от превью.

Ответить
Развернуть ветку
Useforlogin
Автор

Пофиксил, спасибо!

Ответить
Развернуть ветку
Alex Gunt

Крутая штука! Можно было бы свои кастомные модельки туда добавлять

Ответить
Развернуть ветку
K R

Здорово! Только медленно и нагружает компьютер сильно. И еще у меня не получилось вращать в произвольных плоскостях.

Ответить
Развернуть ветку
Useforlogin
Автор

Что вы имеете в виду под «произвольными плоскостями»?

Ответить
Развернуть ветку
K R

Любые плоскости. У меня получилось вращать только вокруг оси, направленной от меня, но не вокруг вертикальной или горизонтальной. Так и было задумано?

Ответить
Развернуть ветку
Useforlogin
Автор

Нет, конечно нет. А что за устройство/браузер?

Ответить
Развернуть ветку
13 комментариев
Раскрывать всегда