#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<string>,可以一次缓存多组模型.

this.$webglModelCache.cacheModelByGLTFList(['./webgl/model/ganghang.gltf','./webgl/model/zhoushanwugang.gltf']);

可以通过 clearCache 来删除全部的缓存

this.$webglModelCache.clearCache();

通过 deleteModelByGLTF 来删除对应 gltf 的缓存,方法接收一个字符串,即:gltf 的 url,方法返回 Promise<string>对象,表示删除成功.

this.$webglModelCache.deleteModelByGLTF(url)

使用 loadModel 加载模型,使用 GLTFLoader 返回一个 Promise<Object>对象,包含被解析后的 gltf 对象.可直接用于渲染.方法接收一个 url 参数,标识需要加载哪一个模型.

this.$webglModelCache.loadModel(url)

###1.0.0 基本功能已完成.

• [x] 1. 对 indexedDB 的增删改查功能.
• [x] 2. 解析 GLTF 文件,获取相应的资源文件列表.
• [x] 3. 通过 ajax 下载资源文件,并以 blob 的方式存储在前端缓存数据库 indexedDB 中.
• [x] 4. 接管 GLTFLoader 解析 GLTF 的操作,直接返回解析后的 gltf 对象.
• [x] 5. 清除全部缓存.

###1.1.0 需要优化的点

• [x] 1. debug 模式,开发过程中,需要频繁更新模型,但有没有必要清除缓存.通过添加 cache:false 不使用缓存.
• [x] 2. 添加 localCache:true 属性来做轻量级缓存,即:当前不刷新的情况下缓存,刷新浏览器之后,缓存重置.
• [x] 3. 当前对资源的缓存是根据文件名称来缓存的,可能会出现多个模型中,静态资源的名称是相同的情况.需要区分开来.
• [x] 4. 清除单个模型的缓存.
• [x] 5. 简化引入的方式.

###1.2.0 优化记录

• [x] 1. 根据模型的缓存进度, 计算整体下载百分比,并利用div展示在前端.
• [x] 2. 根据模型是否缓存完成,添加loading,并在缓存完成之后,删除loading
• [x] 3. 读取模型文件的大小(md5值),从而检测模型是否更新,如果有更新就进行模型的重新加载.
• [x] 4. 读取模型的压缩包,从而降低模型的大小.

###1.2.2 优化记录

• [x] 1. 允许不传场景对象,遮罩会导致模型显示变慢.

###2.0.0 重新使用vite打包,重构