Как сделать конфигуратор на сайте


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

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

На мой взгляд, единственная проблема, которая мешает развитию этой тенденции — отсутствие эффективных инструментов. Большинство из них являются трёхмерными движками, которые могут быть очень полезны программисту, но не обычному художнику. Но есть и исключения: аддон Verge3D к пакетам 3ds Max и Blender предлагает средства, с помощью которых трёхмерные конфигураторы может сделать и обычный человек. Именно этот инструмент мы и разберём в нашей статье.

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

Кликните тут чтобы запустить конфигуратор в новом окне.


Поскольку Verge3D может работать как с 3ds Max, так и с Blender, мы разберём оба инструмента. В этой статье мы предполагаем, что у вас уже установлен Verge3D. Если нет, качайте и устанавливайте с сайта разработчика. Там же имеется хорошее руководство по установке и обучающие видеоуроки.

Наш план


Не слушайте людей, которые говорят, что создание 3D конфигураторов это сложно и дорого. Всё намного легче, если чётко изучить процесс:
  1. Создаём контент (3D модели и материалы).
  2. Делаем приложение интерактивным, то есть реагирующим на действия пользователя.
  3. Публикуем конфигуратор в сети.

Давайте рассмотрим весь процесс по порядку.

Создание 3D-контента


Этот шаг является самым сложным. Однако, если у вас есть хоть какой-то опыт работы в пакетах 3ds Max и Blender или друг/сотрудник, у которого есть подобный опыт, всё делается довольно быстро.

Прежде всего, создаём 3D приложение с помощью менеджера приложений Verge3D. Введите имя проекта в диалоговом окне, показанном ниже, и оставьте остальные настройки как есть.

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

Следующий этап — создание материалов и текстур. Помните, что вы всегда можете ознакомиться с материалами, просто посмотрев исходные файлы в установленной сборке Verge3D (они лежат в директории applications/ring для Blender версии и applications/ring_max для 3ds Max версии).

Серебро и золото


Так выглядит серебряный материал в Блендере. Основа материала — сферическая текстура (называемая «ring_matcap»), смешанная с шумовой картой и картой нормалей. Первая представляет собой «металлическую» поверхность, а две другие делают материал более реалистичным. Поскольку у нас есть 3 разных металла: серебро, розовое и желтое золото, мы просто делаем небольшие корректировки цветности в блоке ColorRamp указанного на картинке материала.

Примерно также выглядит серебряный материал в 3ds Max. Он несколько проще, поскольку у него есть дополнительная текстура Diffuse Color, отвечающая за цвет металлической поверхности.

Бриллиант


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

А вот это материал внешнего слоя драгоценного камня, он отвечает за грани бриллианта:

Абсолютно также сделан алмаз в 3ds Max. На картинке ниже изображены оба слоя драгоценного камня.

Расскажу немного как создавать текстуры для таких материалов. Тут нет ничего сложного. Большинство из них являются примитивными текстурами шума/отблесков и окружения, которые вы можете создать самостоятельно или найти готовые изображения в Интернете. Исключением являются карты нормали, которые придётся запекать из высокополигональных моделей.

Добавление интерактивности


С помощью визуального редактора Puzzles вам не нужно быть программистом, чтобы сделать приличный 3D-конфигуратор. Просто используйте паззл «on click», чтобы приложение реагировало на действия пользователя, «show»/«hide», чтобы изменить форму кольца и «assign material» для изменения материалов. В этом ювелирном приложении у нас есть 4 разных кольца, каждое из которых выполнено из трёх разных материалов, соответственно серебро и золото розового и желтого оттенков.

Вот как выглядит вся логика в сборе:

Как видите, тут нет ничего сложного. С левой стороны располагается блок выбора колец, а правая сторона отвечает за изменение материалов.

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

Публикуемся


Это самое простое. Любое Verge3D-приложение может быть развернуто на ваших собственных ресурсах или загружено в облачный хостинг Verge3D Network. В последнем случае, просто нажмите значок зеленого глобуса в менеджере приложений, и в течение нескольких секунд/минут ваш конфигуратор окажется в облаке. По окончании загрузки вы увидите нечто вроде этого:

В диалоговом окне вы можете получить прямую ссылку на свое приложение, фрагмент HTML-кода для встраивания конфигуратора всобственный веб-сайт или блог (или уже готовый интернет магазин). Тут же имеются кнопки для расшаривания приложения через социальные сети.

Заключение


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

Решения для трёхмерных конфигураторов растут как грибы после дождя, однако использование Verge3D для этих целей имеет ряд преимуществ. Среди них хорошая интеграция с пакетами моделирования, отсутствие зависимости от облачных решений и гибкость в разработке трёхмерных приложений. В общем, в интересное время живём!

Самостоятельный 3D-конфигуратор продуктов - краткое руководство

