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%}
