21.06.2021 Интернет, стартапы

Кофе Жокей: сага об идеальном 3D для промо-сайта

Заказчик проекта — группа компаний «Орими», крупнейший в России производитель чая и натурального кофе. Мы уже работали с этим заказчиком над промо-сайтом чая Greenfield, и заказчик вернулся к нам за сайтом для знаменитой марки кофе «Жокей».

Дизайн и разработка

Еще на этапе аналитики мы определись, что ключевой фишкой проекта станут 3D-модели — в промо-блоке на главной странице и на страницах продуктов. Чтобы упаковки продукта выглядели, как в жизни, мы решили делать их с натуры: накупили кучу разных упаковок кофе «Жокей» и моделировали на их основе.


Для отображения основной линейки продуктов мы подготовили четыре базовых модели, на основе которых сделали десять видов упаковок. На дизайне они выглядели супер, но вот на верстке оказалось, что браузер не передает все тени, складки и вмятины на упаковках, а нам хотелось показать их максимально настоящими. Чтобы довести их до идеала в браузере, дизайнер с разработчиком бок о бок проверяли разные настройки экспорта, подгоняли яркость и насыщенность текстур, настраивали симуляцию преломления света и прочие тонкости. Но все эти сложности себя оправдали.

Для вывода 3D-моделей на сайте мы использовали библиотеку Three.js. Это легковесная кроссбраузерная библиотека javascript, используемая для создания и отображения анимированной компьютерной 3D графики при разработке веб-приложений. В карточке товара на модель можно просто посмотреть с разных сторон. В промо-блоке на главной можно именно покрутить модель, анимация имеет три состояния: слабое вращение при движении мыши, разворот на 180° и разворот на 360° при смене слайда.

Сайт рассчитан не только на оптовиков, но и на людей, которые покупают кофе для себя. Для них на сайте мы реализовали вирусный механизм геймификации — тест «Какая ваша рабочая суперсила?». Вопросы-ответы теста настраиваются в админ-панели и для определенных комбинаций выводится свой результат: суперсила пользователя и подходящий именно ему продукт.

Для фильтра в списке товаров мы отрисовали уникальные иконки для выбора типа кофе. В карточке товара предусмотрено все для идеального восприятия: 3D-модель упаковки, визуализация силы вкуса, обжарки и помола кофе, отдельный экран для способов приготовления и возможность переключения между разными фасовками и типами кофе. Фон карточки товара можно выбрать из нескольких пресетов в админ-панели.

Готовый проект: Кофе Жокей
Подробнее о процессе разработки читайте в блоге scrum-студии «Сибирикс»