threejs 纹理加载进度

我们在加载很多纹理的时候想知道纹理加载进度该怎么做呢？

1. 单张纹理图加载进度

// 导入材质方法
const textureLoader = new THREE.TextureLoader();
// 加载纹理
const imageTexture = textureLoader.load('xxx你的材质贴图',()=>{
    console.log("材质图片加载完成");
},(e)=>{
    console.log('图片加载进度',e);
});

2. 多张纹理加载进度，可以使用loadingManager加载管理器来管理

const manager = new THREE.LoadingManager();
manager.onStart =  ()=>{
     console.log('资源开始加载');
};
manager.onProgress = function ( url, num, total ) { 
    console.log( `加载资源地址: ${url} ,已完成资源数：${num} ,资源完成总数：${total}` ); 
}; 
manager.onLoad = function ( ) { 
    console.log( '加载完成'); 
};
// 导入材质方法
const textureLoader = new THREE.TextureLoader(manager);
const imageTexture = textureLoader.load('xxx你的材质贴图1');
const imageTexture2 = textureLoader.load('xxx你的材质贴图2');