以下是一个简单的封装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库。