Challenges with asynchronous problems related to importing models utilizing promises in conjunction with the three.js

Question

Challenges with asynchronous problems related to importing models utilizing promises in conjunction with the three.js

I'm currently struggling to resolve a promise in my script. The promise needs to be resolved when a function containing 3D file imports finishes importing, but I'm unsure how to make this happen.

Is there a way to receive a signal or data from the browser indicating that the model has finished loading so the promises can execute?

Below is the code snippet of the promise that should execute res() once generateContent() completes importing objects:

const myGeneralAsyncPromise = new Promise((res, rej) => {
    generateContent();
    if(some condition) res();
    // else rej();
});

myGeneralAsyncPromise.then(allIsReady, notReadyYet);

The following section invokes a class that creates various objects within generateContent():

var arrow3 = body(scene, world, 'static', 'arrow', { hx: 0.2, hy: 0.2, hz: 0.2 }, { x: 34.5, y: 3.35, z: 6 }, { x: 0, y: 11, z: 0 });
bodys.push(arrow3);

var phone = body(scene, world, 'static', 'phone', { hx: 1.3, hy: 1.3, hz: 1.3 }, { x: 35.35, y: 1.8, z: 6.5 }, { x: 0, y: 0, z: 0 });
bodys.push(phone);

var pencil = body(scene, world, 'static', 'pencil', { hx: 2, hy: 2, hz: 2 }, { x: 35.5, y: 1.8, z: 14 }, { x: 0, y: 11, z: 0 });
bodys.push(pencil);

The subsequent code block handles the actual import of each object:

function body(scene, world, bodyType, colliderType, dimension, translation, rotation) {
    new GLTFLoader_js_1.GLTFLoader().load(`src/models/${colliderType}.glb`, function (gltf) {
        var model = gltf.scene;
        collider = gltf.scene;
        model.scale.x = dimension.hx;
        model.scale.y = dimension.hy;
        model.scale.z = dimension.hz;
        
        // Additional processing for model here...

        scene.add(model);
    });
}

It's worth noting that generateContent() involves other time-consuming processes besides imports, with the import being the most time-consuming task.

To summarize, I need to implement a condition in my main promise that will trigger res() upon completion of the model loading process.

javascript promise three.js

Answer 1

Answer №1

It is recommended to create a commitment that will be fulfilled once the load callback is triggered. Essentially, you should convert .load() into a promise:

const promiseGLTFLoad = url =>
    new Promise(resolve => new GLTFLoader_js_1.GLTFLoader().load(url, resolve));

Using this function allows you to construct asynchronous processing like so:

async function body(scene, world, bodyType, colliderType, dimension, translation, rotation) {
    const gltf = await promiseGLTFLoad(`src/models/${colliderType}.glb`);
    var model = gltf.scene;
    collider = gltf.scene
    model.scale.x = dimension.hx
    /* ... etc ... */
    scene.add(model);

    var gltfAnimations = gltf.animations;
    var mixer = new THREE.AnimationMixer(model);
    var animationsMap = new Map();
    gltfAnimations.filter(a => a.name != 'TPose')
                  .forEach(a => animationsMap.set(a.name, mixer.clipAction(a)));
    // It is essential to return the result!!
    return animationsMap;
}

Next, when you invoke the body function --- presumably in generateContent: ensure that the function gathers the promises and then awaits them:

async function generateContent() {
    // ...
    var arrow3Promise = body(scene, world, 'static', 'arrow', { hx: 0.2, hy: 0.2, hz: 0.2 }, {  x: 34.5, y: 3.35, z: 6 }, { x: 0, y:11, z: 0});
    var phonePromise = body(scene, world, 'static', 'phone', { hx: 1.3, hy: 1.3, hz: 1.3 }, {  x: 35.35, y:1.8, z: 6.5 }, { x: 0, y:0, z: 0});
    var pencilPromise = body(scene, world, 'static', 'pencil', { hx: 2, hy: 2, hz: 2 }, {  x: 35.5, y:1.8, z: 14 }, { x: 0, y:11, z: 0});

    // Await resolution of all promises
    var bodys = await Promise.all(arrow3Promise, phonePromise, pencilPromise);
    // ... etc
    return bodys; // Could be needed by the caller??
}

Lastly, the primary execution code would appear as follows:

