Hello,
I have coded this page displaying a gallery of ifc models : CNPA Stéréotomie
The code is available here : IFCjs-Stereotomie/index.js at bbb3924772f8f23b17cd1ab913b55372c172b366 · ENAC-CNPA/IFCjs-Stereotomie · GitHub
I have started from that example : three.js examples
Now I need the models to load one after the other (except for the first one which is special).
I have tried several solutions, including this one : javascript - Three.js load Multiple obj files one after another - Stack Overflow
Also tried to play with async/await, but I don’t catch it.
My idea would be to declare a count = 1, then increment it on each project loading which I would allow only when count === Number(project.id).
Could anyone help on this please?
I can see why you want models to lead one at a time, since loading them all at once is heavy on the CPU. However, the SO link you mentioned is pretty straightforward, really, and easy to understand: just make an array with your model (file) names, set an index variable to 0, and load your first (i.e. whose index is 0) model. At the end of your load function, which gets executed after the model successfully loaded, simply increment the index and recursively run the function again (but this time, obviously, for the following index), until the index is equal to the number of models in the array (at which point, you exit from the function).
Thanks for your answer!
I think the problem is that I have to declare for ( let project of projects ) {...} regarding the multiple element example. So they are all starting to load with thise same function.
So I would like to implement the recursive operation juste on the ifcLoader, making it wait that the index becomes equal to the project.id. Is that possible?
You don’t “have” to do anything, if it’s not dictated by necessity. You are the captain of the ship, not the machine.
I suppose you could do this using promises or any other similar sync vs async system as well, but then, you could simply get the IFC loading process (or even the entire if in case you need to do this for GLTFs too) outside the for that you mentioned and, as long as you refer to already existing scene children via scenes[propersceneindex].somesceneobject..., add the models independently afterwards using a recursive function similar to the SO one.
Bottom line, trying to turn a for into something that waits for some other lengthier process to finish is a bumpy road, you need to use the load callback either way. A for like that will execute in a blink of an eye, and by the time a single load process finishes, the for would have reached the maximum project.id since ages ago.
Other than that, this is more a Javascript question than a Three.js one. Structuring your code to match the desired outcome is needed whether it’s about a Three.js process or any other lengthier process like a XMLHttpRequest.