It’s possible to show default loading with ImportMeshAsync ?
You may be looking for this
BABYLON.SceneLoader.ShowLoadingScreen = true
1 Like
scene.getEngine().displayLoadingUI();
...
scene.getEngine().hideLoadingUI();
1 Like
You can also create your own Loading View
For example:
- In your HTML
<!-- Loading DIV -->
<div id="loadingDiv">
<p id="loadingText" class="font-weight-light">L O A D I N G</p>
<span class="loader"></span>
</div>
- Format your Loading DIV in your CSS
/* Loader */
#loadingDiv {
z-index: 200;
position: absolute;
width: 100%;
height: 100%;
background: #8bb4ff; /* Old browsers */
background: -moz-linear-gradient(top, #8bb4ff 0%,#ff60f2 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #8bb4ff 0%,#ff60f2 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #8bb4ff 0%,#ff60f2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FB7BA2', endColorstr='#FCE043',GradientType=0 ); /* IE6-9 */
/* border: 25px solid rgb(255, 255, 255); */
touch-action: none;
-webkit-user-select: none; /* Safari */
-ms-user-select: none; /* IE 10 and IE 11 */
user-select: none; /* Standard syntax */
}
#loadingText {
position: absolute;
color: white;
display: inline-block;
box-sizing: border-box;
text-align: center;
font-size: x-small;
width: 100%;
top: 50%;
left: 50%;
height: 50px;
transform: translate(-50%, -50%);
margin-top: 40px;
letter-spacing: 0.3rem;
touch-action: none;
-webkit-user-select: none; /* Safari */
-ms-user-select: none; /* IE 10 and IE 11 */
user-select: none; /* Standard syntax */
/* animation: animText 6s ease infinite alternate; */
}
@keyframes animText {
0% {
letter-spacing: 0.2rem;
}
100% {
letter-spacing: 0.4rem;
}
}
.loader {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
width: 48px;
height: 48px;
display: inline-block;
position: relative;
}
.loader::after,
.loader::before {
content: '';
box-sizing: border-box;
width: 48px;
height: 48px;
border-radius: 50%;
border: 2px solid #FFF;
position: absolute;
left: 0;
top: 0;
animation: animloader 2s linear infinite;
}
.loader::after {
animation-delay: 1s;
}
@keyframes animloader {
0% {
transform: scale(0);
opacity: 1;
}
100% {
transform: scale(2);
opacity: 0;
}
}
- And finally in your js code you can hide your Loading DIV when your model is loaded
setTimeout(() => {
hideLoadingView();
}, 1000);
// Hide Loading View
function hideLoadingView() {
document.getElementById("loadingDiv").style.display = "none";
}
Here you´ve an example:
1 Like