three.js - How can I use cache when loading 3d models in mapbox?

Question

I have 3D models connected to cluster-nodes. When I switch from one node to another, the model is cleared from the screen and the other model is added to the map. When I select the previous node, I want the preloaded 3d model to come from the cache.

`

https://jsfiddle.net/1auox3f8/20/ `

question from:https://stackoverflow.com/questions/65917344/how-can-i-use-cache-when-loading-3d-models-in-mapbox

Answer 1

For that you'll need to build your own cache (a Map objetc could be ideal) that stores gltf.scene result.

You'll surely will need some functions wrapping up your object loader engine and to create a properly scoped variable for the Map cache.

• The first method you need (let's call it 'loadCache', will checks first if the key (I would suggest to use the url as a key and a value with the Promise) in the Map already exist.

  • If url key doesn't exist in your Map cache, you create a new key in the Map cache, with a value that is the Promise. That promise will call another method (let's call it loadObj) receiving the url and a callback method, and it will call to the loader.load. Once loader.load creates the object gltf.scene, you return the object to loadCache and resolve the promise.
  • If url key already exist in your Map cache, then just get the result of it with .then

If you are going to play hard with Mapbox and three.js, I'd recommend you to take a look to threebox that already has cache implemented in this way to optimize performance and load thousands of objects among many other features. You can also check the cache logic implemented in threebox here