This article provides guidance for developers and technical artists on building an interactive 3D product configurator in Unity, using the Product Configurator package, and it's based on this video tutorial.
It covers the complete workflow, from initial project setup in the Universal Render Pipeline (URP) to final web deployment. Key topics include importing and optimizing CAD models using tools like the Asset Transformer or Unity Asset Manager, creating dynamic material variants for real-time customization, and building a responsive user interface with clickable controls.
Additionally, it details how to implement camera transitions using Cinemachine and offers best practices for optimizing and building the application for the web, ensuring a smooth, accessible user experience on any browser.
To get started quickly, you can use the sample project provided with the Product Configurator package.
Start with creating a new Universal Render Pipeline (URP) project in the Unity Hub.
Download the sample project from the GitHub repository.
Open the sample project in Unity to explore its structure and components.
Examine the hierarchy to understand how the variant sets, UI, and cameras are organized.
Since the package is open-source, you can customize any part of it to fit your specific needs before adding your own 3D models.
To ensure your CAD data is ready for a real-time application, it needs to be converted and optimized. The video highlights two primary methods for this:
Asset Transformer Plugin: This plugin, used directly within the Unity Editor, is designed to handle various CAD file formats and includes advanced features for optimizing geometry and materials during the import process.
Unity Asset Manager: This cloud-based solution allows you to upload your source models and use the Optimize and Convert feature. It provides an easy-to-use interface to transform your data into Unity-ready formats before you download them for your project.
Check out the Unity Asset Manager documentation page and this video tutorial to learn more.
The core of the configurator is the ability to swap materials in real-time. This is managed using a Material Variant Set, which automates the switching logic without any code.
In the Hierarchy, right-click and navigate to Product Configurator > Variant Set > Material Variant Set.
With the new variant set selected in the Inspector, use the Automatically find all mesh renderers feature to locate all objects using your target material.
Create slots for each material you want to switch between (e.g., "Red Metal," "Blue Metal").
Drag your desired material assets from the Project window into their corresponding variant slots in the Inspector.
You can immediately test the material switching directly in the Editor using the preview slider.
To ensure your UI scales correctly on different screen sizes and resolutions, you should adjust the Canvas Scaler settings.
On your Canvas GameObject, find the Canvas Scaler component.
Set the UI Scale Mode to Scale With Screen Size.
Enter a Reference Resolution, such as 1920 x 1080. This is the resolution your UI was designed at.
Set the Match value to 0.5. This provides a balanced scaling approach, blending the scaling between the width and height of the screen to prevent distortion.
To allow users to select different materials, you connect UI buttons to the Material Variant Set you created.
Create a UI button by adding a Panel and then a Button to your scene.
Add the Variant Select component to your button GameObject.
In the button's Inspector, find the On Click() event section and click the + icon.
Drag the Variant Select component you just added into the object field of the event.
From the function dropdown menu, select VariantSelect > SelectVariant (). This links the button click to the variant switching action.
Repeat this process for each material option, creating a separate button for each variant.
Check out the UI systems documentation page to learn more.
Cinemachine is used to create professional, smooth camera transitions between different viewpoints.
Ensure Cinemachine is installed via the Package Manager.
Create virtual cameras by going to GameObject > Cinemachine > Create Cinemachine Camera. Position two or three of these cameras at key viewing angles.
Add UI buttons for each camera view you want the user to select.
For each button's On Click () event, drag the target virtual camera GameObject into the object field.
From the function dropdown, select CinemachineVirtualCamera > Prioritize ().
When a button is clicked at runtime, it will set that camera's priority to the highest value, causing the Cinemachine Brain to smoothly blend to that view.
Check out the Cinemachine documentation page to learn more.
To make your configurator accessible from any browser, you can build it for the web platform using Unity's Build Profiles.
In the Editor, open the Build Profiles window by navigating to File > Build Profiles.
Select “Web” as your target platform from the list.
Ensure your configurator scene is the only one included in the build’s Scene List.
Optimize the Player Settings by going to Edit > Project Settings > Player. In the Web tab, find the Publishing Settings section.
Set the Compression Format to Brotli to achieve smaller build sizes and faster load times for users.
Click Build and Run to compile the project and automatically open it in your default web browser.
Check out the Platform development documentation page and the Profile and optimize a Unity Web build to learn more.
