BuildGui: the function is called before what i expected

Questions
1

Just a simple question. Here my sequence of calls:

  	init();
  	hdr_background();
  	gltf_loader();
  	animate();
  	buildGui();

but BuildGui start inside hdr_background() when i use RGBELoad() …

  		new RGBELoader()
  			.setDataType( THREE.UnsignedByteType )
  			.setPath( '../mustang/modelli3D/' )
  			.load( 'adams_place_bridge_2k.hdr', function ( texture ) {

  					var options = {
  						minFilter: texture.minFilter,
  						magFilter: texture.magFilter,
  					};

Do you know why buildgui is however called before my call?

2

RGBELoader.load() method is asynchronous, so JS engine goes on with the next tasks. Thats why buildGui() executes before the .load() callback.

3

Thanks , do you suggest something about how can “posticipate” the buildGui or waiting the end of this async function?

4

There are many options, and I can’t really tell whats the best for you, since I dont know what the exact problem/usecase is.
However if you only want to postpone buildGui() until loading is finished, then you could simply move the call from your current place to the finished callback, like so:

[code] 
new RGBELoader()
  			.setDataType( THREE.UnsignedByteType )
  			.setPath( '../mustang/modelli3D/' )
  			.load( 'adams_place_bridge_2k.hdr', function ( texture ) {

  					var options = {
  						minFilter: texture.minFilter,
  						magFilter: texture.magFilter,
  					};

                                        buildGui();
                                        ...
5

Yes, that’s can work … but suppose i have 2 or many others async functions in the whole code like RGBELoader … how can wait that all fuctions are terminated and call my GUI function?

6

I suppose that’s more of a general JavaScript question than Three.js, so I’d recommend looking up stack overflow or other forums on how to get the finish of many asynchronous functions.

I know it can probably be done with ES6 promises, but I lack experience in those to suggest a good solution. Maybe a more advanced JS developer here can help you :slight_smile:

7

@MatteoSacco
If you have several objects to load and want to wait till they all are loaded, then take a look at THREE.LoadingManager()

1 Like