Product Visualisation

Studio

Product Visualisation

This project template displays an interactive 3D Model with three interchangeable textures and an intuitive UI, tracked to a target image.

You can find this example project within the New Project modal in ZapWorks Studio.

Print and scan the tracking image below to preview the experience.


Editing the project

Follow the steps below to customise the template:

  1. Delete the Car Shadow and Toon Car nodes from the Hierarchy.
  2. Delete the Toon Car subsymbol from the Symbol Definitions.

Delete the Car Shadow and Toon Car node from Hierarchy
Delete the Toon Car node from Symbol Definitions

  1. Import your 3D model to ZapWorks Studio.
  2. Drag the resulting subsymbol into the Manipulation Group in the Hierarchy.
  3. Double click the newly imported 3D Model and head into the subsymbol.
  4. Find the material node in the Hierarchy that contains the texture you’d like to switch out from the parent symbol.
  5. Right-click on the node’s Diffuse Map property and select Reference. You’ll now be able to change this property from the parent symbol.

In the example we have named the reference 'CarBody_texture', for your project it should be named something relevant.

Reference Diffuse Map.

  1. In the parent symbol, import the three textures you’d like the model to switch between to the Media Library.
  2. While your 3D model in the Manipulation Group is selected, select the Texture Options controller in the Controllers panel.
  3. Add the Diffuse Map property you referenced during set up to the controller by clicking the + icon next to it.

Add reference property to Texture Options controller.

  1. For each state, assign a different texture to the model’s referenced property.

Assign different material colors.

  1. Edit the Color property of the Option Button nodes (UI) in the Texture Selector > Textures group to suit your texture options.

Edit UI color.

  1. Change the URL field in the On Tap Action for each of the Link objects in the Shop Button Group.
  2. Train up a new tracking image within your project.
  3. Select the Tracking Image node in the Hierarchy and, within its Properties, update its Source to that of the newly trained target.

Change source of the tracking image.

  1. Preview the experience and interact with your 3D model!
Open in new window