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

Question

我是Three JS的新手

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

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

4 个 GLB 文件
2 个纹理文件
和 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

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

Three JS: get progress of multiple file load

javascript

loading

three.js

typescript

gltf