Unreal Studio Product Viewer Template

Describes how to use the Product Viewer template to create an interactive product visualization for PC and VR.


The Product Viewer Template has been deprecated and removed in Unreal Engine 4.23. Use the Collab Viewer Template instead, which offers the same features as the Product Viewer Template, plus multi-user networking, additional navigation modes, and more. See the Collab Viewer Template documentation.

The Product Viewer Template provides a ready-to-use interactive product visualization experience for desktop and VR devices. You can interact with the models, move pieces around, make them transparent, and get around the scene using built-in navigation controls.

All of the interaction and navigation controls are provided by Blueprints in the Project, so you can customize them, learn from them, or even copy them into your own Projects. For more about working with Blueprints, see Blueprint Visual Scripting.

This page describes everything you need to know to get started with the Product Viewer template, and to use it for your own models.

Playing the Project

The Product Viewer comes with some built-in models, so that you can try out working your new Project right away in the Editor, as soon as you create it.


If you want to test out the Project in VR, see Test in VR in the Editor below.

The Product Viewer offers different navigation modes for desktop and VR viewing.

Desktop Orbit Mode (Mouse Navigation)

Orbit mode is the default navigation mode for desktop viewing. In this mode, the camera is always centered around a particular spot in the 3D world.



Rotate around the current point of interest

Right-click and drag

Change the camera's point of interest to a new location, remaining at the current zoom level


Change the camera's point of interest to a new location, zooming to fit the new object in the viewport


Pan the camera sideways, up, or down

Middle-click and drag

Zoom in or out on the current point of interest

Use the mouse wheel

In order for an object in the scene to be selectable as a point of interest in Orbit Mode, it must be set as either an interactive object or a teleportable surface. See Adding Your Own Content below.

Desktop Flying Mode (Keyboard Navigation)

In Flying mode navigation, you can move the camera around the scene using your keyboard.



Move the camera forward and back along its facing axis

W and S

Move the camera left and right perpendicular to its facing axis

A and D

Move the camera up and down along the world Z axis

E and Q

Rotate the camera to a new facing direction

Right-click and drag

While in Flying mode, the interaction controls for selecting objects, moving objects and controlling X-Ray are disabled.

To switch the Product Viewer to use Flying mode:

  1. In the World Outliner panel, find and select the ProductViewer_Collector Actor.
    Select the Product Viewer Collector

  2. In the Details panel, find the Product Viewer section, and change the Navigation Mode setting to FlyingMode.
    Flying Mode settings

    By default, while in FlyingMode you can pass through all objects in the scene, even those with collision meshes set up for them. If you want to prevent the camera from passing through objects with collision meshes, also clear the No Collision on Flying Mode checkbox.

VR Teleport Mode

When you run the Product Viewer in VR, your viewpoint on the scene is controlled by your headset and your position in the VR scene. If you need to move to a different position in the scene, you can use the left controller to teleport yourself.

  1. Click the left-hand controller thumbstick button. You'll see a target marker superimposed on the ground:
    Product Viewer teleport

  2. Move the left-hand controller around in space until the target marker appears at the location you want to move in the VR scene.

  3. As you push the left-hand controller thumbstick back and forth, the target marker rotates to show the facing direction you'll have after you teleport.

  4. When you have the target marker where you want it, and pointed in the right direction, release the thumbstick button.

By default, you can only teleport on the floor. When you add your own content, you can specify exactly what surfaces you can teleport to. See Adding Your Own Content below.

Selecting and Moving Objects

You can select and move any movable object in the scene that has been identified as interactive.

For instructions on defining what objects are interactive, see Adding Your Own Content below.




Move an object to a new position in the scene

Left-click and drag the object

Snap an object back to its original position

Right-click the object


In VR, you'll use the right-hand controller to select and move objects.



Highlight an object

Point the laser selector from the right-hand controller at the object

Grab an object

Highlight the object, then press the right-hand trigger button

Move an object

Grab the object, then move the right-hand controller in real-world space

