Hotspots on a 3D Model

This example project demonstrates how the hotspot subsymbol can be added to a 3D Model tracked to a target image, with each hotspot launching a different URL when tapped.

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 customize the template:

  1. Delete the Engine_Standard node from the Hierarchy.
  2. Delete the Engine_Standard subsymbol from the Symbol Definitions.

Delete Engine_Standard node from Hierarchy.
Delete Engine_Standard node from Symbol Definitions.

  1. Import your 3D model to ZapWorks Studio.
  2. Drag the resulting subsymbol into the Tracking Image group in the Hierarchy.
  3. Edit the existing hotspot node properties in the Hierarchy.
  4. Delete unnecessary Hotspot nodes from the Hierarchy, or add new instances by dragging the Hotspot subsymbol into the Hierarchy.
  5. If a new hotspot is added to the Hierarchy, set up a new event handler for its custom:pointerdown event within the EDIT ME Script node with the following method, where myHotspot is the name of the variable created when the new hotspot is dragged from the Hierarchy into the top of the script node.


Example:

 myHotspot.on("custom:pointerdown", () =>{
    // Add your functionality here.
 });

If you renamed an existing node, remember to also update the name of the node within its event handler in the script node.

  1. Select the EDIT ME Script node and modify the functionality within each hotspot's custom:pointerdown event handler. For example, to launch a different URL from the hotspot, change the website within the launchUrl(...) function, or remove this line of code and add your own functionality (playing an animation, activating a state etc.)
  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 tracking image.

zapcode branded_zapcode i