ZapBox Hotspots

This example project demonstrates interactive hotspots positioned and billboarded around a 3D model, with each hotspot starting, stopping and resetting an animation timeline when a zapbox controller overlaps it.

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

This example project uses the Hotspot subsymbol.

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_Standard 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 ZapBox Tracker > Map 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.

  1. Add your subsymbol’s animation to the current Timeline, under the Animation Controller. A more detailed step-by-step can be found here: Setting up a timeline in the parent symbol.

If a new hotspot was added to the Hierarchy, set up a new event handler for its triggerenter 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.

symbol.nodes.myHotspot.nodes.Trigger_Region.on("triggerenter", () =>{
   // 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