Release an object at its new position

Release the right-hand trigger button

Snap an object back to its starting position

Highlight the object, then press the grip button on the right-hand controller

Using X-ray Mode

You can make any interactive object in the Product Viewer use X-ray mode. While in X-ray mode, the object is nearly transparent, and temporarily becomes non-interactive. This lets you see and interact with the objects behind it.

X-ray Off

X-ray On

You can choose the following options from the X-ray menu:

Menu item


Apply X-ray

Switches the highlighted object to use X-ray mode

Isolate X-ray

Switches all other objects to X-ray mode, but leaves the highlighted object opaque

Clear All X-ray

Resets all objects in the scene to their original Material


To open the X-ray menu, press the space bar while hovering over an interactive object.


To open the X-ray menu in VR and select an option, push the right-hand controller thumbstick forward or back. Press the thumbstick button to confirm the current choice.

Product Viewer menu in VR

Test in VR in the Editor

When you launch a cooked or standalone version of the Product Viewer with VR set up on your computer, you'll be able to choose whether to launch using desktop controls or VR controls in the splash screen:

Product Viewer splash screen

However, if you want to test the Product Viewer in the Editor using VR controls, you need to follow these steps:

  1. In the World Outliner panel, find and select the ProductViewer_Collector Actor.
    Select the Product Viewer Collector

  2. In the Details panel, find the Product Viewer section, and select the VR Preview option.
    Product Viewer VR Preview setting

  3. To launch the preview, use the drop-down arrow next to the Play button in the Toolbar to select  VR Preview.
    VR Preview in the Toolbar

Don't forget to turn this setting back off before you cook your game! If you don't, the resulting package will not work as you expect.

Adding Your Own Content

Once you've seen how the Product Viewer works using the built-in content, you'll want to bring in your own models and get them working in the experience.

  1. Import your content into your Project. You can use any method to get your content into the Project: import as FBX, import using Datasmith, add from the Marketplace or from another feature or content pack, etc.

  2. Add the models you want to explore into the default ProductViewer/Levels/ProductViewer level.

  3. Make sure all of the Static Mesh Actors that you want to be able to move around at runtime have their Mobility option set to Movable in the Details panel:

  4. In the World Outliner panel, find and select the ProductViewer_Collector Actor.
    Select the Product Viewer Collector

  5. In the Details panel, find the Product Viewer section.
    Product Viewer interactive root and teleport surface root

The ProductViewer_Collector Actor contains two key settings, shown above:

  • The Interactive Root is a list of objects in the scene that the player can interact with.

  • The Teleport Surface Root is a list of objects in the scene that the player can teleport to in VR mode.

You can add each of your own models that you want the player to be able to interact with or teleport to into these lists.

If you've used Datasmith to import your content, the Datasmith Scene Actor in your Level will already be the parent of all your imported Static Mesh Actors. Add a new entry in the Interactive Root list, set it to refer to the Datasmith Scene Actor, and all of its children will automatically become interactive.

Alternatively, you can parent the Static Mesh Actors that you want to become interactive or teleportable to another Actor that is already in the list you want. For example, by default, the ProductViewer_Collector has only one entry in its Interactive Root list: an Actor named Interactive_Root. If you find that Actor in the World Outliner, you'll see that it is the parent of many child Actors that represent the gears, the ball, and the flashlight:

Interactive_Root Actor

Every child of an Actor in the Interactive Root list is automatically marked as interactive as well. So, all you need to do is re-parent your own models under the existing Interactive_Root Actor. You can do this by dragging and dropping them in the World Outliner.

Moving Parent and Child Actors

The hierarchy of your interactive Actors in the World Outliner panel affects the way the objects move at runtime. When you select and move an interactive Actor, all of that Actor's children move along with the parent automatically, maintaining their current offset from the parent.

For example, in this case, two parts of the transmission are parented to Part_09, the black bar:


At runtime, moving the black bar also moves the child Actors. However, you can still move each child Actor on its own. The next time you move the parent, the children keep their new offsets. 


