Currently, I am attempting to create a loading screen with an HTML progress bar within Three.js. To achieve this, I am utilizing a THREE.LoadingManager() that I pass into my GLTFLoader. The issue arises when I attempt to utilize the onProgress method to track the loading progress of each model. Unfortunately, it only seems to update at the end when all assets are loaded, resulting in a sudden jump from 0% to 98%. I suspect this behavior may be related to my use of a wrapper function.
Below is the section of code in question:
let loadingManager = new THREE.LoadingManager();
loadingManager.onProgress = function(url, loaded, total){
document.getElementById('loading-progress').value = Math.round((loaded / total) * 100);
document.getElementById('loading-progress-label').innerHTML = `${Math.round((loaded / total) * 100)}%`;
}
let loader = new THREE.GLTFLoader(loadingManager);
function load(asset, pos=[0, 0, 0], rot=[-Math.PI / 2, Math.PI, Math.PI], scale=[5, 5, 5], appendTo){
loader.load(`Assets/${asset}.glb`, function(object){
object.scene.position.set(pos[0], pos[1], pos[2]);
object.scene.rotation.set(rot[0], rot[1], rot[2]);
object.scene.scale.set(scale[0], scale[1], scale[2]);
object.scene.name = asset;
scene.add(object.scene);
if(appendTo != undefined){
appendTo.push(object.scene);
}
});
};
//Decoration
load('platform_grass', [-5, 4, -0.5]);
load('platform_grass', [-2, 3, -0.5], undefined, [5, 10, 5]);
load('rock_largeA', [1, 3, -1], undefined, [2, 2, 2]);
load('plant_bushDetailed', [-5, 1, -1], undefined, [3, 3, 3]);
load('plant_bushDetailed', [-2, 6, -1], undefined, [3, 3, 3]);
At this point, I believe the root of the problem lies in my utilization of the load() function instead of manually loading each asset individually. Any insights or assistance on resolving this would be greatly appreciated.
Thank you!