I’m working on a Three.js project where some of the scenes take a few seconds to load, and I’m thinking about ways to keep users engaged during those moments. In a casual conversation, someone mentioned the lettersboxed.com site as an example of a simple, interactive experience that can hold attention while waiting for content.
It got me wondering, what are some lightweight interactive ideas you’ve used in three.js projects to make loading times feel shorter or more engaging? Do you usually stick to simple animations, small mini-games, or something else entirely?
Would love to hear what’s worked well for you and how you balance engagement without affecting performance.
You can try displaying a LottieFiles animation which tend to be more engaging to watch than simple progress bar loaders:
In my opinion, a model loading page will never stay on screen long enough for users to engage in an actual mini game, at least that’s how I implement them. They are removed immediately after the model is loaded. If you want users to engage in a mini game or other interactive activities, you would need to make the loading page display on top of the model canvas, or in a dialog box, and then create a button that would close the page when users completed the game, revealing the canvas with the loaded model.
An issue with this is that often, loading stalls the main thread.. when meshes/textures get uploaded, and shaders get compiled (if you’re precompiling).. and these stalls can make any interactive element you have during loading, feel janky.
I usually just throw up a spinning .gif to cover loading (because gifs aren’t animated on the main thread, so still animate smoothy, even when the js thread is stalling).
As far as I know, CSS animations also work independently of the main thread, so you can also use CSS preloaders, which can be much smoother and more refined than GIFs.
In my experience, there is no need to offer users new content that is completely disconnected from the main content. What I usually do is place here any information that helps and provides context prior to the core experience, such as an explanation of the UI/UX, narrative aspects, pieces of contextual information, and in general any information that helps to understand how what is to come will be used. Of course, this can also be animated or presented as a sequence of graphic pieces, depending on your graphic style and approach. But all this and more can fit into a generous six seconds. You will be surprised to see that users have not finished reading a simple paragraph of text when everything has already been downloaded.
Here are the things to NOT PUT in loading screens:
advertisement of any kind (including your own promotions)
empty page with no indication that something important is going on
a progress bar that does not increase linearly in time
too long text or too engaging content or anything that needs a lot of time to perceive
My best shot was with random quotes - short enough to read in a few seconds, but soon I found some users reloaded the page just to see another quote. That was long time ago and for CS students, but could be repurposed for other domains. Here are a few sample quotes (trying to cite them by heart but my memory often slips nowadays):
What a programmer can do in a month, three can do in three months.
Code is like a joke, if you need to explain it, it is worthless.
If it does not work, it does not matter how fast it does not work.