3D-конфигураторы продуктов - это новая важная тенденция в онлайн-маркетинге и электронной коммерции. Это стало возможным благодаря быстрому развитию WebGL, технологии отображения трехмерной графики прямо в веб-браузерах клиентов. Единственная проблема, которая мешает этой тенденции развиваться еще быстрее, - это отсутствие эффективных инструментов. К счастью, с Verge3D вы можете довольно легко создавать интерактивные 3D-настройщики. В этом руководстве мы описываем наиболее простой и легкий в использовании конвейер для создания таких приложений.

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

Конфигуратор ювелирных изделий, созданный с помощью Verge3D.

Кстати, исходные файлы (3ds Max, Blender и Puzzles) для этого конфигуратора можно найти в дистрибутиве Verge3D.

Так как Verge3D работает как с 3ds Max, так и с Blender, мы собираемся сделать это руководство независимым от пакетов 3D. Кроме того, в этой статье мы предполагаем, что у вас уже установлен Verge3D.Если нет, ознакомьтесь с руководствами по установке Verge3D для 3ds Max или Verge3D для Blender.

Резюме

Не слушайте людей, которые говорят, что создание 3D-конфигураторов продукта сложно и дорого - на самом деле это довольно просто! Просто придерживайтесь плана:

  1. Создавайте 3D-контент (модели + материалы).
  2. Сделайте свое 3D-приложение интерактивным с помощью редактора головоломок.
  3. Опубликуйте свой конфигуратор в Интернете.

Давайте рассмотрим процесс производства поэтапно.

Создание 3D-контента

Это самый сложный шаг. Но если у вас есть опыт работы с 3ds Max или Blender, или у друга или сотрудника, у которого есть такой опыт, все будет в порядке.

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

Затем создайте свои модели. Обратите внимание, что для достижения наилучших результатов ваши 3D-объекты должны быть мидл-поли, в основном не используйте более 100 000 полигонов на модель.

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

Серебро и золото

Так выглядит материал серебра в Blender. По сути, мы имеем сферическую текстуру (называемую «ring_matcap»), смешанную с шумом и текстурами карты нормалей. Первый представляет собой «металлическую» поверхность, а два других делают визуализированный материал более реалистичным.Поскольку у нас есть 3 разных материала: серебро, розовое и желтое золото, мы просто вносим незначительные изменения в одну и ту же систему узлов, настраивая необходимые цвета на процедурных картах ColorRamp.

Так выглядит тот же серебристый материал в 3ds Max. Это несколько проще, поскольку у него есть дополнительная текстура Diffuse Color, представляющая цвет визуализированной поверхности.

Алмаз

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

На следующем изображении показан внешний слой камня. Это просто покровная сетка, представляющая стороны алмаза:

То же самое и для алмазного материала 3ds Max, изображение ниже включает оба слоя камня:

У вас может возникнуть вопрос, как создавать текстуры для таких материалы. Собственно, ничего сложного здесь нет.Большинство из них - это базовые процедурные карты шума / ухабов / окружающей среды, которые вы можете создать самостоятельно или найти готовые изображения в Интернете. Исключение составляют текстуры карты нормалей, которые необходимо сгенерировать из высокополигональных моделей и запечь поверх среднеполи.

Добавление интерактивности

С головоломками вам не нужно быть программистом, чтобы создать модный 3D-конфигуратор. Просто используйте головоломку «при нажатии», чтобы ваше приложение реагировало на действия пользователя, «показать» / «скрыть», чтобы изменить форму кольца, и «назначьте материал», чтобы изменить материалы.В этом ювелирном приложении у нас есть 4 разные модели колец в вариантах из серебра, розового и желтого золота.

Вот как выглядит логика в редакторе головоломок:

Смотрите, здесь нет ничего сложного. С левой стороны вы можете увидеть головоломки показать / скрыть, а правая сторона отвечает за изменение материалов кольца.

Всего это простое приложение предлагает до 12 вариантов колец!

Подключение к Интернету

Эта часть проста.Контент Verge3D можно развернуть на ваших собственных веб-серверах или загрузить на платформу распределенного хостинга под названием Verge3D Network. В последнем случае просто щелкните значок зеленого глобуса в диспетчере приложений, чтобы сохранить конфигуратор в облаке. После успешной загрузки вы увидите что-то вроде этого:

В этом диалоговом окне вы можете получить прямую ссылку на свое приложение, фрагмент кода HTML для встраивания конфигуратора в ваш собственный веб-сайт / блог / интернет-магазин и различные кнопки для совместного использования приложение через социальные сети.

Заключение

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

.

Создание практичного 3D-конфигуратора изделий без единой строчки кода

В нашей предыдущей статье «Самостоятельный 3D-конфигуратор изделий» мы обсуждали создание базового приложения для настройки ювелирных изделий с использованием платформы Verge3D в сочетании с пакетами моделирования Blender или 3ds Max.

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

  • Расчет стоимости на основе конфигурации пользователя.
  • Отправка заказов для дальнейшей обработки менеджером по продажам.
  • Кнопки социальных сетей.

В конечном итоге у нас будет что-то вроде этого:

Щелкните изображение, чтобы запустить приложение

Как обычно, вы можете найти исходные файлы (3ds Max, Blender и Puzzles) этого конфигуратора, а также WordPress. сам плагин в последней версии Verge3D.

