Добавляем 3D конфигуратор на сайт без программирования

3D конфигураторы уже давно применяются в e-commerce. Проведено множество исследований, как в России, так и за рубежом, показавших благоприятное влияние 3D технологий на рост продаж. Так, по данным исследования компании «Связной» 3D модели способствуют росту конверсии в среднем на 7%.

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

Я связываю это со слабой осведомленностью существования простых инструментов по быстрому созданию эффектных 3D конфигураторов. И в этом руководстве я хотел бы рассказать об одном из них. Речь идет об онлайн сервисе Site3D Configurator.

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

3D модель лучше заказывать у художников, имеющих опыт в создании моделей для использования в вебе или компьютерных играх. Так вы получите объекты с хорошей и не перегруженной лишними полигонами геометрией и оптимизированными по размеру текстурами.

Рекомендованный сервисом вес модели – до 10 Мб, чтобы пользователю не пришлось ждать долгой загрузки. Также разработчики Site3D Configurator советуют использовать модели в формате GLB, специально разработанный для веба. Удобнее всего работать с данным форматом в популярном редакторе Blender 3D.

Для начала работы необходима регистрация, что занимает всего несколько секунд.

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

На втором шаге настраиваем стартовый вид. Далее загружаем панораму окружения. Затем определяем, какие кнопки меню отобразить. Остальные настройки оставим без изменений.

На третьем шаге добавляем для каркаса дивана и подушек разные варианты текстур.

На последнем шаге вписываем домен нашего сайта и нажимаем на кнопку «Скопировать весь код» для одновременного копирования в буфер обмена кода контейнера, где появится наш конфигуратор, и кода скрипта.

Вставить код можно в любом месте сайта. По умолчанию отобразится блок высотой в 500 пикселей, растянутый на всю ширину контейнера. Если необходим другой размер по высоте, то нужно перед копированием кода изменить этот параметр.

Теперь посетители сайта могут получить свой вариант дивана и отправить ссылку менеджерам.

В итоге мне удалось, имея готовую 3D модель, минут за 15 собрать вот такой не сложный, но довольно эффектный конфигуратор и внедрить его на сайт.

Остались вопросы? С удовольствием отвечу в комментариях. Также пишите, нужен ли разбор и других возможностей данного сервиса.