前端封装 IndexedDB 存储和使用gltf模型文件的方法，以重复使用代码

以下是一个简单的封装IndexedDB存储和使用gltf模型文件的方法，可以重复使用代码：

function saveModelToIndexedDB(modelName, modelData) {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open('models', 1);
    request.onupgradeneeded = function(event) {
      const db = event.target.result;
      const objectStore = db.createObjectStore('models', { keyPath: 'name' });
    };
    request.onsuccess = function(event) {
      const db = event.target.result;
      const transaction = db.transaction(['models'], 'readwrite');
      const objectStore = transaction.objectStore('models');
      const data = { name: modelName, data: modelData };
      const request = objectStore.put(data);
      request.onsuccess = function(event) {
        resolve();
      };
      request.onerror = function(event) {
        reject(event.target.error);
      };
    };
    request.onerror = function(event) {
      reject(event.target.error);
    };
  });
}

function loadModelFromIndexedDB(modelName) {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open('models', 1);
    request.onsuccess = function(event) {
      const db = event.target.result;
      const transaction = db.transaction(['models'], 'readonly');
      const objectStore = transaction.objectStore('models');
      const request = objectStore.get(modelName);
      request.onsuccess = function(event) {
        const modelData = event.target.result.data;
        const loader = new THREE.GLTFLoader();
        loader.parse(modelData, '', function(gltf) {
          resolve(gltf.scene);
        });
      };
      request.onerror = function(event) {
        reject(event.target.error);
      };
    };
    request.onerror = function(event) {
      reject(event.target.error);
    };
  });
}

上述代码中，saveModelToIndexedDB()方法用于将gltf模型文件存储到IndexedDB中，需要传入模型名称和模型数据。loadModelFromIndexedDB()方法用于从IndexedDB中加载gltf模型文件，需要传入模型名称，返回一个Promise对象，可以使用then()方法获取加载的模型场景。

使用示例：

// 加载模型
loadModelFromIndexedDB('model').then(function(scene) {
  // 将模型添加到场景中
  scene.position.set(0, 0, 0);
  scene.scale.set(1, 1, 1);
  scene.rotation.set(0, 0, 0);
  scene.traverse(function(child) {
    if (child.isMesh) {
      child.castShadow = true;
      child.receiveShadow = true;
    }
  });
  scene.name = 'model';
  scene.userData = { type: 'model' };
  scene.visible = true;
  scene.updateMatrix();
  scene.updateMatrixWorld();
  // 将场景添加到场景管理器中
  sceneManager.add(scene);
}).catch(function(error) {
  console.error(error);
});

// 存储模型
const loader = new THREE.GLTFLoader();
loader.load('model.gltf', function(gltf) {
  saveModelToIndexedDB('model', gltf.parser.json).then(function() {
    console.log('Model saved to IndexedDB.');
  }).catch(function(error) {
    console.error(error);
  });
});

上述代码中，使用loadModelFromIndexedDB()方法加载模型，使用saveModelToIndexedDB()方法存储模型。需要注意的是，loadModelFromIndexedDB()方法使用了THREE.GLTFLoader()加载器解析模型数据，因此需要先引入THREE.js库。