Lazy loading parts of a large scene


I discovered three js this morning and I am pretty sure it will be the right tool.

But I would like to know the best strategy for lazy loading elements to a scene.
For example, when I look at a gta game maps are huge and have parts loaded depending on the player position.

How can we achieve that behaviour with three js?
What is the best way to do it?

I am not asking for specific code, but pointers to get started with this.


getting lazy loading right can be quite a challenge because you need to reconcile it with everything else, events, interaction, animation, etc. this is best abstracted into a stable reference class that can replace its own contents (meshes, materials) while exposing stable methods to the outside world (update, render, etc), like a proto-component. but it will still take some plumbing. for a starting point you could look into how THREE.Lod works, it replaces its contents depending on the cameras distance.

in the off-chance that you can consider react, this stuff is easy because it’s a built-in and quite natural when components have real life-cycles. combine this with LOD. and you have it.

Thank you, I will dig into the issue!

For a really huge scene, where a web client can’t realistically ever have everything in memory, I’d have a look at some of the 3D Tiles / three.js integrations:


I was thinking about it, but I will implement my own solution.

Except if I am wrong, I can add objects to the scene on the go and manage their lifetime depending on the location with dispose().

But I am leaning more towards tiling than full scene loading…

Thanks :+1::blush:

1 Like