Портфолио

Услуги

О нас

Блог

Контакты

Кейс

Промо-сайт энергетика Stingray: 3D-банка и админка на Битриксе

Промо-сайт энергетика, где банку рассматривают со всех сторон: трёхмерная модель в браузере вместо фотосъёмки, печатные развёртки вместо нарисованных этикеток и админка, из которой меняется не только текст, но и цвет всей сцены.

Банка энергетика Stingray, собранная в 3D

Stingray, энергетический напитокДизайн и арт-дирекция · 3D и анимация · Фронтенд · Интеграция с 1С-Битрикс2026

Задача

У напитка не было сайта, а до полки в магазине бренду нужно было показать себя дистрибьюторам и первым покупателям. Снимать банку в студии — значит получить набор ракурсов, которые устареют вместе с первой же сменой этикетки.

К старту готовились два вкуса, а дальше линейка должна была расти. Поэтому сайт с самого начала делался не под «два экрана с фотографиями», а под то, что вкусы будут добавляться — и добавлять их должен клиент, без нас.

Смотреть вживую

stingrayenergy.ru

↗

банка в браузере вместо фотосессии

вкуса на старте, новые добавляет клиент

строк кода, чтобы завести новый вкус

источник правды — карточка вкуса в админке

Банку не сфотографировать со всех сторон — её можно собрать

Вместо фотосъёмки мы собрали банку трёхмерной моделью и поставили её в центр страницы. Она поворачивается по мере прокрутки: человек не листает галерею ракурсов, а сам разглядывает продукт — так же, как крутил бы его в руке у полки.

Прокрутка идёт через Lenis и GSAP ScrollTrigger, сцена — на Three.js. Ни одного кадра с фотостока: всё, что видно на экране, считается в браузере в момент просмотра.

Первый экран сайта Stingray: трёхмерная банка энергетика на синем фоне

Первый экран сайта — кадр целиком, без обрезки

Металл под печатью, а не рисунок поверх цилиндра

Этикетки взяты не из макета дизайнера, а из печатных развёрток CANPACK — тех самых, по которым банку печатают на заводе. В развёртке есть зоны без белил: там краска не ложится и остаётся голый алюминий.

Поэтому банка в сцене двухслойная: снизу металлический корпус, сверху прозрачная печать. Сквозь непрокрашенные зоны виден металл — и блик по нему идёт так же, как по настоящей банке. Именно это отличает объёмный предмет от наклейки на цилиндр.

Банка Stingray Original: сквозь непрокрашенные зоны этикетки виден металл

Вкус меняет не картинку, а всю сцену

У каждого вкуса в админке есть свой цвет. Из него собирается палитра фона: оригинальный — холодный синий, ягодный микс — фиолетовый. Переключение вкуса перекрашивает не банку, а весь экран вокруг неё.

Это и есть причина, по которой цвет живёт в карточке вкуса, а не в стилях. Добавляя третий вкус, клиент задаёт его цвет — и сцена принимает новый вид сама, без нашего участия.

Цвет фона считается из поля вкуса, а не прописан в вёрстке

Новый вкус появляется на сайте без единой строки кода

Этикетка загружается в админку картинкой и ложится на модель

Линейка, рассчитанная на рост

На старте в продажу пошли два вкуса — оригинальный и ягодный микс. Остальные банки линейки отрисованы заранее, и сайт с первого дня умеет показать вкус, которого ещё нет на полке: для этого не нужен ни новый макет, ни новая вёрстка.

Два вкуса вышли на старте, остальные ждут своей очереди

Админка, из которой управляют трёхмерной сценой

Клиенту нужна была не «правка текстов по заявке», а собственная админка, поэтому сайт живёт на 1С-Битрикс. Вкусы, новости и точки продаж — обычные разделы: добавил элемент, заполнил поля, увидел на сайте.

Тонкость в том, что через админку редактируется и трёхмерная часть. Сцена читает список вкусов, который отдаёт Битрикс: у каждого вкуса там свой цвет и своя этикетка, загруженная картинкой. То есть админка управляет не только текстом, но и тем, что происходит в 3D.

Блок «Где купить» исчезает сам, если ни один магазин не отмечен активным. Пустых разделов на сайте не бывает: нечего показать — блока нет.

раздела в админке: вкусы, новости, магазины, главная

сцена берёт данные оттуда же, откуда тексты

Стек

Three.js

GSAP ScrollTrigger

Lenis

1С-Битрикс

PHP 8

вопросы

Спрашивают чаще всего

Зачем энергетику 3D, если можно снять банку на фото?

Фотосъёмка даёт фиксированный набор ракурсов, и он устаревает вместе с первой же сменой этикетки. Модель показывает банку со всех сторон, а новую этикетку на неё надевают загрузкой картинки в админку — без повторной съёмки.

Сайт с 3D тяжело грузится?

Модель одна, и она грузится один раз. Тяжёлым сайт делает не 3D само по себе, а привычка тянуть на первый экран всё сразу: галереи, видео и шрифты, которые в этот момент не нужны.

Клиент может сам добавить вкус?

Да, это и было условием. Новый вкус — это новый элемент в админке: название, цвет, этикетка. Сцена подхватывает его сама, дорабатывать код не нужно.

Почему 1С-Битрикс, а не своя админка?

Потому что сайт остаётся у клиента, а не у подрядчика. Битрикс — распространённая система: её знают штатные контент-менеджеры, и любой другой разработчик потом сможет её подхватить.

другие работы