Интернет-магазин велосипедов

При выборе велосипеда покупателю важно понимать, как устроена конкретная модель: какую геометрию имеет рама, где расположены компоненты, как выглядят отдельные детали. Фотографии показывают товар только с заданных ракурсов, а характеристики требуют пояснений.

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

Мы хотели приблизить онлайн-просмотр к знакомству с велосипедом в обычном магазине — дать покупателю возможность подробнее рассмотреть товар перед выбором.

Для этого требовалось:

• создать достаточно детализированные 3D-модели велосипедов;
• уменьшить размер файлов для загрузки на сайте;
• встроить модели в карточки товаров;
• добавить интерактивные точки с пояснениями о компонентах;
• сохранить возможность выбирать товары через привычный каталог и фильтры.

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

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

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

В карточку велосипеда встроили 3D-модель, которую можно вращать и рассматривать с разных сторон.

На модели разместили интерактивные точки. При нажатии пользователь получает информацию о раме, трансмиссии, вилке, тормозах и других компонентах. Это позволяет связать характеристики из описания с конкретными деталями велосипеда и увидеть их расположение.

Для подготовки моделей использовали Tripo AI и 3ds Max.

Сначала в Tripo AI загружаются минимум четыре фотографии товара, желательно сделанные под прямым углом. Качественные снимки с разных сторон дают системе больше информации о геометрии велосипеда. Первичная генерация занимает примерно 2–5 минут.
Полученную модель дорабатываем в 3ds Max и оптимизируем для сайта. На этом этапе сохраняем необходимую детализацию и уменьшаем объём файла.

Такой процесс сокращает время на подготовку исходной модели. При этом 2–5 минут — время генерации, а не полного цикла создания готового для сайта 3D-контента.

В рамках проекта удалось подготовить модели размером около 5 МБ. Это позволило встроить подробный просмотр велосипеда без загрузки исходных файлов весом в десятки мегабайт.

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

Мы объединили веб-разработку и работу с 3D-контентом: от каталога и фильтров до создания, доработки и размещения моделей на сайте.

При таком подходе заказчику не нужно отдельно искать подрядчика по 3D-моделированию и координировать его работу с веб-разработчиками. Одна команда готовит модели с учётом того, как они будут использоваться в интерфейсе магазина.

Создали концепт интернет-магазина, в котором интерактивные 3D-модели дополняют фотографии и характеристики товаров.

В рамках проекта:

• реализовали каталог с фильтрами и сортировкой;
• встроили 3D-просмотр в карточки велосипедов;
• добавили интерактивные точки с информацией о компонентах;
• выстроили процесс создания исходных моделей по фотографиям с генерацией за 2–5 минут;
• подготовили модели размером около 5 МБ;
• объединили создание, оптимизацию и интеграцию 3D-контента внутри одной команды.

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