Basic Loading Screen

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/sojzu8a5/1/

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

32 Likes

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.

1 Like

does this works in WebVR?

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:

Update

I found the Stack Overflow post and working example. Thanks @Mugen87!

Original

Mind sharing the link to your Stack Overflow post? I’m looking into using a custom loading indicator with THREE.LoadingManager but need a good resource to start!

Hi, I have a project which loads a bunch of 3D models, and I want to create a loading screen. Is the LoadingManager the way to go then? I was expecting that I’ll have a loading screen in the onProgress part of the OBJLoader.

When you load multiple models, you have to work with LoadingManager.