Basic Loading Screen

loading-manager
loading-screen

#1

I’ve recently used this code for a stackoverflow post. It shows how to create a basic loading screen with THREE.LoadingManager and a HTML based overlay with nice CSS animations. The loading screen disappears, as soon as all assets are loaded.

Demo: https://jsfiddle.net/8w3deqyg/

If you don’t like the visuals of the loading screen, no problem. There is a huge selection of CSS loader animations:


Adding Loading bar in Editor
#2

Nice. I’ll need to see if I can bum some of this and improve my loader stuff.

That trooper really has some dope moves! He pumpin’ it.


#3

does this works in WebVR?


#4

No. All these loading indicators are just overlays on top of the screen. This type of UI elements is also called “non-diegetic” or screen-space UI elements and does not work in VR.

Instead, you need spatial or “diegetic” UI elements. There is a nice guide of the Unity documentation that explains this topic very well: