Progressive Loading / LOD / Streaming Mesh in Three.js

Real progressive loading / mesh streaming is not there out of the box. It would be great though and is doable.

It has been done with WebGL without three.js using POP buffers: http://x3dom.org/pop/ & https://github.com/thibauts/pop-buffer

One of the demos is: http://x3dom.org/pop/happy.html

I hope one day we'll have nice POP buffer (or similar alternative) progressive loading for three.js too -- is in my/our todo / wish list too but many things still before that here .. sure don't mind if someone writes it earlier :)

Three does include a simple LOD mechanism but it is to help with rendering load and not with loading time: http://threejs.org/docs/#Reference/Objects/LOD & http://threejs.org/examples/webgl_lod.html

For a simple solution, you could author low & high versions of your models and write custom loading logic to just first load the low one & show them, then proceed to load the high version etc.

We've done that in one project, works fine as expected. Only downside I can figure is that it increases the total time to get the high version. But the low can be very small so it's ok (in our case low poly untextured with just vert colours, then the high ones have much more polys but essentially quite big textures too).