three.js也要使用本地缓存

又是难搞的一天，今天遇到了一个问题webgl的巨大的模型加载对于前端和服务器带宽来说都是致命性的。

这个时候最明显的解决策略就是缓存。85mb的模型 localStorage 这个时候就显得力不从心了、于是我把目光投向了 indexedDB 这玩意和其他几个缓存对比起来最大的优势就两点 理论上储存无上限 、 可以直接储存 blob（二进制大对象） 这就很方便了、正好贴合 webgl缓存所带来的问题。

从百度收集 indexedDB 操作方式得到如下代码：

// 创建数据库连接(注释为个人结合经验理解)
var connect = window.indexedDB.open('hiwebpage');

var db

connect.onupgradeneeded = function (event) {
  console.log("数据库更新")

  db = event.target.result;

  // 判断是否有这个表
  if (!db.objectStoreNames.contains('person')) {
    // 创建表
    var objectStore;

    objectStore = db.createObjectStore('person', {
      // 主键
      keyPath: 'id'
    });

    // 创建索引
    objectStore.createIndex('blob', 'blob', {
      // 是否唯一
      unique: false
    });
    objectStore.createIndex('name', 'name', {
      // 是否唯一
      unique: true
    });

  }
}

connect.onsuccess = function (event) {
  console.log("数据库打开成功")
  db = event.target.result

  // 通过事务来写入表
  // db.transaction(['person', 'xj'], 'readwrite').objectStore('person').add({
  //   id: '2',
  //   blob: 'xj'
  // })

};

// 添加
function dbadd() {
  var file = arguments[0].target.files[0];

  // 骚操作 file转blob
  var blob= file.slice(0, file.size)

  // 这里是three 加载器需要的
  // var blobUrl = URL.createObjectURL(blob);

  console.log(blobUrl);
  window.sqlDb.transaction(['smartlight'], 'readwrite').objectStore('smartlight').add({
    id: '1',
    name: "model",
    blob: blob
  })
}

function dbread() {
  // 读取
  var request = window.sqlDb.transaction(['smartlight']).objectStore('smartlight').index('name').get('model')

  request.onsuccess = function (e) {
    var result = e.target.result;
    if (result) {

      // 这里是three 加载器需要的
      var url = URL.createObjectURL(result.blob)

      let loader = new THREE.GLTFLoader();

      loader.load(url, function (gltf) {

        // 清理 blob协议缓存
        URL.revokeObjectURL(url)

        scene.add(gltf)

      },function (xhr) {
        console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
      },
      // called when loading has errors
      function (error) {
        console.log("An error happened");
      })
      

    } else {

      //  老实http请求
      console.log('模型未加载成功')
    }
  }
}