World Tracking Hotspots

This example project demonstrates interactive hotspots positioned and billboarded around a world tracked 3D model, with each hotspot launching a different URL when tapped.

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

Editing the project

Repurposing this example project requires very few steps and can be achieved with a simple asset swap, and by editing the hotspot's properties.

  1. Delete the Engine node from the Hierarchy and its subsymbol from the Symbol Definitions.
  2. Import your 3D model to ZapWorks Studio and drag the resulting symbol into the Ground group in the Hierarchy.

  3. Edit the existing hotspot nodes in the Hierarchy You can change the hotspot icon, hotspot color, pulse animation etc. For more information on the properties available for the component check out the Hotspot subsymbol article.

    You can delete unnecessary Hotspot nodes from the Hierarchy, or add new instances by dragging the Hotspot subsymbol into the Hierarchy.

  4. 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.)

If a new hotspot was 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.

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

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

zapcode branded_zapcode i