Usually, ThreeJS 3D Sccenes are very laggy and inits slowly. This method makes the browser performance better and shows simple css rotating animation until everything gets loaded with the scene.
Because the loading text and animation HTML it can be anything can be a lottie or SVG or png or video…etc
Enjoy.
See the Pen spline loading v2.6 by sinanisler (@sinanisler) on CodePen.
<div class="wrapper-3d">
<canvas id="canvas3d"></canvas>
<div class="loading-inner-3d">
3D Loading <span class="icon-loading-3d"> ↻</span>
</div>
</div>
<script type="module">
import { Application } from 'https://unpkg.com/@splinetool/[email protected]/build/runtime.js';
const splineSceneURL = 'https://prod.spline.design/kUJZ1MiBGg7E7wzh/scene.splinecode?v15';
document.addEventListener('DOMContentLoaded', () => {
const canvas = document.getElementById('canvas3d');
const spline = new Application(canvas);
//canvas.style.width = '100%'; canvas.style.height = '400px';
spline.load(splineSceneURL)
.then(() => {
setTimeout(() => {
const loading = document.querySelector('.loading-inner-3d');
loading.style.display = 'none';
}, 500);
})
.catch((error) => {
const loading = document.querySelector('.loading-inner-3d');
loading.innerText = 'Error loading the scene.';
console.error('Error loading the scene:', error);
});
});
</script>
<style>
.wrapper-3d {
width: 100%;
height: 600px;
position: relative;
}
.icon-loading-3d {
display: inline-block;
animation: rotation 1s infinite linear;
margin-left:10px;
color:#00d62d;
font-size:20px;
}
@keyframes rotation {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.loading-inner-3d {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
z-index: 999;
font-size: 14px;
color: #00d62d;
font-family:Arial;
background:black
}
</style>