三JS：获取多文件加载进度

Question

我是三个 JS 的新手。

我在这里要做的是创建一个加载屏幕，该屏幕应显示场景所需资产的加载进度。

我有多种类型的资产（总共 7 个文件），例如-

1. 4 个 GLB 文件
2. 2 个纹理文件
3. 还有 1 个 Obj 文件

现在我可以从三个 JS 文档中加载如下文件（显然我需要根据文件类型使用不同的加载器）-

const gltfLoder: EThree.GLTFLoader = new Three.GLTFLoader(this.loadingManager);
            gltfLoder.load("/res/three/models/gltf/multiple/cat.glb", (glb: Three.GLTF) => {
                console.log("THREE >> GLB Loaded ", glb);
            }, (xhr: any) => {
console.log ("loading progress >> " + xhr.loaded);
}

这会给我单个文件的进度，有没有一个解决方案可以让我获得所有文件的加载进度？即 100% 的进度应该是所有 7 个文件都加载完毕。

提前致谢

Answer 1

LoadingManager 有 onProgress。例如

this.loadingManager.onProgress = function ( url, itemsLoaded, itemsTotal ) {
    console.log( 'Loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.' );
};

还有onStart、onLoad、onError。

LoadingManager reference