Screen-Recording-2022-04-01-at-13-16-49_1.gif

This is a great way to add useful content to an AR scene. Let the end-user hone in on specific areas of your 3D model and tap on a content hotspot to learn more information.

To create an interactive hotspot:

  1. Add your first child to a 3D scene, open Full-screen Viewer, and click on “{}” to open Custom Code Editor
  2. Create any 2D UI you want to open after clicking on your hotspot:

popupWrapper.addEventListener('click', () => { const popupStyle = document.getElementById('hotspot-popup').style; popupStyle.opacity = 0; popupStyle.pointerEvents = 'none'; })

  1. Add any element you want to act as a Hotspot into the 3D scene. It can be .glb / .jpeg / .png / .gif / .mp4

  2. Open Full-screen Viewer and click on “{}” icon in your HOTSPOT object row. Add the following script below:

this.on('on-model-click', () => { const popupStyle = document.getElementById('hotspot-popup').style; popupStyle.opacity = 1; popupStyle.pointerEvents = 'all'; })

bmw.mp4