Interactive 3D Hotspots With Elementor Popups

February 22, 2024

In this Spline and Elementor tutorial I’m going to show you something I just figured out.
This really is some game changer stuff!!

I found a way make your Spline scenes interact with your Elementor popups.

Remix Spline Scene:
https://community.spline.design/file/05f6d8ef-d61e-487d-a838-d60a157de555

How to Import 3D Models to Spline Video:
https://www.youtube.com/watch?v=Tg7uyoA1yWM

Get JetPopup:
https://crocoblock.com/plugins/jetpopup/?ref=2562&campaign=JetPopup

Get Elementor:
https://wickydesign.com/get-elementor

3D Glass Building Model:
https://sketchfab.com/3d-models/glass-building-low-poly-38cab01ee5ae4fbf8a35b0360d2998cf

Flaticons:
https://www.flaticon.com/

Spline Runtime Docs:
https://www.npmjs.com/package/@splinetool/runtime?activeTab=readme

Timestamps:

0:00 Introduction
1:23 Spline Tutorial Begins
5:43 Spline Look At Event
7:58 Spline Export Settings
12:50 Elementor Tutorial Begins
14:18 Spline & JavaScript Code Explained
16:31 Spline Fullscreen CSS Code
17:18 JetPopup Tutorial Begins
21:06 CSS Pointer-Events Explained
23:38 Spline Mobile Settings
26:01 Spline & Browser Performance

JavaScript Code

<canvas id="canvas3d"></canvas>
<script type="module">
    import { Application } from 'https://domain.com/runtime.js';
    const canvas = document.getElementById('canvas3d');
    const spline = new Application(canvas);
   spline
   .load('https://domain.com/scene.splinecode')
        .then(() => {
            spline.addEventListener('mouseDown', (e) => {
                if (e.target.name === 'pool-hotspot') {
                    jQuery(window).trigger({
                        type: 'jet-popup-open-trigger',
                        popupData: {
                            popupId: 'jet-popup-75',
                        }
                    });
                }
            });


            spline.addEventListener('mouseDown', (e) => {
                if (e.target.name === 'restaurant-hotspot') {
                    jQuery(window).trigger({
                        type: 'jet-popup-open-trigger',
                        popupData: {
                            popupId: 'jet-popup-88',
                        }
                    });
                }
            });


            spline.addEventListener('mouseDown', (e) => {
                if (e.target.name === 'sleep-hotspot') {
                    jQuery(window).trigger({
                        type: 'jet-popup-open-trigger',
                        popupData: {
                            popupId: 'jet-popup-94',
                        }
                    });
                }
            });


            spline.addEventListener('mouseDown', (e) => {
                if (e.target.name === 'shops-hotspot') {
                    jQuery(window).trigger({
                        type: 'jet-popup-open-trigger',
                        popupData: {
                            popupId: 'jet-popup-100',
                        }
                    });
                }
            });
        });
</script>

CSS Code

selector {pointer-events: none;}
selector {pointer-events: auto;}
selector {width:100%;height:100%}

*Some of the links on this page are affiliate links, meaning we may receive a commission if you follow them. This allows us to continue providing free content and educational resources for you. Thank you for supporting our small business!

Share this post: