Skip to content

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 可以看到缓存的模型。