In case of a complex Three.js scene, loading it usually cause some buffering time initially. This would affects the loading screen animation (both CSS and JS based), if have any, causing it to stuttering and lagging.
Is there a way to create loading screen, that is not affected by a complex Three.js scene initialization? Additionally, is it also doable in React Three Fiber?
In Fiber this should be less of a problem than in vanilla because most primitives are suspense based, meaning they unsuspend when they’re loaded, parsed and preemptively uploaded. hooks like useTexture do this for instance ootb. Another helper you can look into is drei/Preload which renders the whole scene through a cube camera for a frame to avoid frame skipping runtime because three will not process objects when they’re loaded but when it “sees” them.
Additionally, you can avoid any and all jank with this GitHub - pmndrs/react-three-offscreen: đź“ş Offscreen worker canvas for react-three-fiber
Animated gifs seem to work pretty well even when the main js thread is blocking.
Thanks for the suggestion, but correct me if I’m wrong as I understand the suspense and Preload seems to be more of solutions for loading obj while in the scene, rather than the first initial scene load.
The offscreen canvas looks interesting. I will give it a try!
suspense is for async tasks in general, including loading. first load or consecutive. the problem with traditional loading managing in threejs is that it just doesn’t work that way, just because something went over the network doesn’t mean it has been parsed and processed. with suspense these things can be included, when the suspense lifts idially the scene is ready.
Thanks alot! I just tried it out and it works really well.
Nice! Ya for some apps, I’ll use a gif “loading…” indicator… then, once everything is loaded, render a single frame of the scene from high above to get through the first frame hitch where everything is getting uploaded to the GPU… then turn up the lights. 
I see, so that means the Fiber loading would take “longer” than three’s loading manager, as it also take into account the parsed and processed of the obj, right? I’m using drei useProgress, would it reflect the loading like suspense you mentioned, which means progress == 100 means scene is ready?
yes. useProgress on the other hand would just include networking, that’s imo not good enough and will directly cause the issues you noticed. not knowing when something is ready to display imo is not ideal. the scene is ready when all textures are gpu uploaded, all models loaded, parsed and processed. that doesn’t happen even if you add stuff to the scene after load. the two helpers i mentioned + suspense will let you open the canvas without a single frame skip.
the animated gif is a nice trick, because it doesn’t run on the main thread. everything else would stop while three is processing. well, unless you use offscreen canvas.