- Imports the Spline runtime for rendering the 3D scene.
- Waits for the DOM to load before running the script.
- Creates a “loading” div and adds it to the body.
- Loads a 3D scene from a URL. Once loaded, hides the “loading” div after a short delay.
- If loading fails, displays an error message.
<style>
div.loading {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
padding: 10px;
display: block;
text-align: center;
background: white;
z-index: 999;
font-size: 200px;
font-family: Helvetica;
}
#canvas3d {
width: 100vw;
height: 100vh !important;
}
</style>
<canvas id="canvas3d"></canvas>
<script type="module">
import { Application } from 'https://unpkg.com/@splinetool/runtime@latest/build/runtime.js';
document.addEventListener('DOMContentLoaded', () => {
const canvas = document.getElementById('canvas3d');
const spline = new Application(canvas);
// Dynamically create the loading message with the class 'loading'
const loading = document.createElement('div');
loading.classList.add('loading');
loading.innerText = 'Loading...';
// Append it to the canvas container or the body
document.body.appendChild(loading);
spline.load('https://prod.spline.design/xn-sYciWeFcstOB0/scene.splinecode?v10')
.then(() => {
// Hide the loading after a delay of 500ms
setTimeout(() => {
loading.style.display = 'none';
}, 500);
})
.catch((error) => {
loading.innerText = 'Error loading the scene.';
console.error('Error loading the scene:', error);
});
});
</script>
demo;