Wait for object loader

Questions
21

This could mean a lot of things… There’s more than one type of transparency, and models from Sketchfab are usually pretty good but they sometimes don’t use a type of transparency that three.js supports. If you want glass-like reflections you’ll need environment maps. Probably worth opening a new thread (with as many details as you can share about the issue) if you can’t get it working.

22

Understood that it is sometimes preferred to allow the user to do other things while file loading is taking place. But I’m finding that with Async loading, as you all recommend, (1) I am not able to control the order in which a bunch of files get pulled in to memory . And (2) I am not able to ensure that certain other functions are called ONLY AFTER all files are fully loaded.

I need to achieve both (1) and (2)

Also, in my software, there isn’t anything useful the user can do till all loading is complete.

Therefore it seems synchronous loading would still be useful.

What would you say?

OLDMAN

23

You can - as long as you use a for-loop instead of forEach, you can wait for the promise to be resolved and recursively call next promise in order.

Similarly to above - call promisable functions in order recursively, and when there’s no more functions to call - execute the rest of your code. Just make sure you’re structuring your code well, and separate everything based on responsibilities, it’s quite easy to turn your code into an unpredictable quantum entangled spaghetti if you keep everything in w single file / method / function.

24

Even if there’s nothing the user could do, it’s unlikely there’s nothing your application could do while downloading a file. The application could, for example, download a second file at the same time, or parse a previously-downloaded file, which isn’t possible with the XMLHttpRequest synchronous APIs blocking all execution on the main thread.

25

Thanks for those answers. Since I am not familiar with this Promise thing, I have attached my relevant code snippet. Would appreciate your help in writing how it needs to be modified to ensure that the elements of componentArray complete loading into memory in the order indicated by the for loop


function vrmlLoaderDriver(componentArray ) {

	for (jj=0;jj<componentArray.length;jj++) {

		loadComponentVRML( componentArray[jj] );
	}
}



function loadComponentVRML( thisComponent ) {

	loaderVRML.load( './models/vrml/' + thisComponent + '.wrl', 
                                      function ( thisObject ) {
	
// whenever it completes, take thisObject and do whatever is necessary with it	

	},
	
	
	function ( xhr ) {
	
		console.log( ( xhr.loaded / xhr.total * 100 ) + "% loaded");
	},
	
	function ( error ) {
	
		console.log( "An error happened in the VRML loader");
	}
    );
}
26

I’m trying to find the loading function that is finally called in VRMLLoader.js

FileLoader.js and Loader.js are also in this picture and there’s some indirection going on - a bit confusing to me.

I’m thinking that whatever final loading function is used by VRMLLoader.js must be asynch. If not, why would I be witnessing the unpredictability in file load ordering in my application?

Can someone clarify?

OLDMAN

27

All HTTP requests made by three.js are asynchronous, but that doesn’t mean your onLoad callbacks need to run in non-deterministic order. Example:

const promises = componentArray.map(
  (name) => loaderVRML.loadAsync(`./models/vrml/${name}.wrl`)
);

const results = await Promise.all(promises);

for (const result of results) {
  // add result to scene
}