webgl-model-cache v2.2.1
#webgl-model-cache
使用 indexedDB 缓存 GLTF 模型 模型被缓存之后,可以极大的提高各个模型之间切换的加载效率.调用 loadModel 时不会再发起网络请求. 可以解析zip类型的模型. 缓存分为两种: cache: 持久存储,只要缓存数据库中有数据,就永远不会请求模型 localCache: 本地缓存,请求一次,不刷新不请求.
插件引入已经被简化
可以直接在new的时候传入GLTFFileList,简化初始化的时候还要去入口页面添加额外代码. 在有threejs引入的地方,添加如下代码
import webglModelCache from 'webgl-model-cache'
const WebglModelCache = new webglModelCache({
loadingColor?:"",
cache?:true,
localCache?:true,
THREE,
GLTFLoader,
GLTFFileList:['./webgl/model/ganghang.gltf','./webgl/model/zhoushanwugang.gltf']
});
之后直接在需要初始化模型的地方,即GLTFLoader加载gltf的位置采用loadModel方法即可. scene 场景参数, 把当前的场景对象传入loadModel,用于添加loading遮罩, loadingCb 加载回调, 传入一个函数,函数有一个参数,参数就是当前加载的进度,是真实百分比, 没有*100.用于自定义loading
WebglModelCache.loadModel(url,scene,loadingCb)
初始化
import webglModelCache from 'webgl-model-cache';
let WebglModelCache = new webglModelCache();
// 初始化时可以传递4个参数 默认为
{
cache:true,// 默认开启持久缓存
localCache:false, // 默认关闭本地缓存
GLTFFileList,//需要缓存的gltf列表
THREE?,// 可以初始化时设置threejs对象
GLTFLoader? //gltf的加载器
loadingColor? // loading的遮罩颜色,默认是黑色
}
loadingColor 接收字符串, 具体可以看 three的颜色
如果使用 vue,可以将其挂载到 Vue.prototype 上
import webglModelCache from 'webgl-model-cache';
Vue.prototype.$webglModelCache = new webglModelCache();
由于插件没有引入 threejs,因此需要通过 set 方法将 threejs 对象及 loader 方法注入进插件.
this.$webglModelCache.setThreeJs(THREE,GLTFLoader)
注入之后,就可以调用 cacheModelByGLTFList 方法进行缓存了, 方法接收一个 List\,可以一次缓存多组模型.
this.$webglModelCache.cacheModelByGLTFList(['./webgl/model/ganghang.gltf','./webgl/model/zhoushanwugang.gltf']);
可以通过 clearCache 来删除全部的缓存
this.$webglModelCache.clearCache();
通过 deleteModelByGLTF 来删除对应 gltf 的缓存,方法接收一个字符串,即:gltf 的 url,方法返回 Promise\对象,表示删除成功.
this.$webglModelCache.deleteModelByGLTF(url)
使用 loadModel 加载模型,使用 GLTFLoader 返回一个 Promise\对象,包含被解析后的 gltf 对象.可直接用于渲染.方法接收一个 url 参数,标识需要加载哪一个模型.
this.$webglModelCache.loadModel(url)
###1.0.0 基本功能已完成.
- 对 indexedDB 的增删改查功能.
- 解析 GLTF 文件,获取相应的资源文件列表.
- 通过 ajax 下载资源文件,并以 blob 的方式存储在前端缓存数据库 indexedDB 中.
- 接管 GLTFLoader 解析 GLTF 的操作,直接返回解析后的 gltf 对象.
- 清除全部缓存.
###1.1.0 需要优化的点
- debug 模式,开发过程中,需要频繁更新模型,但有没有必要清除缓存.通过添加 cache:false 不使用缓存.
- 添加 localCache:true 属性来做轻量级缓存,即:当前不刷新的情况下缓存,刷新浏览器之后,缓存重置.
- 当前对资源的缓存是根据文件名称来缓存的,可能会出现多个模型中,静态资源的名称是相同的情况.需要区分开来.
- 清除单个模型的缓存.
- 简化引入的方式.
###1.2.0 优化记录
- 根据模型的缓存进度, 计算整体下载百分比,并利用div展示在前端.
- 根据模型是否缓存完成,添加loading,并在缓存完成之后,删除loading
- 读取模型文件的大小(md5值),从而检测模型是否更新,如果有更新就进行模型的重新加载.
- 读取模型的压缩包,从而降低模型的大小.
###1.2.2 优化记录
- 允许不传场景对象,遮罩会导致模型显示变慢.
###2.0.0 重新使用vite打包,重构