Home › How do I…? › How to build a product configurator in Unreal Engine for VR, desktop and mobile

How to build a product configurator in Unreal Engine for VR, desktop and mobile

Advanced Framework Pro gives a product configurator its whole interaction and UI layer: pointing and touching parts, switching variants, labels and info panels, and a menu with settings, running as one project on a headset, a PC and a phone. You build the product and its options; the framework supplies the player, the input and the interface. This page says which modules do what, so you can judge the fit before you start.

At a glance

Product actor
├─ part meshes × n, each with BPC_Interaction_Select        → On Select switches a state
├─ BPC_State_Name "Trim", BPC_State_Color "Paint", BPC_State_Boolean "Roof"
├─ BPC_Visibility on optional parts                          show / hide with transition
└─ BPC_Label_Simple per named part
Option panel: WBP_Base widget bound to the states, opened with FL_PawnUI › Pawn UI Add Element
              at DA_PawnUIPosition_Near
Specs:        AFS_UI_InfoPanels library, or a world-space page on an AFM_Panel plate
Level:        PDA_Level with the three pawns.   Shared session: BPC_Replication_Actor on the product

The shape of a configurator

A configurator is a product in the middle, a set of options around it, and a way to point at both. In the framework that is:

Need Plugin What you use

Point at or touch a part on any platform AFS_UX_Select BPC_Interaction_Select on each part, one On Select event

Hover feedback AFS_Core_Highlight Highlight Class on the interaction, three styles

Variants as data: colour, material, trim level AFM_State BPC_State_Name, BPC_State_Color, BPC_State_Boolean on the product; UI binds to them generically

Show and hide optional parts with a transition AFM_Visibility the visibility component with fade and sound

Name the parts AFS_UI_Labels BPC_Label_Simple per part, arrow or leader line

Specs and prices next to the product AFS_UI_InfoPanels, AFM_Panel info panels on the HUD; 3D backing plates for world-space pages

The option panel itself AFS_UI, AFS_UI_Pawn your page from the design system, placed in front of the player with pawn UI

Walk around a large product AFS_UX_Teleporter, AFS_UX_Locomotion teleport areas and comfort options

Hands-free kiosks and accessibility AFS_UX_Gaze dwell selection, no controller needed

Several showrooms or products AFS_Core_Loading one PDA_Level per scene, a lobby that switches between them

Trade-show screen AFM_Spectator a smooth follow or fixed camera for the big display

Sales call with a customer in VR AFM_Replication replicated interactions and UI, the host presents

Need	Plugin	What you use
Point at or touch a part on any platform	`AFS_UX_Select`	`BPC_Interaction_Select` on each part, one On Select event
Hover feedback	`AFS_Core_Highlight`	Highlight Class on the interaction, three styles
Variants as data: colour, material, trim level	`AFM_State`	`BPC_State_Name`, `BPC_State_Color`, `BPC_State_Boolean` on the product; UI binds to them generically
Show and hide optional parts with a transition	`AFM_Visibility`	the visibility component with fade and sound
Name the parts	`AFS_UI_Labels`	`BPC_Label_Simple` per part, arrow or leader line
Specs and prices next to the product	`AFS_UI_InfoPanels`, `AFM_Panel`	info panels on the HUD; 3D backing plates for world-space pages
The option panel itself	`AFS_UI`, `AFS_UI_Pawn`	your page from the design system, placed in front of the player with pawn UI
Walk around a large product	`AFS_UX_Teleporter`, `AFS_UX_Locomotion`	teleport areas and comfort options
Hands-free kiosks and accessibility	`AFS_UX_Gaze`	dwell selection, no controller needed
Several showrooms or products	`AFS_Core_Loading`	one `PDA_Level` per scene, a lobby that switches between them
Trade-show screen	`AFM_Spectator`	a smooth follow or fixed camera for the big display
Sales call with a customer in VR	`AFM_Replication`	replicated interactions and UI, the host presents

How it fits together

Build the product as an actor. Each selectable part gets a BPC_Interaction_Select; each option that has a value gets a state component. Bind a part's On Select to switch the state it owns.
Build the option panel from the UI design system. Its widgets bind to the state components through the shared listener contract, so the panel never references the product class directly and works for any product that carries the same states.
Place the panel with pawn UI at the near distance, and put the product's specs on an info panel or a 3D panel beside it.
Describe the scene in a PDA_Level with the three pawns, and test it on desktop, in VR and on the mobile preview. Nothing in steps 1 to 3 is platform-specific.
For a shared session, add BPC_Replication_Actor to the product and let the host drive.

What the framework does not do

It has no variant or pricing database, no turntable or exploded-view logic and no order flow. Those are the project's own work, or the planned Configurator & Showcase Extension.

Where to look

Map_Examples_Select, Map_Examples_States and Map_Examples_Visibility show the three mechanisms above on their own; the showroom lobby shows the level flow.