Just starting out with Three JS and I'm on a mission to create a loading screen that displays the progress of assets being loaded for a scene.
I have a total of 7 different types of assets, including:
- 4 GLB files
- 2 Texture files
- And 1 Obj file
According to the Three JS documentation, I know how to load each type of file using specific loaders. However, the challenge I'm facing is tracking the overall progress of all 7 files being loaded simultaneously.
const gltfLoader: EThree.GLTFLoader = new Three.GLTFLoader(this.loadingManager);
gltfLoader.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);
}
If there's a way to achieve a unified loading progress indicator that reaches 100% when all 7 files have finished loading, I would greatly appreciate it if someone could guide me in the right direction.
Thank you!