Resetting a child Actor to its original position resets it to its original offset from the parent Actor, not its original position and rotation in world space. Resetting a parent Actor to its original position also resets all of its children.

Exploding and Collapsing Assemblies

A common way to interact with an assembly made up of smaller parts is to explode it: to break its component parts apart from each other in space, so that viewers can see each individual part on its own as well as how they all fit together.


The Product Viewer Template includes a Blueprint class that you can use to set up an exploded view of your parts, and to toggle the assembly smoothly between its default view and its exploded view at runtime.

To set up an exploded view for your content:

  1. Find the Explode_BP_Actor Blueprint class in the Content Browser, under the ProductViewer/Blueprints/Tools folder, and drag it into the Viewport.
    Drag and drop an Explode_BP_Actor

  2. Select the new Blueprint Actor in the Viewport or the World Outliner.
    Select the Explode_BP_Actor

  3. In the Details panel, find the Default group. You'll use this group of controls to set up the default and exploded views for your assembly.
    Explode_BP_Actor Details

  4. In the Actors Root list, you'll need to identify which Actors this Blueprint should take care of animating in the Level. This is very similar to setting up the Interactive Root and Teleport Surface Root in the ProductViewer_Collector Blueprint, as described under Adding your Own Content above:

    • You can add each Actor in the assembly that you want to explode to the list separately.

    • If all the Actors you want to animate are parented under a single Actor, you only need to add the parent to this list.

    For example, in the image shown above for the previous step, the GearsRoot Actor is selected. This Actor is the parent of all the default content items that are part of the transmission assembly. This makes all the metal parts in the scene animatable, but not the blue sphere.

  5. When you have all the Actors you need in the list, move them all in the Viewport (if necessary) so that they appear in the arrangement that you want to be their default starting position. Press the Set Initial Location button to record these transforms.

  6. Now move all the Actors to the positions you want them to be in when exploded. Press the Set Explode Location button to lock in these transforms.

  7. You can test the recorded transforms in the Unreal Editor by pressing the View Explode and View Initial Location buttons. When you press these buttons, all the animated parts should swap between the preset positions in the Level Viewport.

To switch between the exploded and default views at runtime:

  1. When you run your game, hover the mouse cursor over any Actor that you've registered with the Explode_BP_Actor. Press Spacebar to open the menu, and you'll see a new Explode button.
    Explode menu
    Press this to make all parts registered with the same Explode_BP_Actor move smoothly from their current location in the Level to their exploded position.

  2. When you hover over any Actor in the exploded assembly and open the menu, you'll now see a Collapse option. Press this to return the exploded parts from their current location back to their default starting positions.
    Collapse menu

You can add multiple Explode_BP_Actors to your Level to animate different parts of your assembly. However, don't include any Actor in more than one Explode_BP_Actor.

Adding the Product Viewer to a Different Project

If you have your content in another Project, you can add the navigation and interaction controls from the Product Viewer into your other Project.

  1. Open the Project and Level you want to enhance with the Product Viewer controls.

  2. In the Content Browser, choose Add New > Add Feature or Content Pack.

  3. In the Add Content to the Project window, open the Unreal Studio Feature tab. Click the Product Viewer thumbnail, then click + Add to Project.

  4. Click the X to close the Add Content to the Project window.

  5. In your Content Browser, find the ProductViewer/Blueprints/ProductViewer_Collector Blueprint Actor, and drag and drop it into the Level Viewport.

  6. Finally, set up the ProductViewer_Collector Actor in your Level as instructed under Adding Your Own Content above.

Select Skin

Welcome to the new Unreal Engine 4 Documentation site!

We're working on lots of new features including a feedback system so you can tell us how we are doing. It's not quite ready for use in the wild yet, so head over to the Documentation Feedback forum to tell us about this page or call out any issues you are encountering in the meantime.

We'll be sure to let you know when the new system is up and running.

Post Feedback