async function main() {
    const bodys = await generateContent();
    if (something seems wrong) throw new Error("my error");
    // ...
    return bodys; // Might be required by the caller??
}

main().then(allIsReady, failure);

You may not necessarily require that many layers. Instead, you can verify if something is wrong at the end of generateContent and raise an error there (resulting in a rejected promise). In turn, it simplifies to:

generateContent().then(allIsReady, failure);

Note that there is no concept of "notReadyYet." A promise either resolves or rejects. If it rejects, it must be considered a failure. There is no room for the sentiment of "not yet" here.

Answer 2

It is recommended to create a commitment that will be fulfilled once the load callback is triggered. Essentially, you should convert .load() into a promise:

const promiseGLTFLoad = url =>
    new Promise(resolve => new GLTFLoader_js_1.GLTFLoader().load(url, resolve));

Using this function allows you to construct asynchronous processing like so:

async function body(scene, world, bodyType, colliderType, dimension, translation, rotation) {
    const gltf = await promiseGLTFLoad(`src/models/${colliderType}.glb`);
    var model = gltf.scene;
    collider = gltf.scene
    model.scale.x = dimension.hx
    /* ... etc ... */
    scene.add(model);

    var gltfAnimations = gltf.animations;
    var mixer = new THREE.AnimationMixer(model);
    var animationsMap = new Map();
    gltfAnimations.filter(a => a.name != 'TPose')
                  .forEach(a => animationsMap.set(a.name, mixer.clipAction(a)));
    // It is essential to return the result!!
    return animationsMap;
}

Next, when you invoke the body function --- presumably in generateContent: ensure that the function gathers the promises and then awaits them:

async function generateContent() {
    // ...
    var arrow3Promise = body(scene, world, 'static', 'arrow', { hx: 0.2, hy: 0.2, hz: 0.2 }, {  x: 34.5, y: 3.35, z: 6 }, { x: 0, y:11, z: 0});
    var phonePromise = body(scene, world, 'static', 'phone', { hx: 1.3, hy: 1.3, hz: 1.3 }, {  x: 35.35, y:1.8, z: 6.5 }, { x: 0, y:0, z: 0});
    var pencilPromise = body(scene, world, 'static', 'pencil', { hx: 2, hy: 2, hz: 2 }, {  x: 35.5, y:1.8, z: 14 }, { x: 0, y:11, z: 0});

    // Await resolution of all promises
    var bodys = await Promise.all(arrow3Promise, phonePromise, pencilPromise);
    // ... etc
    return bodys; // Could be needed by the caller??
}

Lastly, the primary execution code would appear as follows:

async function main() {
    const bodys = await generateContent();
    if (something seems wrong) throw new Error("my error");
    // ...
    return bodys; // Might be required by the caller??
}

main().then(allIsReady, failure);

You may not necessarily require that many layers. Instead, you can verify if something is wrong at the end of generateContent and raise an error there (resulting in a rejected promise). In turn, it simplifies to:

generateContent().then(allIsReady, failure);

Note that there is no concept of "notReadyYet." A promise either resolves or rejects. If it rejects, it must be considered a failure. There is no room for the sentiment of "not yet" here.

Challenges with asynchronous problems related to importing models utilizing promises in conjunction with the three.js

Answer №1

Similar questions

Delay the v-alert display after an item is added to the array basket using setTimeout

Error encountered when utilizing a specialized jQuery extension: "not a function"

What is the best way to create a loop using JSON information?

Adjusting the height of a textarea within a table

AngularJS ng-map defines the view position using rectangular coordinates

Strategies for transmitting computed variables from a controller to JavaScript once the computation is complete?

Error in Javascript: Null Object

Having trouble installing the 'ws' npm package on MacOS Big Sur?

405 status code returned for CORS request

Ways to verify whether a vue instance is empty within a .vue file by utilizing the v-if directive

Internet Explorer IE 11 encounters an "Error: Object does not support property or method" issue

What is the best way to save website information in SQL Server?

Is it possible for jQuery to analyze HTML contained within a variable?

How can you assign a value to an HTML Input by dragging an SVG shape or canvas?

Difficulty encountered while connecting JSON data to a list using Angular JS

Why are XAxis categories appearing as undefined in tooltip when clicked?

The Angular Google Maps Module fails to initialize

Comparing JSON objects with JavaScript models: A guide

Alignment issue with Ul dropdown menus and shadow

Trigger a function from a Bootstrap modal