threejs loader模块封装 和 模型缓存 indexDB
Three.Js loader封装 和 indexDB缓存模型
支持各种格式（glb、gltf、fbx、obj、mtl）
indexDB 缓存 和列表形式加载
在three项目中需要加载很多的模型 而且在很多地方需要使用loader加载模型回调的gltf
上一个项目中遇到了 第一次不会也遇到好多坑 下面是我整理的封装
话不多说 直接上代码吧！（菜鸡程序媛 请指导qaq）
极简
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
const loader = new GLTFLoader();
export const loadStore = function(){
return new Promise((resolve, reject) => {
loader.load("./gltf/xxx.gltf", gltf => {
model.add(gltf.scene);
model.position.set(-40.5325,-30.1916,0)
resolve(gltf)
});
})
}
带清除模型的
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
const loader = new GLTFLoader();
let model = new THREE.Group();
export const loaderModel = function (path) {
return new Promise(resolve => {
loader.load(path, function (gltf) {
// 移除模型
if(model.children.length){
model.children.forEach(item=>{
model.remove(item)
})
}
model.add(gltf.scene);
resolve(gltf)
});
})
}
export { model };
终极版
-
可批量load
-
支持多种格式
-
支持indexDB 缓存
utils 中的方法 均为lodash 的方法
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js';
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader.js';
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js';
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js";
import utils from "utils";
import * as THREE from "three";
import DBUtils from "@/common/_/threejs/DBUtils";
var serverAddress = window.location.host; // 获取服务器地址
//params 为引入的模型地址或者地址集合 handleProgress 为 回调函数 用于计算加载进度
export default function loader(params, handleProgress) {
// 批量加载资源
// lodash 中的 isArray 方法
if (utils.isArray(params)) {
let funcarr = [];
let progressEvent = {
loaded: {},
total: {}
}
// lodash 中的 throttle 节流 方法
let update = utils.throttle(() => {
let loaded = 0, total = 0;
// lodash 中的 each 方法
utils.each(progressEvent.loaded, (v) => {
loaded += v;
});
utils.each(progressEvent.total, (v) => {
total += v;
});
// console.log(loaded, total);
handleProgress({
loaded,
total
})
}, 100);
let func = (i) => {
// console.log('func', progressEvent);
return (o) => {
progressEvent.loaded[i] = o.loaded;
progressEvent.total[i] = o.total;
update();
}
};
params.forEach((p, i) => {
funcarr.push(loader(p, func(i)))
});
return Promise.all(funcarr);
}
return new Promise(resolve => {
let path = params.path;
let ext = utils.getFileType(path);
let loader;
switch (ext) {
case 'glb':
case 'gltf':
if (params.decoderPath) {
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath(params.decoderPath);
loader = new GLTFLoader();
loader.setDRACOLoader(dracoLoader);
}
else {
loader = new GLTFLoader();
}
break;
case 'obj':
if (params.mtl) {
return new Promise(resolve => {
var mtlLoader = new MTLLoader();
// 初始化obj
var objLoader = new OBJLoader();
// 加载mtl文件
mtlLoader.load(params.mtl, (mtl) => {
// 初始化
mtl.preload();
// 加载贴图
objLoader.setMaterials(mtl);
objLoader.load(path, (obj) => {
resolve({ mtl, obj })
}, handleProgress);
})
});
}
else {
loader = new OBJLoader();
}
break;
case 'mtl':
loader = new MTLLoader();
break;
case "fbx":
loader = new FBXLoader();
break;
}
if (loader) {
if (//需要缓存的条件) {
const indexDB = new DBUtils("gltf", "shengwei");
// 此处拼 服务器地址
indexDB.get('http://'+serverAddress + '/' + path)
.then((blob) => {
path = URL.createObjectURL(new Blob([blob]));
loader.load(path, (res) => {
resolve(res);
}, handleProgress)
});
} else {
loader.load(path, (res) => {
resolve(res);
}, handleProgress)
}
}
});
}
DBUtils 缓存的代码
export default class DBUtils {
constructor(dbName, storeName, dbVersion = 1) {
this.dbName = dbName;
this.storeName = storeName;
this.dbVersion = dbVersion;
this.db = null;
}
async get(url) {
this.db = await this.initDataBase(this.dbName, this.storeName, this.dbVersion);
const request = this.db
.transaction([this.storeName], 'readwrite')
.objectStore(this.storeName)
.get(url);
return new Promise((resolve, reject) => {
request.onsuccess = evt => {
const modelFile = evt.target.result;
console.log(modelFile);
// 如果缓存中有，直接从缓存中获取
if (modelFile) {
console.log("使用缓存");
resolve(modelFile.blob);
} else {
console.log("请求资源");
// 如果缓存中没有，则请求资源
this.addData(url).then(blob => {
resolve(blob);
}).catch(() => {
reject();
});
}
};
request.onerror = evt => {
console.log('error', evt);
reject();
};
});
}
终极版使用
loader(option.load, (progressEvent) => {
this.percentage = +(progressEvent.loaded * 99 / progressEvent.total).toFixed(2);
}).then(res => {
this.loading = false;
this.init();
if (!this.on.load) {
console.error("option.on.load方法不存在");
}
else {
this.on.load(this, res);
}
});
