Threejs uses indexeddb cache to load GLB model

1、 Load tool class indexeddb.js

import axios from "axios";

const DB_NAME = 'railway-indexeddb-epublications_5';
const DB_VERSION = 4; // Use a long long for this value (don't use a float) const DB_STORE_NAME = 'model_glb'; //  Load database  function initDb() { 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) }; }) } //  Get the model  async function getModel(url, id) { let db = await initDb(); let getRequest = db .transaction([DB_STORE_NAME], "readwrite").objectStore(DB_STORE_NAME).get(id); return new Promise((resolve, reject) => { getRequest.onsuccess = function (event) { let modelFile = event.target.result; //  If you already have a cache   Use cache directly  if (modelFile) { resolve(modelFile.blob) } else { //  If there is no cache   Request new model deposit  inputModel(url, id).then((blob) => { resolve(blob) }).catch(() => { reject() }); } }; getRequest.onerror = function (event) { console.log('error', event) reject() } }) } //  Deposit model  async function inputModel(url, id) { let db = await initDb(); let modelResult = await axios.get(url, { responseType: 'blob', onDownloadProgress: (e) => { if (id == 1) { window.dispatchEvent(new CustomEvent('loadingProgress', { detail: (e.loaded * 100 / e.total).toFixed(2) })) } } }); if (modelResult.status == 200) { let obj = { ssn: id } obj.blob = new Blob([modelResult.data]) let inputRequest = db .transaction([DB_STORE_NAME], "readwrite") .objectStore(DB_STORE_NAME) .add(obj); return new Promise((resolve, reject) => { inputRequest.onsuccess = function () { console.log("glb Data added successfully "); resolve(obj.blob) }; inputRequest.onerror = function (evt) { console.log("glb Data addition failed ", evt);
                reject()
            };
        })
    }
}


export {
    
    getModel,
    inputModel
}

2、 Load model

let url = URL.createObjectURL(new Blob([blob])) utilize URL.createObjectURL hold blob Turn into load Loadable url

import * as THREE from 'three/build/three.module.js';
import {
     GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import {
    getModel} from "./indexeddb";

let model = new THREE.Group();

getModel('/droc_model/changsharelease.glb',1).then((blob) => { console.log('getModel To be successful ', 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
}