Is it possible to preload all the set of mesh at runtime

I was developing a product configurator and just noticed how slow it was loading new mesh for every part the user changes, so i was curious is it there a method to load all mesh in a scene and keep them invisible to the user until the are called.

That’s a rather less efficient way, since the user will have to wait on start till everything is loaded, and mobile users won’t be happy with just loading everything. It wouldn’t be scalable as well. It depends on a lot factors though, more details would be required. Of course you could preload the assets too.

what if i try local storage ?

As to whether you should do this, it depends on what you need. For VR experiences where texture uploads might cause dropped frames and VR sickness, certainly preloading things is reasonable.

As for whether you can, definitely. One easy approach would be:

  1. show a loading screen while downloading assets
  2. render 1 frame
  3. set mesh.visible = false on anything you want to avoid rendering
  4. hide the loading screen and begin render loop

would a better solution be storing them in html5 indexed db

Such data would be stored in localStorage, not indexed db. But anyways, you shouldn’t force your users to download every model which could be choosed, instead you should focus on improving the loading of it. The first thing is using a binary format if not already, it reduces the file size dramatically and doesn’t require expensive parsing.

which binary format ? , 2. i used indexdb because my local storage cannot hold the information

Why shouldn’t it hold the information? Preferably a binary format that doesn’t require much parsing, try gltf.

I think you can use combination of THREE.Loader() (whatever loader suits you) and Promises api to make sure everything is loaded and then you start the rendering loop.

1 Like