Кейс / 3D-конфигуратор
Stan: 3D-конфигуратор мерча на React и Three.js
Stan продаёт мерч под нанесение: кепки, футболки, худи, куртки. Для бренда я взял разработку 3D-конфигуратора товара: интерактивную сцену в браузере, где клиент перекрашивает изделие, накладывает логотип и текст, вращает модель на 360° и выгружает производственный PDF. Собрал в одиночку как fullstack-разработчик, проект живёт на Vercel.
- Тип
- 3D-конфигуратор мерча, B2B-инструмент
- Стек
- React, React Three Fiber, Three.js
- Роль
- Fullstack, один, под ключ
- 3D
- Вращение 360°, смена цвета и принтов
- Экспорт
- Производственный PDF, карта печати
- Шаринг
- Конфигурация в ссылке через lz-string
Что за проект и задача
Stan, это российский бренд мерча: кепки, футболки, худи, куртки под нанесение. Менеджеру нужно показывать изделие клиенту прямо на встрече и сразу собирать макет под печать. Я сделал интерактивный 3D-конфигуратор товара, который крутится в браузере без установки. Клиент выбирает изделие, перекрашивает детали в любой цвет, накладывает логотип и текст, вращает 3D-модель на 360°. Один человек от прототипа до боевой версии, я вёл проект как fullstack-разработчик.
Как работает конфигуратор
Снаружи логика простая, внутри плотная. Пользователь берёт модель, меняет цвет любой детали, накладывает принт или текст, видит результат с любого ракурса в реальном времени. Готовую конфигурацию можно сохранить и отправить ссылкой на согласование: всё состояние я упаковываю прямо в URL через lz-string, без базы и регистрации. Из той же сцены выгружается производственное задание в PDF. Я называю это картой печати для цеха.
Инженерия 3D: React Three Fiber и WebGL
3D живёт на Three.js поверх WebGL, а сцену я собираю декларативно через React Three Fiber и drei. Состояние конфигуратора держит Zustand: активная деталь, выбранные цвета, принты, текст. Главная боль таких проектов это вес моделей. Тяжёлый GLTF убивает загрузку и мобильные. Я прогоняю модели через glTF-transform и meshoptimizer, геометрия и текстуры ужимаются в разы, сцена со светом и материалами стартует быстро даже на телефоне. PDF собирает jsPDF на лету, прямо из текущей конфигурации.
Своя система против аренды SaaS
Многие бренды арендуют чужую SaaS-платформу для 3D и платят за неё каждый месяц. Stan получил собственный конфигуратор. Без подписки, без потолка по кастомизации, с полным контролем над кодом и данными. Главное отличие под задачу: система заточена под печатный бизнес и сама генерирует карту печати. Готовые конструкторы так не умеют, у них товар ради товара, а не ради цеха. Здесь видно разницу между арендой виджета и продуктом под процесс.
Поэтапная разработка 3D-конфигуратора
Разработку 3D-конфигуратора я вёл итерациями, а не одним большим релизом. Сначала прототип на одной модели: доказать, что вращение, перекраска и наложение принта работают и не тормозят. Потом каталог с админкой и автопроверкой моделей, чтобы новые изделия добавлялись без меня. Дальше вся линейка мерча. В конце слой заказа и печати: шаринг ссылкой и экспорт PDF. Такой порядок снимает риск. Каждый этап можно показать и проверить вживую.
Что это даёт бизнесу
Главный эффект наглядность. Клиент видит свой мерч в 3D на встрече, а не воображает его по плоской картинке. Решение принимается быстрее, правок меньше. Карта печати из конфигуратора снижает брак: цех получает точное задание, а не пересказ по телефону. Каталог бренд наполняет сам, без программиста на каждую новую модель. Точные цифры по конверсии я не привожу: это внутренний инструмент, а не публичный магазин с открытой аналитикой. Но направление честное, 3D вовлекает сильнее статики.
Стек проекта
- React
- React Three Fiber
- drei
- Three.js
- WebGL
- Zustand
- Framer Motion
- jsPDF
- lz-string
- glTF-transform
- meshoptimizer
- TypeScript
- Tailwind CSS
- Vite
- Vercel
Вопросы про разработку 3D-конфигуратора
На каком стеке делается 3D-конфигуратор?
В этом проекте 3D рендерит Three.js поверх WebGL, а сцена описана через React Three Fiber и drei. Состояние на Zustand, экспорт PDF на jsPDF, шаринг через lz-string, сборка на Vite. Тяжёлый игровой движок вроде Unity я не брал: для конфигуратора товара в браузере Three.js легче, грузится быстрее и не требует плагинов.
Сколько стоит разработка 3D-конфигуратора?
Зависит от числа моделей, глубины кастомизации и интеграций. Готовая SaaS-платформа берёт подписку каждый месяц, но упирается в чужие лимиты. Кастомная разработка это разовый бюджет и полный контроль над кодом. Точную вилку называю после короткого брифа, когда понятно, сколько изделий и что считать. Ориентироваться на цену одной кнопки тут нельзя, проекты слишком разные.
Можно ли интегрировать конфигуратор с CRM, 1С или складом?
Да. Конфигуратор отдаёт структурированные данные о выбранной конфигурации, и их реально прокинуть в CRM, 1С, карточку товара или на склад. В Stan фокус был на производстве, поэтому ключевой выход это карта печати в PDF. Интеграцию с учётными системами добавляю под конкретный процесс, когда у бизнеса уже есть, куда складывать заявки и заказы.
Нужны ли готовые 3D-модели и кто их делает?
Модели нужны, это основа сцены. Их готовят один раз: можно смоделировать с нуля, можно купить и доработать. Дальше я оптимизирую геометрию и текстуры под веб через glTF-transform и meshoptimizer, чтобы они быстро грузились и крутились на мобильном. В Stan каталог устроен так, что новые изделия добавляются через админку с автопроверкой моделей, без правок кода.
Работает ли 3D-конфигуратор в браузере и на мобильных?
Да, всё работает прямо в браузере, без установки приложений. WebGL поддерживают современные мобильные и десктопные браузеры. Узкое место это вес моделей, поэтому я ужимаю GLTF и слежу за числом полигонов и размером текстур. Цель простая: сцена должна стартовать быстро и крутиться плавно даже на среднем телефоне, а не только на мощном ноутбуке.
Можно ли генерировать производственное задание из конфигуратора?
Да, и для печатного бизнеса это часто главное. В Stan конфигуратор собирает производственный PDF прямо из текущей сцены: что за изделие, какие цвета, где принт и текст. Я называю это картой печати. Цех получает точное задание, а не пересказ. Поля и формат настраиваются под конкретное производство, чтобы документ ложился в реальный процесс.
Чем кастомный конфигуратор лучше готовой SaaS-платформы?
SaaS быстрее на старте, но дальше начинаются ограничения: ежемесячная аренда, чужие лимиты на кастомизацию, данные на стороне сервиса. Своя разработка даёт контроль над кодом, дизайном и логикой плюс специфику под ваш процесс, как карта печати в Stan. Если конфигуратор это разовый виджет, хватит SaaS. Если это часть продукта и продаж, кастом окупается.
Повышает ли 3D-конфигуратор конверсию?
Честно: гарантировать процент я не стану, цифры зависят от ниши и трафика. Что видно по логике и по Stan: интерактивная 3D-модель вовлекает сильнее плоской картинки, человек крутит товар сам и быстрее принимает решение. Меньше недопонимания на согласовании, меньше брака на печати. Это работает на продажи, но обещать конкретные проценты без ваших данных было бы нечестно.