indexedDB 模型缓存
通过 indexedDB 的方式缓存模型。 模型参数 modelInfoParams 中的 saved 字段,判断是否已经在本地缓存了此模型,如果缓存则直接从本地缓存中导入,如果没有,则采用先缓存后导入的方法。
初始化
默认已经设置了一个 div 宽度为 600px, 高度为 400px, id 设置为 TO 的容器。
js
let TO = new ThingOrigin("fileModel", document.getElementById("TO"))
模型数据
这里的 modelUrl 表示模型地址,例子中用的是本地地址,也可以用服务器地址 如: 'http://xxx/abb.gltf'。
js
let data = {
id: 3012,
modelName: "ABB机器人-1-copy-1",
modelType: "gltf",
scale: {
x: 1,
y: 1,
z: 1,
},
position: {
x: 28.39038575589657,
y: 0,
z: 0,
},
rotation: {
x: 0,
y: 0,
z: 0,
},
base: {
modelUrl: "./model/abb.gltf", //模型地址
},
userData: {},
saved: true, //此为关键字段
}
indexedDB缓存模型
使用 TO.indexedDB.accessModel 方法 判断是否已缓存此模型,返回是否存储,若已缓存返回模型参数。
js
const accessModel = await TO.indexedDB.accessModel(data)
console.log(accessModel)
判断 accessModel.info.saved 字段, 如果缓存了模型则直接导入,未缓存则向indexedDB数据表中,存储模型,再进行导入操作。
js
let modelUrl = null;
//如果缓存了 直接导入
if (accessModel.info.saved) {
modelUrl = accessModel.modelUrl;
//导入模型
TO.model.initFileModel(accessModel.info, modelUrl).then((model) => {
TO.scene.add(model.scene);
});
} else {
//未缓存则先缓存再导入
//向indexedDB数据表中,存储模型
const insertModel = await TO.indexedDB.insertModel(data);
if (insertModel.info.saved) {
modelUrl = insertText.modelUrl;
//导入模型
TO.model.initFileModel(insertModel.info, modelUrl).then((model) => {
TO.scene.add(model.scene);//添加模型
});
}
}
在浏览器控制台的“应用”一栏中,参看 indexedDB 可以看到缓存的模型。