02Коммерческий проектСайт и 3D

Фасуем Про

Сайт контрактного производства на 63 страницы с 3D-роликом и конструктором пакета.

Анимации fasovka.site ↗
Фасуем Про: пакет с печатью в 3D-конструкторе
Печать
Конструктор в режиме «Печать»: пакет с макетом Фасуем Про
Развёртка
Режим «Развёртка»: проверочная сетка на модели пакета
Телефон
Конструктор пакета на телефоне с переключателями режимов
Задача

Многостраничный сайт производства: услуги, оборудование, кейсы. На первом экране продуктовый ролик, на отдельной странице интерактивный 3D-конструктор пакета.

Роль
Разработка сайта и 3D-сцен
Стек
HTML, CSS, JavaScript, Three.js, postprocessing, Lenis, WebGL
Что сделано
  1. 63 страницы. Услуги, оборудование, кейсы, SEO-разметка. Без фреймворка и сборщика.
  2. Ролик на первом экране. Дой-пак собран кодом на Three.js, наполняется и запаивается, сценой управляет прокрутка.
  3. Студийный свет. HDR-освещение и постобработка: SMAA, виньетка, хроматические аберрации.
  4. 3D-конструктор. Режимы «Плёнка», «Печать», «Развёртка» и «Каркас». На модель ложится реальный макет печати.
  5. «Жидкое стекло» на CSS. Плашки преломляют фон настоящим SVG-фильтром.

Нужен похожий проект?

Опишите задачу в паре предложений. Ответим в переписке и предложим, с какого этапа начать.

Обсудить проект Все кейсы