{"remainingRequest":"D:\\jenkins\\workspace\\sfz-lh-fvue\\node_modules\\thread-loader\\dist\\cjs.js!D:\\jenkins\\workspace\\sfz-lh-fvue\\node_modules\\babel-loader\\lib\\index.js!D:\\jenkins\\workspace\\sfz-lh-fvue\\node_modules\\eslint-loader\\index.js??ref--13-0!D:\\jenkins\\workspace\\sfz-lh-fvue\\src\\views\\BigScreen\\3DModel\\loader.js","dependencies":[{"path":"D:\\jenkins\\workspace\\sfz-lh-fvue\\src\\views\\BigScreen\\3DModel\\loader.js","mtime":1704446570210},{"path":"D:\\jenkins\\workspace\\sfz-lh-fvue\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\jenkins\\workspace\\sfz-lh-fvue\\node_modules\\thread-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\jenkins\\workspace\\sfz-lh-fvue\\node_modules\\babel-loader\\lib\\index.js","mtime":315532800000},{"path":"D:\\jenkins\\workspace\\sfz-lh-fvue\\node_modules\\eslint-loader\\index.js","mtime":499162500000}],"contextDependencies":[],"result":["import \"regenerator-runtime/runtime\";\nimport _asyncToGenerator from \"D:/jenkins/workspace/sfz-lh-fvue/node_modules/@babel/runtime/helpers/esm/asyncToGenerator\";\nimport _classCallCheck from \"D:/jenkins/workspace/sfz-lh-fvue/node_modules/@babel/runtime/helpers/esm/classCallCheck\";\nimport _createClass from \"D:/jenkins/workspace/sfz-lh-fvue/node_modules/@babel/runtime/helpers/esm/createClass\";\n\n/**\r\n * 此工具类是对三维模型数据存储到浏览器indexDB的封装\r\n * 【为什么使用indexDB存储三维模型数据】：\r\n *  >> 由于微信浏览器glb模型的浏览器缓存不生效(服务器配置了强缓存和协商缓存，但每次还是需要重新拉取)，出于用户体验优化的考虑，直接缓存到浏览器数据库中\r\n * 【实践过程】：\r\n *  1. 最开始尝试直接存储加载glb的模型的json数据，无法直接存储\r\n *  2. 其次尝试JSON.stringify转换成字符串，由于此方法原型链丢失，也无法直接使用\r\n *  3. 最终采用blob类型存储实现\r\n * 【如何使用？】参照如下：\r\n * const indexDB = new DBUtils(dbName, storeName, dbVersion)\r\n * indexDB.get(modelUrl).then(blob => {\r\n *  const url = URL.createObjectURL(new Blob([blob]));\r\n *  const loader = new GLTFLoader();\r\n *  loader.load(url, (gltf) => {\r\n *    const root = gltf.scene\r\n *    ...(下面部分就和threejs加载glb模型代码一样，按业务需求做相应的操作)\r\n *  }, xhr => {\r\n *    const {loaded, total } = xhr\r\n *    console.log(`已加载${loaded / total * 100}%`)     \r\n * })\r\n */\nvar DBUtils = /*#__PURE__*/function () {\n  function DBUtils(dbName, storeName) {\n    var dbVersion = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;\n\n    _classCallCheck(this, DBUtils);\n\n    this.dbName = dbName;\n    this.storeName = storeName;\n    this.dbVersion = dbVersion;\n    this.db = null;\n  }\n\n  _createClass(DBUtils, [{\n    key: \"get\",\n    value: function () {\n      var _get = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(url) {\n        var _this = this;\n\n        var request;\n        return regeneratorRuntime.wrap(function _callee$(_context) {\n          while (1) {\n            switch (_context.prev = _context.next) {\n              case 0:\n                _context.next = 2;\n                return this.initDataBase(this.dbName, this.storeName, this.dbVersion);\n\n              case 2:\n                this.db = _context.sent;\n                request = this.db.transaction([this.storeName], 'readwrite').objectStore(this.storeName).get(url);\n                return _context.abrupt(\"return\", new Promise(function (resolve, reject) {\n                  request.onsuccess = function (evt) {\n                    var modelFile = evt.target.result; // 如果缓存中有，直接从缓存中获取\n\n                    if (modelFile) {\n                      resolve(modelFile.blob);\n                    } else {\n                      // 如果缓存中没有，则请求资源\n                      _this.addData(url).then(function (blob) {\n                        resolve(blob);\n                      }).catch(function () {\n                        reject();\n                      });\n                    }\n                  };\n\n                  request.onerror = function (evt) {\n                    console.log('error', evt);\n                    reject();\n                  };\n                }));\n\n              case 5:\n              case \"end\":\n                return _context.stop();\n            }\n          }\n        }, _callee, this);\n      }));\n\n      function get(_x) {\n        return _get.apply(this, arguments);\n      }\n\n      return get;\n    }()\n  }, {\n    key: \"addData\",\n    value: function () {\n      var _addData = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(url) {\n        var res, blob, obj, request;\n        return regeneratorRuntime.wrap(function _callee2$(_context2) {\n          while (1) {\n            switch (_context2.prev = _context2.next) {\n              case 0:\n                _context2.next = 2;\n                return fetch(url, {\n                  method: 'get'\n                });\n\n              case 2:\n                res = _context2.sent;\n\n                if (!(res.status == 200)) {\n                  _context2.next = 19;\n                  break;\n                }\n\n                blob = null; // 采用fetch的blob()并不是针对所有文件下载都成功,比如json文件得用json(),还有一些编码为gbk格式的用blob()也可能失败，所以采用arrayBuffer和blob兼容处理\n\n                _context2.prev = 5;\n                _context2.next = 8;\n                return res.arrayBuffer();\n\n              case 8:\n                blob = _context2.sent;\n                _context2.next = 16;\n                break;\n\n              case 11:\n                _context2.prev = 11;\n                _context2.t0 = _context2[\"catch\"](5);\n                _context2.next = 15;\n                return res.blob();\n\n              case 15:\n                blob = _context2.sent;\n\n              case 16:\n                obj = {\n                  url: url,\n                  blob: new Blob([blob])\n                };\n                request = this.db.transaction([this.storeName], 'readwrite').objectStore(this.storeName).add(obj);\n                return _context2.abrupt(\"return\", new Promise(function (resolve, reject) {\n                  request.onsuccess = function () {\n                    // 添加数据成功\n                    resolve(obj.blob);\n                  };\n\n                  request.onerror = function (evt) {\n                    console.log('添加数据失败', evt);\n                    reject();\n                  };\n                }));\n\n              case 19:\n              case \"end\":\n                return _context2.stop();\n            }\n          }\n        }, _callee2, this, [[5, 11]]);\n      }));\n\n      function addData(_x2) {\n        return _addData.apply(this, arguments);\n      }\n\n      return addData;\n    }()\n  }, {\n    key: \"initDataBase\",\n    value: function initDataBase(dbName, storeName) {\n      var dbVersion = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;\n\n      if (!window.indexedDB) {\n        console.log('您的浏览器不持支此版的IndexDB');\n      } else {\n        var request = indexedDB.open(dbName, dbVersion);\n        return new Promise(function (resolve, reject) {\n          request.onerror = function () {\n            console.log('error: 创建db时出现异常');\n            reject();\n          };\n\n          request.onupgradeneeded = function (evt) {\n            evt.currentTarget.result.createObjectStore(storeName, {\n              keyPath: 'url'\n            });\n          };\n\n          request.onsuccess = function (evt) {\n            resolve(evt.target.result);\n          };\n        });\n      }\n    }\n  }]);\n\n  return DBUtils;\n}();\n\nexport { DBUtils as default };",null]}