How to prohibit code execution before downloading?

Questions
1

I want the model and the code step by step

// Progress
function onProgress( xhr ) {

	if ( xhr.lengthComputable ) {

		const percentComplete = xhr.loaded / xhr.total * 100;
		console.log( Math.round( percentComplete, 2 ) + '% downloaded' );

	}

}

function onError() {

	const message = "Error loading model";
	console.log( message );

}




console.log('Start load')
const loader = new GCodeLoader();
loader.load( 'models/gcode/benchy.gcode', function ( object ) {

	object.position.set( - 100, - 20, 100 );
	scene.add( object );


}, onProgress , onError);
console.log('End load for mode l ')

loader.load( 'models/gcode/benchy.gcode', function ( object ) {

	object.position.set( - 100, - 20, 100 );
	scene.add( object );


}, onProgress , onError);


console.log('End load for mode 2 ')




console.log('Run animate')
const animate = function () {
	requestAnimationFrame( animate );
	renderer.render( scene, camera );
};

animate();

How do I do it right?
Desirable with an explanation.

2

If you want to load model 1 and then model 2 you have to start the loading process of model 2 in the onLoad() callback of model 1. So:

console.log('Start load')

const loader = new GCodeLoader();
loader.load( 'models/gcode/benchy.gcode', function ( model1 ) {

	model1 .position.set( - 100, - 20, 100 );
	scene.add( model1 );

	console.log('End load for model 1 ')

	loader.load( 'models/gcode/benchy.gcode', function ( model2 ) {

		model2 .position.set( - 100, - 20, 100 );
		scene.add( model2 );

		console.log('End load for model 2 ')

	}, onProgress , onError);

}, onProgress , onError);
3

It seems to me to use the callback function is not entirely convenient. Especially when you need to use it together with (if). Is it possible to prescribe code first and then a short string to change the order of execution of commands. I tried to use the await function but it does not work/

if(true){
	console.log('Start load')
	const loader = new GCodeLoader();
	loader.load( 'models/gcode/benchy.gcode', function ( object ) {
		object.position.set( - 100, - 20, 100 );
		scene.add( object );
	}, onProgress , onError);
	let result = await loader;
	console.log('End load for mode l ')
}

if(true){
	const loader2 = new GCodeLoader();
	loader2.load( 'models/gcode/benchy.gcode', function ( object ) {
		object.position.set( - 100, - 20, 100 );
		scene.add( object );
	}, onProgress , onError);
	let result2 = await loader2;
	console.log('End load for mode 2 ')
}

How much did not search on the Internet.
I did not find a normal answer.

4

You can’t use await with load(). Try it with loadAsync() which returns a promise.

5

loadAsync() is only for three.loader
And it only loads me a model without any material animation mouse and so on.
Is there a way(command).
What will stop the execution of code below until the previous one is executed.
Without use (pyramid of callback)
And what can be applied not only to Loader but also to other classes of code.
For example: Export, Material, Animation.

6

All loaders are derived from THREE.Loader so they can all use this method.

7

Here’s another idea:
Every time you finish a task, eg loading a model or a set of images, you can call a function (from inside loader) that will do 2 things:

  1. will add a number to a var that will represent the total number of tasks that have to be completed. You would know that you need eg 10 tasks to be completed, so the total sum should be 10.
  2. it will check whether the maximum required number (eg 10 ) has been reached.
    If that number has been reached, all your models, images and tasks have been loaded or completed, so it will call the main function of your code to be executed. It could also set a variable eg “allLoaded” and you can check that variable in the beginning of your render loop like so:
    if (allLoaded == false) return;
    So inside your render loop you won’t have to check for any other vars or models whether they have been undefined or loaded either.
8

Is creating your own custom events an option?

const event = new Event('myevent');

//Wait till a function finishes then... 

window.dispatchEvent(event)

//detect the event... 

window.addEventListener('myevent',function(){
//do stuff
}

Or maybe loading manager can be of use to you?