How to load in order?

HELLO! I have a question.

I want to load the following two loaders in order.
The hippocampus is smaller and seems to load first.

const loader1 = new STLLoader(manager);
const loader2 = new STLLoader(manager);
loader1.load(corticalUrl, onCorticalLoad, onProgress);
loader2.load(hippocampus, onHippoLoad, onProgress);

Is there a way?

Should I use the following code?

renderer.sortObjects = false;

Framework : React

You don’t need to make two STLLoader instances. Just reuse the same one. Then, to be sure you have both models available in time, use the callbacks on the manager instead of on the loader.

1 Like

If you want to load two meshes in order, it’s best to execute the second call of load() inside the onLoad() callback of the first one.


Yes, but why? It will potentially make the overall load time longer, so there must be a good reason to do so. When is loading order important? Can’t all the benefits be achieved by calling the init functions in the desired order from the loading manager callback?

Edit: If it is desired to get some models visible before all have been loaded, my solution will not apply, as it involves waiting until all are loaded before using any of them.

1 Like

Maybe it’s better to load all the resources/models first, and then add/make them visible/appear on the scene in the desired order.


thank you!
i will try it.:smiley:

Thank you for your good feedback.
I’ll try and say it again

1 Like

In order to load sequentially, the configuration is as follows: But it’s wrong.

function loadNextFile() {

        var index = 0;
        var files = [corticalUrl, hippocampus];

        if (index > files.length - 1) return;

        loader.load(files[index], function() {


          loader.load(files[index], onHippoLoad);  

It must be sequential(onCorticalLoad->onHippoLoad) and consequently both must be implemented simultaneously.
Is there anything wrong with this code?

@EliasHasle @Mugen87

here’s a piece of code I wrote for my needs, feel free to use it as well if you wish.

 * @param {Array<function(*):Promise>} factories
 * @param {Promise} [head] chain head, promise to be resolved before rest of the links
 * @param {[]} [parameters] parameters are passed into each factory
 * @returns {Promise}
function buildPromiseChain(
        head = Promise.resolve(),
        parameters = []
) {
    const numFactories = factories.length;

    let lastPromise = head;

    for (let i = 0; i < numFactories; i++) {
        const factory = factories[i];

        lastPromise = lastPromise.then(() => {
            const promise = factory.apply(null, parameters);

            assert.notEqual(promise, undefined, 'factory result is undefined');
            assert.notEqual(promise, null, 'factory result is null');

            assert.typeOf(promise, 'object', 'promise');
            assert.typeOf(promise.then, 'function', 'promise.then');

            return promise;

    return lastPromise;

factories is a parameter that contains an array of function that return a promise each, when invoked. Other two parameters are optional. You can cut asserts out.

You don’t call onCorticalLoad.

With some cleanup, you could just do:

loader.load(corticalUrl, function(model) {
  loader.load(hippocampus, onHippoLoad);  

instead of your code above.

1 Like

Thank you for your reply.

I really appreciate your comments.