Конфигуратор продукта
Покупатель сам выбирает цвет, материал и размер и сразу видит результат со всех сторон. Меньше вопросов «а как это будет выглядеть».
Грань 06 · 3D на сайте
3D по делу.
Конфигураторы, 3D-каталоги и живые сцены прямо в браузере — когда предмет нужно покрутить, собрать или примерить, а не просто посмотреть на фото.
(01) Что это и кому
3D — не ради «вау»
Объём оправдан, когда предмет нужно покрутить, собрать, примерить или прочувствовать. Если хватит хорошей фотографии — так и скажем.
Подходит, если
- Продукт выигрывает от вращения и настройкиМебель, техника, оборудование, украшения, упаковка
- Нужен первый экран, который запоминаютЗапуск бренда или продукта, имиджевый сайт
- Презентация или выставкаСцена на большом экране или на планшете у стенда
- Устройство проще показать, чем описатьРазобрать узел, заглянуть внутрь
Не подходит, если
- Нужен быстрый и недорогой сайтНачните с лендинга — 3D можно добавить позже модулем
- Аудитория в основном на старых телефонахБольшинство увидит лёгкую версию, и бюджет на сцену не окупится
- 3D «просто чтобы было»Без задачи оно только утяжелит страницу
Честно о цене вопроса
Бюджет выше
Моделирование, свет, материалы и тесты на устройствах — отдельная работа. Флагман с 3D — от 150 000 ₽, модуль к готовому сайту — от 35 000 ₽.
Страница тяжелее
Модель весит больше картинки. Сжимаем геометрию и текстуры, а сцены ниже первого экрана грузим, только когда до них доскроллили.
Слабым телефонам тяжело
Им — лёгкая версия: картинка или видео на месте сцены. Тексты, цены и кнопка заявки — там же, где у всех.
(02) Как это устроено
Как 3D попадает на сайт
Пять шагов от модели до страницы, которая быстро открывается и на телефоне. Прокрутите — ваза пройдёт их все. Её можно повернуть мышью или пальцем.
-
Моделируем предмет или берём ваши файлы. Модель — это сетка из треугольников: чем их больше, тем точнее форма и тяжелее файл.
-
Убираем детализацию, которую глаз не заметит, сжимаем геометрию и текстуры. Форма та же — файл заметно легче.
-
Ставим свет, камеру и материалы: керамика, стекло, металл, ткань. Здесь предмет начинает выглядеть настоящим.
-
Вращение, выбор цвета и размера, реакция на скролл. Попробуйте кнопки цвета у вазы — это конфигуратор в миниатюре.
-
Если устройство не тянет или включено «уменьшение движения», вместо сцены — лёгкая картинка или видео. Тексты, цены и кнопка заявки на месте.
(03) Что входит
От модели до лёгкой версии
Всё, что нужно, чтобы сцена работала на реальных устройствах, а не только на мощном компьютере дизайнера.
- Разбор и сценарийЗачем здесь 3D, что посетитель должен сделать со сценой, с каких устройств приходит ваша аудитория.
- 3D-модельС нуля — по фото, чертежам или образцу. Или подготовка вашей модели из CAD и 3D-редакторов.
- ОптимизацияУбираем невидимую геометрию, сжимаем модель и текстуры.
- Свет и материалыСтекло, металл, дерево, ткань — чтобы предмет выглядел настоящим и в стиле бренда.
- ВзаимодействиеВращение, выбор цвета, материала и размера, подсказки, анимация по скроллу.
- Лёгкая версияКартинка или видео для слабых устройств и режима «уменьшение движения».
- СкоростьЛенивая загрузка сцены, пауза рендера вне экрана, ограничение плотности пикселей.
- Тесты на устройствахНоутбуки, iPhone и Android — включая недорогие модели.
- АналитикаСобытия в Яндекс Метрике: какие цвета и варианты выбирают в конфигураторе.
- Базовое SEOТексты остаются текстом, микроразметка, sitemap, скорость, Вебмастер и Метрика.
(04) Что можно сделать
Где 3D действительно помогает
Не каталог эффектов, а задачи: показать, объяснить, дать выбрать, вовлечь. Каждая сцена — под конкретное действие посетителя.
3D-каталог
Товары, которые можно повертеть прямо в карточке: рассмотреть фактуру, крепления и обратную сторону, которую не видно на фото.
Интерактивная схема
Как устроено изнутри: разобрать узел по слоям, подсветить деталь, провести по процессу шаг за шагом прямо по скроллу.
Эффекты бренда
Жидкое стекло, линзы, свет и спектр — как на нашей главной. Первый экран, который запоминают и пересылают.
Мини-игра в браузере
Игра прямо на странице, без установки: механика, правила, счёт. Как карточная игра, которую мы перенесли в браузер для школы.
3D-модуль к готовому сайту
Переделывать весь сайт не нужно: встраиваем одну сцену — конфигуратор или витрину — в существующую страницу.
(05) Из наших работ
WebGL, который уже работает
Жидкая галерея на нашем собственном сайте, игра, в которую можно сыграть прямо в браузере, и демо 3D-конфигуратора — его можно покрутить.
Сайт ПРИЗМЫ · WebGL
Вы уже видели: жидкая галерея и линза
На главной работы едут лентами, которые гнутся от скорости скролла, а на первом экране под курсором — линза. Это шейдеры на WebGL (three.js) — с лёгкой версией для слабых устройств и паузой, когда блок уходит с экрана.
Посмотреть на главной ИНТЕЛЛЕКТ-ПЛЮС · частная школа
Карточная игра — прямо в браузере
Авторскую игру школы «Побег из теплицы» — 116 карт, 7 цветов-заданий, 3 режима — мы перенесли в браузер. Играть можно прямо на странице, без установки: против садовника, который не выпускает растение из теплицы.
Концепт-кейс · бренд вымышлен
3D-конфигуратор ковра на заказ
Покупатель сам выбирает форму, размер, узор, цвета, ворс и окантовку — ковёр меняется в 3D вживую, цена и срок пересчитываются сразу. Узор рисуется кодом, а без WebGL работает лёгкая 2D-версия. Покрутите — это работающий модуль, а не видео.
Открыть демо на весь экран
(06) Как мы делаем
Сначала прототип, потом красота
Флагман с 3D — 4–6 недель от разбора до запуска. Идею сцены проверяем в браузере ещё до дизайна, чтобы не рисовать то, что не потянет телефон.
Разбор
2–3 дня
Что крутим и зачем, какие устройства у аудитории, референсы. Фиксируем смету.
Концепция
3–4 дня
Прототип сцены в браузере: черновая модель, свет, камера. Проверяем идею до дизайна.
Дизайн
5–7 дней
Макеты страниц, материалы, интерфейс конфигуратора и лёгкая версия.
Разработка
2–2,5 недели
Модель, оптимизация, сцена, взаимодействие, вёрстка и тесты на устройствах.
Запуск
2–3 дня
Финальные проверки, SEO и аналитика, доступы и инструкция.
3D-модуль к готовому сайту
Одна сцена: конфигуратор, витрина товара или эффект первого экрана
от 35 000 ₽
срок — по объёму сцены
Цены — ориентиры. Точную смету фиксируем после бесплатного разбора. Работаем по договору, оплата по этапам: 20 % — старт, 30 % — после согласования дизайна, 50 % — после запуска. Базовое SEO входит в каждый пакет.
(07) Вопросы
Что спрашивают про 3D
Не нашли свой вопрос — напишите, ответим в течение 24 часов.
Сайт с 3D не будет тормозить?
Не должен — это закладываем с первого дня. Модель и текстуры сжимаем, сцену загружаем, только когда до неё доскроллили, и ставим рендер на паузу, когда её не видно. Плотность пикселей ограничиваем, а на слабых устройствах включаем лёгкую версию. Перед запуском проверяем на ноутбуках и телефонах.
Что увидит человек со старым телефоном?
Лёгкую версию: картинку или короткое видео на месте сцены. Тексты, кнопки и заявка работают так же. Ту же версию видят те, у кого в системе включено «уменьшение движения». Как это выглядит, можно проверить прямо здесь — кнопкой «Лёгкая версия» на первом экране.
У нас нет 3D-модели. Это проблема?
Нет. Смоделируем по фотографиям, чертежам или образцу. Если модель есть — из CAD, 3ds Max, Blender или от производителя, — подготовим её для сайта: уберём лишнюю детализацию и сожмём.
Сколько стоит 3D и от чего зависит цена?
Флагманский сайт с 3D — от 150 000 ₽ и 4–6 недель. 3D-модуль к уже готовому сайту — от 35 000 ₽. Цена зависит от числа объектов, детализации, количества вариантов в конфигураторе и сложности взаимодействия. Точную смету фиксируем после бесплатного разбора.
Можно добавить 3D на уже готовый сайт?
Да, это 3D-модуль: одна сцена — например, конфигуратор или витрина товара — встраивается в существующую страницу, переделывать сайт не нужно. Как встроить её в вашу платформу, скажем на разборе.
Поисковики увидят то, что внутри 3D-сцены?
Саму сцену — нет, поэтому всё важное дублируем обычным текстом: заголовки, описания, характеристики. Базовое SEO входит в каждый проект: мета-теги, микроразметка, sitemap, скорость, подключение Яндекс Вебмастера и Метрики.
(08) Спектр целиком
Другие грани
3D редко живёт само по себе: обычно это часть сайта компании или лендинга, а сцене нужен моушн и айдентика.