在mapbox中加载3d模型时如何使用缓存？

Question

我有连接到集群节点的3D模型。当我从一个节点切换到另一个节点时，模型将从屏幕上清除，而另一个模型将添加到地图中。当我选择上一个节点时，我希望预加载的3d模型来自缓存。

`

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

Answer 1

为此，您需要构建自己的缓存(最好是Map对象等)来存储gltf.scene结果。

您肯定需要一些函数来包装您的对象加载器引擎，并为Map缓存创建一个适当限定作用域的变量。

• 您需要的第一个方法(让我们称其为'loadCache‘)将首先检查Map中的键(我建议使用url作为value和Promise)是否已经存在。

- 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`

如果你打算努力使用Mapbox和three.js，我建议你看看threebox，它已经以这种方式实现了缓存，以优化性能并加载数以千计的对象和许多其他功能。您还可以检查cache logic implemented in threebox here

​

​