<aside> 💡 Description: Examples of interactive and clickable “hotspot” in 3D scene which opens 2D HTML or 3D Pop up elements with useful info.

</aside>

BMW (3).MOV

To create a 2D interactive hotspot you need:

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:

const popupWrapper = document.createElement("div");

popupWrapper.innerHTML = `
<div id="hotspot-popup" style="
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 250px;
    height: auto;
    padding: 25px;
    background: #fff;
    color: #000;
    opacity: 0;
    pointer-events: none;
    transition: all .2s linear;
    transform: translate(-50%, -50%);
    text-align: center;
    border-radius: 20px;
" >

	<img src="<https://www.cnet.com/a/img/tIybMf-8h73MFG4X5gkAFlcEON8=/940x0/2020/03/03/91ab8b78-1833-4029-9a8a-538c394016fd/bugatti-promo.jpg>" style="
	display: block; 
	width: 200px; 
	height: auto; 
	margin: 10px auto
	">

	<h2 style="
	font-weight: bold;
	margin: 20px;
	font-size: 24px;
	">The Chiron</h2>
	<p style="
	line-height: 20px;
	">The Chiron is the fastest, most powerful, and exclusive production super sports car in Bugatti’s history.</p>

</div>`;

// add your element to "app" DOM:
document.getElementById('app').appendChild(popupWrapper);

// this makes your 2D popup hides after you click on it
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. Example:

   hotspot_energy.glb

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

   // it shows 2D UI HTML element.
   this.on('on-model-click', () => {
       const popupStyle = document.getElementById('hotspot-popup').style;
       popupStyle.opacity = 1;
       popupStyle.pointerEvents = 'all';
   })
   

3D Hotspots works even easier:

1. Add your first child object into a 3D scene

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

   hotspot_energy.glb

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

   // it shows "popup3D" object in the scene by clickcking on hotspot object
   this.on('on-model-click', () => {
       const popup3d = this.activeSceneModel.getObjectByName('popup3D');
       popup3d.visible = true;
   })
   

4. Add your popup in the 3D scene. Example:

   

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

   // Give the "popup3D" name to the object and hide it
   this.object3D.name = 'popup3D';
   this.object3D.visible = false;
   
   // Hide the object by clicking on it (Optional)
   this.on('on-model-click', () => {
           this.object3D.visible = false;
   });
   

6. Add this to POPUP Custom Code to make popup object always be faced to the camera:

   const render = (context) => {
           this.object3D.lookAt(this.activeSceneModel.camera.position);
           this.object3D.rotation.x = 0;
           this.object3D.rotation.z = 0;
   }
   this.activeSceneModel.userCallbacks.onRender = render;