Ремонт квартир, клиент, без названия
3D-история тарифов
Клиенту ремонтной компании проще выбрать тариф, когда разница видна глазами: стены, материалы и площадь меняются прямо в сцене.
- 3
- тарифа
- 4
- планировки
- 0
- правок сайта
- ЗадачаТарифы ремонта на сайте выглядели как три похожих списка. Нужно было показать, чем они отличаются, так, чтобы посетитель досмотрел до конца.
- Что я сделал
- Собрал интерактивную 3D-сцену на Three.js в стиле «тетрадь прораба»: слои стен, три тарифа по очереди, мини-игра «где сэкономили», планшет на замере.
- Квартира перестраивается по площади: студия, одна, две или три комнаты.
- Сделал рендер по кадрам для промороликов и версию для встраивания: загрузка по кнопке, рендер по требованию, проверка на мобильных.
- Встраивание не требует переделки сайта клиента.
- РезультатРолики одобрены, идет встраивание на сайт клиента. Упрощенная копия сцены - в 3D-книге на этом сайте.
- Стек и подходThree.js, детерминированный рендер для видео (Playwright, ffmpeg), ленивая загрузка.