技术分享 Technology to share

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('模型未加载成功')
    }
  }
}


上一篇: mysql忘记备份并且删除了

下一篇: html5 直播