three js loading manager. how to create separate groups with separate callbacks? - three.js

Question

I have multiple groups of texture images (at different times) to load into a three js scene, and would like to get callbacks when each separate group is loaded. The groups may overlap in time.
If there was just one group, I could do this:
// FETCH BEADS NEEDED and rebuild display if needed. Return qty of beads requested
var manager = new THREE.LoadingManager( function() {
// this onLoad callback is executed when both textures are loaded
} );
var loader = new THREE.TextureLoader( manager );
var texture1 = loader.load( 'texture1.png' );
var texture2 = loader.load( 'texture2.png' );
This will work fine for the first group consisting of texture1.png and texture2.png. But now I have a separate group of texture3.png and texture4.png ...
What I need is two callbacks, one when texture1.png and texture2.png are both loaded, and a second callback when texture3 and texture4.png are loaded.
I could create a new TextureLoader for the second one, but in fact I will have many groups and don't want to have hundreds or thousands of TextureLoaders lying around and leaking memory.
Should I delete each one in its onLoad callback? Or what?
Thanks and best regards, jb

Answer 1

The loading manager has an .onLoad property where you can assign a callback for when its elements have finished loading. You can assign this at any time, it doesn't have to be set when initializing, so just re-assign it before you start loading a new group, and it should have the behavior you're looking for. You can read more about the .onLoad property in the docs:
var manager = new THREE.LoadingManager();
var texLoader = new THREE.TextureLoader(manager);
function loadGroup1() {
manager.onLoad = () => {
console.log("Group 1 complete");
};
texLoader.load("img1.png");
texLoader.load("img2.png");
}
function loadGroup2() {
manager.onLoad = () => {
console.log("Group 2 loaded");
};
texLoader.load("img3.png");
texLoader.load("img4.png");
}
function loadGroup3() {
manager.onLoad = () => {
console.log("Group 3 finished");
};
texLoader.load("img5.png");
texLoader.load("img6.png");
}
Just make sure the previous group has finished loading before starting the next group, otherwise you'll overwrite the onLoad function prematurely.
Edit
An alternative method that doesn't require staggering the loads:
var texLoader = new THREE.TextureLoader();
var loadTracker = [];
function loadTex(url, groupNo) {
// Start a new group if it doesn't exist
if (loadTracker[groupNo] === undefined) {
loadTracker[groupNo] = 1;
}
// Add 1 to group if it already exists
else {
loadTracker[groupNo] ++;
}
// Load texture
texLoader.load(url, () => {
// Subtract 1 from group when load is finished
loadTracker[groupNo] --;
// When count reaches 0, group has finished loading
if (loadTracker[groupNo] === 0) {
console.log("Group number " + groupNo + " has finished loading");
}
});
}
// Trigger loads with image URL, and group they belong to
loadTex("img1.png", 0);
loadTex("img2.png", 0);
loadTex("img3.png", 1);
loadTex("img4.png", 1);
loadTex("img5.png", 1);
loadTex("img6.png", 2);
// ...