A product configurator can transform how customers interact with your products by moving the experience beyond looking at static images, to one that’s interactive, ultimately providing the viewer with richer details and more information.
In industrial applications, configurators can showcase complex equipment, allow real-time customization, and help customers visualize products in their specific contexts.
In this tutorial, you'll build your first web-deployable product configurator in one hour or less. Your configurator will allow users to change different materials on a 3D model using a simple interface. By the end, you’ll have an understanding of the foundational features for creating professional product configurators.
If you prefer to step through this tutorial with a video, you can watch it here.
For more information, check out our webinar on the Product Configurator Template
This tutorial is aimed at developers who have beginner-to-intermediate knowledge of developing projects in Unity. To complete the tutorial, you’ll need to
1. Install the following:
- Unity 6 with WebGL build support
- A trial or regular license for Unity Industry
- Unity's Industry Product Configurator package, available from GitHub
2. Add a 3D model: Use your own 3D model file or the one included in the template.
3. Add basic materials: Have at hand at least 2-3 different materials or reuse the metallic materials already included in the tutorial.
Estimated time to complete: 30-60 minutes
This tutorial uses Unity’s Industry Product Configurator sample project as a learning foundation and starting point. The sample demonstrates a complete working configurator with material and component switching, camera controls, and user interface – exactly the features you’ll learn to implement in the exercise.
The sample includes ready-made components for visibility, and material, animation, and transform variants, so you can focus on your product rather than building variant systems from scratch.
Open the sample project and create your own scene
By first exploring the sample project, you’ll get hands-on experience with a product configurator before building your own. Follow these steps to install it:
1. In the Unity Hub, create a new Unity project using the Universal 3D template based on the Universal Render Pipeline (URP).
2. Download and install the Industry Product Configurator sample project:
- To install the package, copy the URL from the green Code button on the GitHub repository and open Unity's Package Manager.
- Click the plus icon and select Add package from git URL, then paste the repository link. Unity will download and install all the necessary components.
3. Once the download completes, open the sample scene and run it to see a fully functional configurator in action. The sample demonstrates material switching, component visibility toggles, and camera controls, giving you immediate insight into what's possible and how the system works. The package adds configurator-specific components to Unity's existing systems to jump start your prototype.
4. Note: If you have issues with Git URL installation, check the Package Manager troubleshooting guide.
✓ Checkpoint: You should now see Product Configurator options when you right-click in the Hierarchy or under the GameObject menu. There are also good instructions in the GitHub repo for the configurator sample that will help you get the most learning from it.
Once you’ve spent some time exploring the sample, the next step is to bring in a 3D model to which you’ll add material switching functionality. If you want to complete this tutorial faster you can use the Skidloader model already included in the sample (Search for Skidloader). Or, you can easily bring your own model in with one of two conversion options explained in the next section: The Optimize and Convert feature within Unity Asset Manager or the Unity Asset Transformer Toolkit. You can also skip this section if you want to use the model included in the sample project.
Asset Manager
If you plan to build professional configurators, consider integrating Asset Manager into your workflow. Unity’s Asset Manager is a cloud-based digital asset management (DAM) solution that streamlines how teams can upload, manage, transform, share, and access their complex real-time 3D assets. Access to Asset Manager is included in a Unity Industry subscription.
You can prepare and optimize your 3D models using Asset Manager, specifically with its Optimize and Convert feature. This transforms your 3D assets by cleaning meshes, optimizing polygon counts, and converting them into Unity-ready formats. This process completes in under a minute and improves workflow efficiency for large file conversions.
Learn more about Asset Manager here:
- How to use Unity Asset Manager
- Introduction to Asset Manager transfer methods.
CAD workflow with Asset Transformer Toolkit
If you need to convert complex CAD models, then consider using the Unity Asset Transformer Toolkit, which handles various CAD file formats and provides advanced optimization features. Import CAD models directly into Unity, then use Asset Transformer's tools to reduce polygon counts, simplify materials, and prepare models for real-time visualization.
Learn more about Asset Transformer Plugin here:
Start by creating a new scene for your configurator. Add the Skidloader to the empty scene, or if you’re using your own 3D model, import it into the scene and position it appropriately. The model is now ready for you to add the material switching functionality you observed in the sample project.
✓ Checkpoint: Your scene should contain your 3D model positioned where you can clearly see it in the Scene view. The model should have materials applied and be visible in the Game view.
Now you'll implement the core configurator feature – allowing users to switch materials on your product in real-time.
Create material variants
1. Start by using the built-in component for variant sets by choosing it from the GameObject menu or by right-clicking in the Hierarchy. You’ll have different options but for this tutorial, we’ll focus on the Material variants.
- The package's material variant system uses a detection system that automatically finds all mesh renderers using your target material across complex object hierarchies.
2. Define your base material and parent object using the Target Parent option in the component, then let the Capture tool identify all relevant mesh renderers. This ensures consistency across products with multiple components while maintaining performance.
3. Reuse these two materials with metallic finishes, Metal Paint - Red and Metal Paint - Blue (or create your own equivalents). Assign the materials to each Variant slot by dragging them into the Variant fields. The system handles all the switching logic, automatically updating materials when variants change. Use the built-in preview slider in the Inspector to test variants immediately and see how your red and blue finishes look on your model.
✓ Checkpoint: You should now see two Material Variants (Metal Paint - Red and Metal Paint - Blue) in your Material Variant Set component. When you drag the preview slider in the Inspector, your model should change between the red and blue metallic finishes in real-time in the Scene view.
For material creation help, see Unity's materials documentation.
Connect variants to user interface
The Product Configurator package includes a VariantSelect component that generates drop-down menus of existing variant sets for rapid configurator development. This feature is designed for non-developers to easily pick variant sets in the scene and integrates directly with Unity's event system, letting you build functional configurators without custom scripting. This is particularly useful for users who utilize the uGUI solution, allowing them to directly assign the component to the OnClick event.
With your material variants working, you need an interface that allows users to control these configurations and interact with your product configurator.
Unity offers two UI systems: a GameObject-based UI system (uGUI) and the newer UI Toolkit. For this tutorial, we'll use the GameObject-based uGUI system as it allows for drag and drop integration with the VariantSelect component without requiring any code.
1. Drag and drop a button from the UI menu into the Hierarchy and name it (e.g., "Red Metal Button").
- When you create your first UI element, Unity will automatically create Canvas and EventSystem objects in your scene. The Canvas acts as the container for all UI elements, while the EventSystem handles user input like button clicks.
- Ensure the Canvas component is set to Scale With Screen Size. This setting allows UI elements to maintain consistent proportions across different screen resolutions. Set the Reference Resolution to match your target screen dimensions – in this example it could be 1920x1080. This defines the baseline resolution on which your UI layout is based. Additionally, set the Match property to 0.5, which strikes a balance between width and height scaling, ensuring that your UI elements scale evenly, regardless of whether the screen is wider or taller than the reference.UI anchoring tip: To keep buttons anchored to specific screen edges (top/bottom), select your UI element and click the desired anchor preset in the Rect Transform component's Anchor Presets panel. Learn more in the Unity UI Anchoring Guide
2. To connect your button to the variant selection, select your button in the Hierarchy, find the Button component in the Inspector, and look for the OnClick() section.
3. Click "+" to add a new event, drag your GameObject with the VariantSelect component into the object field, choose VariantSelect from the drop-down, and select SelectVariant to trigger the material change when the button is clicked.
4. Create additional buttons for each material finish (Blue Metal Button) and connect them the same way. If you want to learn more about uGUI fundamentals, visit this tutorial to master the basics.
✓ Checkpoint: Click on Play mode, then click the Red Metal button and your model should change to a red metallic finish. Click the Blue Metal button to change it to blue. You should see a Canvas and EventSystem in your Hierarchy, and your buttons should be visible in the Game view.
If the buttons aren't working, verify that your OnClick events are properly connected and check Unity's Button documentation.
For advanced users: If you're comfortable with scripting, this video from the 20:10 mark shows how to automatically generate UI buttons using the VariantSetController script, which creates buttons dynamically with correct names and functionality.
A complete configurator interface should also give users control over how they view the product, allowing them to explore different angles and perspectives.
To give your configurator the best user experience, you can use the Cinemachine package, which provides a no-code solution for setting up professional camera views. The configurator sample project already includes a Cinemachine setup, so you can immediately start adding your own cameras.
1. To create a new camera angle for your product, go to GameObject > Cinemachine > Camera to add a new virtual camera to your scene. Position this camera to show your product from the desired angle, e.g., a close-up view that highlights the material changes.
- Tip: Use Align with View (Ctrl-Shift-F on Windows or Cmd-Shift-F on Mac) as a starting point. This moves your camera to the same position as your Scene view. From this position, it's easier to find your desired angle.
2. In the Cinemachine Camera component, set the Priority value to determine when this camera should be active (higher numbers take priority). Use the Solo button in the Cinemachine camera component to test your different camera views.
3. Add two to three cameras for different viewing angles. The Cinemachine Brain component (automatically added to your main camera) controls the blends between the different cameras, always taking the virtual camera with the highest priority. See this video to learn more about using Cinemachine in Unity 6.
4. Connecting cameras to UI controls: To activate different camera views, create UI buttons (copy and paste from your material variant buttons and rename them for cameras). For the OnClick event, drag the camera you want to control and use the Prioritize option. This will set the priority to Highest and therefore this virtual camera will be the active camera.
5. Setting up interactive camera control: For interactive camera movement, use a FreeLook camera which allows mouse-controlled orbit movement around your product.
6. Configuring input actions: In the Cinemachine Input Axis Controller component, you'll see the Driven Axes section with Look Orbit X, Look Orbit Y, and Orbit Scale options. These should be configured with Player/Look input actions from the Product Configurator package. To find these actions, navigate to:
Assets/Samples/Product Configurator/1.6.0/Standard Configuration Setup/StandardUIAction
Drag the Player/Look action from this folder to the input fields for Look Orbit X and Look Orbit Y in the Driven Axes section. This enables mouse-controlled camera only when the right mouse button is clicked
Now you are ready to test your configurator with multiple camera angles that users can control through the interface.
With your interactive configurator complete, the final step is to prepare it for web deployment so users can access it from their browsers.
Build for WebGL with Build Profiles
To deploy your configurator to WebGL, use the Web option as the platform. Navigate to File > Build Profiles and select Web as your target platform in the left side of the window. Ensure your scene is present in the Scene list and delete any other scenes you don't want to build.
If you see the message No Web module loaded with an Install with Unity Hub button, you'll need to install the WebGL Build Support module. Click the install button and Unity Hub will download and install the WebGL Build Support module. You’ll need to restart the Editor to load the new module.
Once the WebGL Build Support module is installed, configure the build settings, including texture compression options, code optimization levels, and memory constraints suitable for browser deployment.
After switching to WebGL platform, review the Player Settings for web-specific optimization. Go to Edit > Project Settings > Player and select the Web tab. In the Publishing Settings section, you can set the Compression Format to Brotli (recommended for smaller file sizes). See Unity's Web Player settings documentation for detailed guidance on optimizing these settings
Once everything is ready, click Build and Run. Unity will generate a folder with everything needed to launch your configurator in a web browser. The browser will open automatically and you should see your build running smoothly. If you only click Build, you'll need to host the output on a local or remote web server. Unity also provides a hosting option through Unity Play. If you’re on Unity 6.1 or higher, Unity provides an option to publish directly to Unity Play from the WebGL Build Settings.
You should now see a browser window open and your app is live.
Test and publish online
Test your configurator across different browsers and devices to ensure consistent performance. The package components work well in WebGL builds, but consider how variant switching performs on target devices and adjust complexity accordingly.
Unity creates a complete build folder containing an index.html file, compressed game data, and all necessary assets. This folder can be hosted on any standard web server, making your configurator accessible through any modern web browser.
✓ Final Success: You now have a working product configurator. Your build folder should contain an index.html file that, when opened in a browser (or hosted on a web server), displays your 3D model with interactive Red Metal and Blue Metal buttons that change your model's finish in real-time.
Optional: Make a realistic industrial environment
For an enhanced professional presentation, consider adding one of Unity's Asset Store environment packages. Unity provides official industrial environments like Unity Factory and Unity Warehouse, or look for clean studio setups with pre-configured lighting and post-processing profiles. These packages provide the foundation for realistic product visualization without requiring extensive environment creation. Additionally, Unity Hub includes the URP 3D Sample Scene template which demonstrates optimized lighting and rendering setups.
Optional: Advanced UI with UI Toolkit
For more advanced UI development, Unity offers UI Toolkit, which draws from web development practices, using structures similar to CSS and XML (in UI Toolkit the equivalents are called USS and UXML). Building your configurator interface using UI Toolkit requires some coding in C# to define and time button functionality. This is because UI Toolkit does not offer an out-of-the-box way of connecting button clicks with functionality. The sample project's user interface is built with Unity UI Toolkit, offering valuable insights into its implementation.
Below you can see a small code snippet showing how to make a specific button (called change) do a defined action from the variant select component:
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
};
}
}
}
To learn how to add a button to your UI using UI Toolkit, see this tutorial on Unity Learn.
Optional: Advanced variant functionality
Beyond basic material swapping, the package supports animation and transform variants for dynamic demonstrations. Use these for products with moving parts, adjustable components, or features that benefit from animated showcases. Transform variants handle position, rotation, and scale modifications, while animation variants demonstrate functionality or provide engaging transitions. These advanced features work great when you want to showcase product functionality or create more engaging configurator experiences.
You now have the basic knowledge build a configurator with Unity's Industry Product Configurator package. Whether you're building for consumer products, industrial equipment, or architectural visualization, this foundation provides everything needed to create compelling configurators that drive business results.
Fill out this form to stay up-to-date with Unity’s latest offerings and solutions
