Three.js 结合 IndexedDB 缓存 GLB 模型及下载异常处理

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)
            };
        })
    }
}

let url = URL.createObjectURL(new Blob([blob])) 

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
}