<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:

    popup3d.png

  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;