Build a simple product configurator in Unity in one hour or less
Эта веб-страница была переведена с помощью машинного перевода для вашего удобства. Мы не можем гарантировать точность или надежность переведенного контента. Если у вас есть вопросы о точности переведенного контента, обращайтесь к официальной английской версии веб-страницы.
Конфигуратор продукции может изменить способ взаимодействия клиентов с вашими товарами, переведя этот опыт за рамки просмотра статичных изображений в интерактивный формат, предоставляя зрителю более подробную информацию и больше данных.
В промышленных приложениях конфигураторы позволяют демонстрировать сложное оборудование, обеспечивают возможность индивидуальной настройки в режиме реального времени и помогают клиентам визуализировать продукцию в конкретных условиях.
В этом руководстве вы создадите свой первый веб-конфигуратор продукта менее чем за час. Ваш конфигуратор позволит пользователям изменять различные материалы на 3D модели с помощью простого интерфейса. В итоге вы получите представление об основных функциях, необходимых для создания профессиональных конфигураторов продукции.
Если вы предпочитаете пошаговое руководство с видеоинструкцией, вы можете посмотреть его здесь .
Для получения более подробной информации ознакомьтесь с нашим вебинаром по этой теме.Шаблон конфигуратора продукта
Требования
Этот учебный материал предназначен для разработчиков, обладающих начальным и средним уровнем знаний в разработке проектов в Unity. Для завершения обучения вам потребуется:
1. Установите следующее :
- Поддержка сборки Unity 6 с WebGL
- Пробная или стандартная лицензия для Unity Industry
— Пакет Unity Industry Product Configurator, доступный на GitHub.
2. Добавить 3D модель : Используйте свой собственный файл 3D модели или файл, включенный в шаблон.
3. Добавить основные материалы : Подготовьте как минимум 2-3 разных материала или используйте металлические материалы, уже включенные в инструкцию.
Примерное время выполнения : 30-60 минут
Ознакомьтесь с примером проекта.
В этом уроке в качестве основы для обучения и отправной точки используется пример проекта Industry Product Configurator от Unity. В приведенном примере демонстрируется полностью работоспособный конфигуратор с возможностью переключения материалов и компонентов, управлением камерой и пользовательским интерфейсом — именно те функции, которые вы научитесь реализовывать в ходе упражнения.
В пример включены готовые компоненты для отображения, а также варианты материалов, анимации и преобразований, так что вы можете сосредоточиться на своем продукте, а не на создании систем вариантов с нуля.
Откройте пример проекта и создайте свою собственную сцену.
Сначала изучив пример проекта, вы получите практический опыт работы с конфигуратором продукта, прежде чем создавать свой собственный. Для установки выполните следующие действия:
1. В Unity Hub создайте новый проект Unity , используя универсальный 3D шаблон, основанный на универсальном конвейере рендеринга (URP).
2. Загрузите и установите пример проекта «Конфигуратор отраслевой продукции» :
— Чтобы установить пакет, скопируйте URL с зеленой кнопки «Код» в репозитории GitHub и откройте менеджер пакетов Unity.
— Нажмите на значок плюса и выберите «Добавить пакет из URL Git» , затем вставьте ссылку на репозиторий. Unity загрузит и установит все необходимые компоненты.
3. После завершения загрузки откройте демонстрационную сцену и запустите её, чтобы увидеть в действии полнофункциональный конфигуратор. В приведенном примере демонстрируется переключение материалов, переключение видимости компонентов и управление камерой, что позволяет сразу же понять, что возможно и как работает система. Этот пакет добавляет в существующие системы Unity компоненты, специфичные для конфигуратора, что позволяет быстро запустить создание прототипа.
4. Примечание. Если у вас возникли проблемы с установкой Git по URL , ознакомьтесь с руководством по устранению неполадок в диспетчере пакетов .
✓ Контрольная точка : Теперь при щелчке правой кнопкой мыши в иерархии или в меню «Игровой объект» должны отображаться параметры конфигуратора продукта . В репозитории GitHub , посвященном примеру конфигуратора, также есть полезные инструкции, которые помогут вам максимально эффективно его изучить.
Конфигуратор продукта, открытый в редакторе.
Загрузите 3D модель.
После того, как вы некоторое время изучите образец, следующим шагом будет импорт 3D модели, в которую вы добавите функциональность переключения материалов. Если вы хотите быстрее пройти этот урок, вы можете использовать модель мини-погрузчика, уже включенную в пример (найдите модель мини-погрузчика). Или же вы можете легко использовать свою собственную модель, воспользовавшись одним из двух вариантов преобразования, описанных в следующем разделе: Функция «Оптимизация и преобразование» в Unity Asset Manager или Unity Asset Transformer Toolkit. Вы также можете пропустить этот раздел, если хотите использовать модель, включенную в пример проекта.
Asset Manager
Если вы планируете создавать профессиональные конфигураторы, рассмотрите возможность интеграции Asset Manager в свой рабочий процесс. Unity Asset Manager — это облачное решение для управления цифровыми активами (DAM), которое упрощает процесс загрузки, управления, преобразования, обмена и доступа к сложным 3D активам в режиме реального времени. Доступ к Asset Manager включен в подписку Unity Industry .
С помощью Asset Manager , в частности, функции «Оптимизация и преобразование» , вы можете подготавливать и оптимизировать свои 3D -модели. Эта программа преобразует ваши 3D модели, очищая сетки, оптимизируя количество полигонов и конвертируя их в форматы, готовые для использования в Unity. Этот процесс занимает менее минуты и повышает эффективность рабочего процесса при преобразовании больших файлов.
Подробнее об Asset Manager можно узнать здесь:
- Как использовать Unity Asset Manager
- Введение в методы перевода средств, Asset Manager .
Рабочий процесс САПР с использованием инструментария Asset Transformer Toolkit
Если вам необходимо преобразовать сложные CAD-модели, рассмотрите возможность использования Unity Asset Transformer Toolkit , который поддерживает различные форматы CAD-файлов и предоставляет расширенные функции оптимизации. Импортируйте CAD-модели непосредственно в Unity, а затем используйте инструменты Asset Transformer для уменьшения количества полигонов, упрощения материалов и подготовки моделей для визуализации в реальном времени.
Подробнее о плагине Asset Transformer можно узнать здесь:
Создайте свою сцену
Для начала создайте новую сцену для вашего конфигуратора. Добавьте погрузчик в пустую сцену, или, если вы используете собственную 3D модель, импортируйте ее в сцену и расположите соответствующим образом. Теперь модель готова к добавлению функциональности переключения материалов, которую вы наблюдали в примере проекта.
✓ Контрольная точка : Ваша сцена должна содержать 3D модель, расположенную так, чтобы вы могли четко видеть ее в окне просмотра сцены. К модели должны быть применены материалы, и она должна быть видна в окне игры.
Разработайте функциональность переключения материалов.
Теперь вы реализуете основную функцию конфигуратора, позволяющую пользователям менять материалы вашего продукта в режиме реального времени.
Создать варианты материалов
1. Для начала воспользуйтесь встроенным компонентом для создания вариантов наборов, выбрав его в меню GameObject или щелкнув правой кнопкой мыши в иерархии. У вас будет несколько вариантов, но в этом уроке мы сосредоточимся на вариантах Material Design .
- Система вариантов материалов в этом пакете использует систему обнаружения, которая автоматически находит все рендеры сетки, использующие ваш целевой материал в сложных иерархиях объектов.
2. Определите базовый материал и родительский объект, используя параметр «Целевой родительский объект» в компоненте, а затем позвольте инструменту «Захват» определить все соответствующие средства визуализации сетки. Это обеспечивает единообразие характеристик различных продуктов с множеством компонентов при сохранении их производительности.
Определите свой базовый материал
3. Используйте повторно эти два материала с металлическим покрытием: красную краску для металла и синюю краску для металла (или создайте свои собственные аналоги). Присвойте материалы каждому варианту, перетащив их в соответствующие поля. Система обрабатывает всю логику переключения, автоматически обновляя материалы при изменении вариантов. Используйте встроенный ползунок предварительного просмотра в Инспекторе, чтобы сразу протестировать варианты и увидеть, как красные и синие варианты отделки смотрятся на вашей модели.
✓ Контрольная точка : Теперь в компоненте «Набор вариантов материалов» вы должны увидеть два варианта материала (Краска под металл — красный и Краска под металл — синий). При перемещении ползунка предварительного просмотра в Инспекторе ваша модель должна в режиме реального времени переключаться между красным и синим металлическим покрытием в окне сцены.
Для получения помощи по созданию материалов см. документацию Unity по материалам .
Связывание вариантов с пользовательским интерфейсом
Пакет Product Configurator включает компонент VariantSelect , который генерирует выпадающие меню существующих наборов вариантов для быстрой разработки конфигуратора. Эта функция предназначена для пользователей, не являющихся разработчиками, и позволяет легко выбирать варианты наборов в сцене. Она напрямую интегрируется с системой событий Unity, позволяя создавать функциональные конфигураторы без написания собственных скриптов. Это особенно полезно для пользователей, которые используют решение uGUI, поскольку позволяет им напрямую назначать компонент событию OnClick .
Создайте пользовательский интерфейс.
Для корректной работы с вариантами материалов вам необходим интерфейс, позволяющий пользователям управлять этими конфигурациями и взаимодействовать с конфигуратором продукции.
Unity предлагает две системы пользовательского интерфейса: систему на основе игровых объектов (uGUI) и более новую систему UI Toolkit. В этом уроке мы будем использовать систему uGUI на основе GameObject, поскольку она позволяет интегрировать компонент VariantSelect с помощью перетаскивания без необходимости написания какого-либо кода.
1. Перетащите кнопку из меню пользовательского интерфейса в иерархию и дайте ей имя (например, «Красная металлическая кнопка»).
— При создании первого элемента пользовательского интерфейса Unity автоматически создаст в вашей сцене объекты Canvas и EventSystem . Canvas выступает в качестве контейнера для всех элементов пользовательского интерфейса, а EventSystem обрабатывает ввод пользователя, например, нажатия кнопок.
— Убедитесь, что для компонента Canvas установлен параметр «Масштабировать в соответствии с размером экрана» . Этот параметр позволяет элементам пользовательского интерфейса сохранять одинаковые пропорции на экранах с разным разрешением. Установите эталонное разрешение в соответствии с целевыми размерами экрана — в этом примере это может быть 1920x1080 . Это определяет базовое разрешение, на основе которого строится макет вашего пользовательского интерфейса. Кроме того, установите свойство Match на 0,5 , что обеспечит баланс между масштабированием ширины и высоты, гарантируя равномерное масштабирование элементов пользовательского интерфейса независимо от того, шире или выше экран, чем эталонный. Совет по привязке элементов пользовательского интерфейса: Чтобы закрепить кнопки на определенных краях экрана (сверху/снизу), выберите элемент пользовательского интерфейса и щелкните нужный набор настроек привязки на панели « Настройки привязки» компонента «Преобразование прямоугольника». Подробнее см. в руководстве по привязке Unity UI.
2. Чтобы связать кнопку с выбором варианта, выберите кнопку в иерархии, найдите компонент «Кнопка» в инспекторе и откройте раздел OnClick() .
3. Нажмите " + ", чтобы добавить новое событие, перетащите ваш GameObject с компонентом VariantSelect в поле объекта, выберите VariantSelect из выпадающего списка и выберите SelectVariant , чтобы при нажатии кнопки происходило изменение материала.
4. Создайте дополнительные кнопки для каждого варианта отделки материала (например, синяя металлическая кнопка) и соедините их таким же образом. Если вы хотите узнать больше об основах uGUI, посетите этот учебник, чтобы освоить базовые принципы .
✓ Контрольная точка : Нажмите на «Режим игры», затем нажмите кнопку «Красный металлик», и ваша модель должна изменить цвет на красный металлик. Нажмите кнопку «Синий металлик», чтобы изменить цвет на синий. В вашей иерархии должны отображаться Canvas и EventSystem, а кнопки должны быть видны в окне Game.
Если кнопки не работают, убедитесь, что события OnClick правильно подключены, и ознакомьтесь с документацией Unity по работе с кнопками .
Для опытных пользователей: Если вы знакомы с написанием скриптов, то в этом видео, начиная с отметки 20:10, показано, как автоматически генерировать кнопки пользовательского интерфейса с помощью скрипта VariantSetController , который динамически создает кнопки с правильными именами и функциональностью.
Добавить элементы управления камерой
Полноценный интерфейс конфигуратора также должен предоставлять пользователям контроль над тем, как они видят продукт, позволяя им изучать различные ракурсы и перспективы.
Для обеспечения наилучшего пользовательского опыта в конфигураторе вы можете использовать пакет Cinemachine , который предоставляет решение без написания кода для настройки профессиональных ракурсов камеры. В демонстрационном проекте конфигуратора уже включена настройка Cinemachine , поэтому вы можете сразу же начать добавлять свои собственные камеры.
1. Чтобы создать новый ракурс камеры для вашего продукта, перейдите в меню GameObject > Cinemachine > Camera и добавьте новую виртуальную камеру в сцену. Расположите камеру так, чтобы показать ваш продукт с нужного ракурса, например, крупным планом, подчеркивающим изменения материала.
- Кончик: В качестве отправной точки используйте функцию выравнивания по виду (Ctrl-Shift-F в Windows или Cmd-Shift-F на Mac). Это переместит вашу камеру в то же положение, что и окно просмотра сцены. С этой позиции легче найти нужный ракурс.
2. В компоненте Cinemachine Camera установите значение Priority , чтобы определить, когда эта камера должна быть активна (чем выше значение, тем выше приоритет). Используйте кнопку Solo в компоненте камеры Cinemachine , чтобы протестировать различные ракурсы съемки.
3. Добавьте от двух до трех камер для получения разных углов обзора. Компонент Cinemachine Brain (автоматически добавляемый к вашей основной камере) управляет смешением изображений с разных камер, всегда выбирая виртуальную камеру с наивысшим приоритетом. Посмотрите это видео , чтобы узнать больше об использовании Cinemachine в Unity 6.
4. Подключение камер к элементам управления пользовательского интерфейса: Для активации различных ракурсов камеры создайте кнопки пользовательского интерфейса (скопируйте и вставьте их из кнопок вариантов Material Design и переименуйте для каждого ракурса камеры). Для события OnClick перетащите камеру, которой хотите управлять, и используйте параметр «Приоритет» . Это установит наивысший приоритет, и, следовательно, эта виртуальная камера станет активной.
5. Настройка интерактивного управления камерой: Для интерактивного перемещения камеры используйте камеру FreeLook , которая позволяет управлять движением камеры вокруг вашего продукта с помощью мыши.
6. Настройка действий ввода: В компоненте Cinemachine Input Axis Controller вы увидите раздел Driven Axes с параметрами Look Orbit X , Look Orbit Y и Orbit Scale . Эти параметры следует настраивать с помощью действий ввода Player/Look из пакета Product Configurator. Чтобы найти эти действия, перейдите по следующей ссылке:
Assets/Samples/Product Configurator/1.6.0/Standard Configuration Setup/StandardUIAction
Перетащите действие Player/Look из этой папки в поля ввода Look Orbit X и Look Orbit Y в разделе Driven Axes . Это позволяет управлять камерой с помощью мыши только при нажатии правой кнопки мыши.
Теперь вы готовы протестировать свой конфигуратор с несколькими ракурсами камеры, которыми пользователи могут управлять через интерфейс.
Завершающие штрихи и развертывание веб-сайта
После завершения создания интерактивного конфигуратора, последний шаг — подготовка его к веб-развертыванию, чтобы пользователи могли получить к нему доступ из своих браузеров.
Сборка для WebGL с использованием профилей сборки.
Для развертывания конфигуратора в WebGL используйте опцию «Веб» в качестве платформы. Перейдите в меню «Файл» > «Создать профили» и в левой части окна выберите «Веб» в качестве целевой платформы. Убедитесь, что ваша сцена присутствует в списке сцен, и удалите все остальные сцены, которые вы не хотите создавать.
Для развертывания конфигуратора в WebGL используйте опцию «Веб» в качестве платформы.
Если при нажатии кнопки «Установить с помощью Unity Hub» вы видите сообщение «Веб-модуль не загружен» , вам потребуется установить модуль WebGL Build Support . Нажмите кнопку «Установить», и Unity Hub загрузит и установит модуль WebGL Build Support. Для загрузки нового модуля потребуется перезапустить редактор.
После установки модуля WebGL Build Support настройте параметры сборки, включая параметры сжатия текстур, уровни оптимизации кода и ограничения памяти, подходящие для развертывания в браузере.
После перехода на платформу WebGL проверьте настройки проигрывателя для оптимизации под веб-среду. Перейдите в меню «Редактировать» > «Настройки проекта» > «Плеер» и выберите вкладку «Веб» . В разделе «Настройки публикации» можно установить формат сжатия Brotli (рекомендуется для файлов меньшего размера). Подробные рекомендации по оптимизации этих настроек см. в документации по настройкам веб-плеера Unity.
Когда все будет готово, нажмите «Собрать и запустить» . Unity создаст папку со всем необходимым для запуска конфигуратора в веб-браузере. Браузер откроется автоматически, и вы увидите, что сборка проходит без проблем. Если вы просто нажмете кнопку «Создать» , вам потребуется разместить результат на локальном или удаленном веб-сервере. Unity также предоставляет возможность размещения контента через Unity Play . Если вы используете Unity 6.1 или более позднюю версию, Unity предоставляет возможность публикации непосредственно в Unity Play из настроек сборки WebGL.
Теперь вы должны увидеть открытое окно браузера, и ваше приложение должно быть запущено.
Протестируйте и опубликуйте онлайн.
Протестируйте конфигуратор в разных браузерах и на разных устройствах, чтобы обеспечить стабильную работу. Компоненты пакета хорошо работают в сборках WebGL, но следует учитывать, как переключение вариантов работает на целевых устройствах, и соответствующим образом корректировать сложность.
Unity создает полноценную папку сборки, содержащую файл index.html, сжатые игровые данные и все необходимые ресурсы. Эта папка может размещаться на любом стандартном веб-сервере, что делает ваш конфигуратор доступным через любой современный веб-браузер.
✓ Окончательный успех : Теперь у вас есть работающий конфигуратор продукции. В папке сборки должен находиться файл index.html, который при открытии в браузере (или на веб-сервере) отображает вашу 3D модель с интерактивными кнопками «Красный металлик» и «Синий металлик», позволяющими в режиме реального времени изменять отделку модели.
Необязательный: Создайте реалистичную промышленную среду.
Для более качественной и профессиональной презентации рассмотрите возможность добавления одного из пакетов среды Unity Asset Store. Unity предлагает официальные промышленные среды, такие как Unity Factory и Unity Warehouse , или же вы можете поискать чистые студийные помещения с предварительно настроенными профилями освещения и постобработки. Эти пакеты обеспечивают основу для реалистичной визуализации продукции без необходимости создания обширной среды. Кроме того, Unity Hub включает в себя шаблон URP 3D Sample Scene , демонстрирующий оптимизированные настройки освещения и рендеринга.
Необязательный: Расширенный пользовательский интерфейс с помощью UI Toolkit
Для более сложной разработки пользовательского интерфейса Unity предлагает UI Toolkit , который опирается на методы веб-разработки, используя структуры, аналогичные CSS и XML (в UI Toolkit их эквиваленты называются USS и UXML). Для создания интерфейса конфигуратора с помощью UI Toolkit потребуется написать код на C#, чтобы определить и задать время работы кнопок. Это связано с тем, что UI Toolkit не предлагает готового способа связать нажатия кнопок с их функциональностью. Пользовательский интерфейс демонстрационного проекта создан с помощью Unity UI Toolkit, что позволяет получить ценные сведения о его реализации.
Ниже представлен небольшой фрагмент кода, демонстрирующий, как заставить определенную кнопку (называемую «Изменить») выполнять заданное действие из компонента выбора варианта:
using IndustryCSE.Tool.ProductConfigurator.Runtime;
using UnityEngine;
using UnityEngine.UIElements;
public class SimpleUIController : MonoBehaviour
{
[SerializeField]
private VariantSelect variantSelect; // Reference to the VariantSelect instance
[SerializeField]
private UIDocument uiDocument; // Reference to the UI Document
private void Start()
{
if (variantSelect == null || uiDocument == null) return;
// Get the root visual element
var root = uiDocument.rootVisualElement;
// Query the button named "change"
var changeButton = root.Q<Button>("change");
if (changeButton != null)
{
// Add a callback to the button
changeButton.clicked += () =>
{
variantSelect.SelectVariant(); // Trigger the variant selection
};
}
}
}
Чтобы узнать, как добавить кнопку в пользовательский интерфейс с помощью UI Toolkit, ознакомьтесь с этим руководством на Unity Learn .
Необязательный: Расширенная функциональность вариантов
Помимо базовой замены материалов, пакет поддерживает варианты анимации и преобразований для динамических демонстраций. Используйте их для изделий с подвижными частями, регулируемыми компонентами или функциями, для которых полезно использовать анимированные демонстрации. Варианты преобразования позволяют изменять положение, вращение и масштаб, а варианты анимации демонстрируют функциональность или обеспечивают привлекательные переходы. Эти расширенные функции отлично подходят для демонстрации функциональности продукта или создания более привлекательных интерфейсов конфигуратора.
Помимо простой замены материалов, вы также можете использовать анимацию и варианты трансформации для динамических демонстраций.
Теперь вы обладаете базовыми знаниями для создания конфигуратора с помощью пакета Industry Product Configurator от Unity. Независимо от того, разрабатываете ли вы решения для потребительских товаров, промышленного оборудования или архитектурной визуализации, эта основа предоставляет все необходимое для создания привлекательных конфигураторов, которые способствуют достижению бизнес-результатов.