План

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

  • Во-первых, нам нужно настроить сервер для вашего приложения электронной коммерции.
  • Затем мы создаем логику головоломок для расчета и отображения общей цены, а также логику для отправки заказов.
  • Наконец, мы добавляем в ваше приложение параметры совместного использования LinkedIn, Google+, Twitter и Facebook.

Давайте рассмотрим этот производственный процесс шаг за шагом.

Настройка сервера

В этом руководстве мы предполагаем, что на вашем сервере установлена ​​система управления контентом WordPress.Начиная с версии 2.7, Verge3D поставляется с подключаемым модулем для WordPress, который делает трехмерный контент легко доступным для более чем 60 миллионов веб-сайтов по всему миру. Этот плагин предлагает приятную функцию, которая будет очень удобна в нашем проекте - простую систему электронной коммерции для обработки заказов клиентов, которые, в свою очередь, можно отправлять с помощью головоломки «разместить заказ» (мы собираемся обсудить эту головоломку в чуть позже).

Если у вас нет сервера или вы не знаете, что такое WordPress, не паникуйте! Просто погуглите «WordPress хостинг» и закажите готовую установку этой системы за несколько баксов в месяц.Чтобы начать работать с ним, совсем не обязательно быть программистом или опытным веб-дизайнером!

Давайте продолжим установку нашего сервера. Сначала установите и активируйте плагин Verge3D через меню «Плагины» в интерфейсе администратора WordPress. Вы можете найти этот плагин в официальном репозитории WordPress.org.

Чтобы обрабатывать заказы, отправленные приложениями Verge3D, добавьте форму заказа на некоторые из ваших страниц / сообщений WordPress, используя следующий шорткод:

[verge3d_order]

Этот шорткод создаст красивую форму, которая должна выглядеть примерно так (на самом деле это может выглядеть по-разному в зависимости от вашей темы WordPress):

Все заказы, отправленные через эту форму заказа, будут доступны через меню «Электронная коммерция» в вашем интерфейсе администратора WordPress:

Заказы в этом списке являются создается автоматически при получении запросов от вашего конфигуратора.Вы можете использовать этот экран для просмотра заказов клиентов и управления ими. Например, когда Джон заказывает серебряное кольцо с тремя маленькими драгоценными камнями за 180 долларов, вы можете позвонить ему или отправить электронное письмо, чтобы подтвердить его заказ и узнать любую дополнительную информацию, такую ​​как адрес доставки или способ оплаты.

Это все, что вам нужно сделать с сервером! Пришло время вернуться к нашему конфигуратору и заставить его работать с WordPress.

Связывание конфигуратора с формой заказа

Эта деталь действительно проста.Просто используйте пазл «разместить заказ», чтобы отправить заказ. Заполните URL-адрес «отправлено» ссылкой на форму заказа. Также укажите название, содержание и общую стоимость вашего заказа. Вот что у нас получилось:

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

Сделайте свое приложение ориентированным на социальные сети

Вы когда-нибудь видели магазин без кнопок социальных сетей? Нет? Тогда давайте решим это с помощью следующих головоломок:

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

В заключение

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

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

Спасибо, что прочитали это, не стесняйтесь делиться своими мыслями ниже в комментариях!

.

html - Как создать конфигуратор товаров для интернет-магазина?

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
  3. Вакансии Программирование и связанные с ним технические возможности карьерного роста
  4. Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
.

OptionsOptions Конструктор конфигуратора - Klaas Nienhuis

OptionsOptions позволяет создавать простые конфигураторы. Он использует Sketchfab для отображения 3D-модели. С помощью конфигуратора вы можете изменить материалы вашей модели. Например, цвет кузова автомобиля или цвет шлема штурмовика. Посмотрите пример здесь.

Главное окно OptionsOptions Веб-сайт конфигуратора, созданный с помощью OptionsOptions

Настройка материалов

После того, как вы настроите свои материалы, OptionsOptions приступит к работе.Конфигуратор строится автоматически. Сначала он сохраняет ваши материалы в библиотеке материалов. Затем он загружает вашу модель в Sketchfab. Наконец, он создает для вас мини-сайт. На веб-сайте есть меню для выбора параметров вашего конфигуратора. Вы можете выбрать один из вариантов, например цвет кузова автомобиля. Но у вас также может быть несколько независимых вариантов, таких как цвет кузова, цвет салона и цвет стекла. Каждый из них настраивается отдельно.

Характеристики

  • Простая загрузка модели в Sketchfab
  • Автоматическое создание веб-страницы с параметрами конфигурации
  • Преобразует стандартные материалы в материалы pbr
  • Настройка сцены sketchfab одним щелчком мыши на pbr.Нет необходимости входить в sketchfab, чтобы изменить эти настройки
  • Надлежащая документация

История

  • 04.12.2015 0,01 Первый выпуск
.

Смотрите также

Поделиться в соц. сетях

Опубликовать в Facebook
Опубликовать в Одноклассники
Вы можете оставить комментарий, или ссылку на Ваш сайт.

Оставить комментарий