如何threejs利用indexeddb缓存加载glb模型
作者:K歌、之王
这篇文章主要介绍了如何threejs利用indexeddb缓存加载glb模型问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
threejs利用indexeddb缓存加载glb模型
有个坑,时不时的下载文件会遇到206错误。
用axios的时候啊 responseType: 'blob’下载不一定会成功。
与文件的格式与编码有关系。
后面我就换成fetch方式了,但fetch的blob()争对所有文件下载也不是都成功,比如json文件得用json(),还有一些编码为gbk格式的用Blob()也不一定回成功,用arraybuffer();
1、加载工具类 indexeddb.js
const DB_NAME = 'daxue1'; const DB_VERSION = 1; // Use a long long for this value (don't use a float) const DB_STORE_NAME = 'model_glb'; export class DBUtil { async get(url, onProgress) { this.db = await this.initDataBase(); let getRequest = this.db .transaction([DB_STORE_NAME], "readwrite").objectStore(DB_STORE_NAME).get(url); let that = this; return new Promise((resolve, reject) => { getRequest.onsuccess = function (event) { let modelFile = event.target.result; // 假如已经有缓存了 直接用缓存 if (modelFile) { if (onProgress) { onProgress(100); } resolve(modelFile.blob) } else { // 假如没有缓存 请求新的模型存入 that.put(url, onProgress).then((blob) => { resolve(blob) }).catch(() => { reject() }); } }; getRequest.onerror = function (event) { console.log('error', event) reject() } }) } async put(url, onProgress) { const response = await fetch(url); if (response.status !== 200) { throw new Error('Request failed'); } const contentLength = response.headers.get('Content-Length'); console.log(contentLength) const totalBytes = parseInt(contentLength, 10); let downloadedBytes = 0; const readableStream = response.body; const { readable, writable } = new TransformStream(); const writer = writable.getWriter(); const reader = readableStream.getReader(); const pump = async () => { const { done, value } = await reader.read(); if (done) { writer.close(); return; } writer.write(value); downloadedBytes += value.length; if (onProgress) { const progress = (downloadedBytes / totalBytes) * 100; console.log(progress.toFixed(2)) onProgress(progress.toFixed(2)); } return pump(); }; await pump(); let blob = null; try { blob = await new Response(readable).arrayBuffer(); } catch (e) { console.log('请求arrayBuffer失败,用blob方式') blob = await new Response(readable).blob(); } let obj = { ssn: url } obj.blob = new Blob([blob]) const inputRequest = this.db .transaction([DB_STORE_NAME], "readwrite") .objectStore(DB_STORE_NAME) .add(obj); return new Promise((resolve, reject) => { inputRequest.onsuccess = function() { console.log('glb数据添加成功'); resolve(obj.blob); }; inputRequest.onerror = function(evt) { console.log('glb数据添加失败', evt); reject(); }; }); } initDataBase() { if (!window.indexedDB) { console.log("Your browser doesn't support a stable version of IndexedDB.") return; } let request = indexedDB.open(DB_NAME, DB_VERSION); return new Promise((resolve, reject) => { request.onerror = function () { console.log("error: create db error"); reject() }; request.onupgradeneeded = function (evt) { evt.currentTarget.result.createObjectStore( DB_STORE_NAME, {keyPath: 'ssn'}); }; request.onsuccess = function (evt) { console.log("onsuccess: create db success "); resolve(evt.target.result) }; }) } }
2、加载模型
let url = URL.createObjectURL(new Blob([blob]))
利用URL.createObjectURL把blob转成load可加载的url
import * as THREE from 'three/build/three.module.js'; import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; import {DBUtil} from "../util/DBUtil"; let model = new THREE.Group(); new DBUtil().get('/droc_model/changsharelease.glb',(progress) => { console.log(progress) }).then((blob) => { console.log('getModel获取成功', blob); let loader = new GLTFLoader(); let url = URL.createObjectURL(new Blob([blob])); loader.load(url, function (gltf) { model.add(gltf.scene); }, function ( xhr ) { console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' ); }) }) export { model }
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。