Utilizing JavaScript function parameters with the power of Three.js

Question

Utilizing JavaScript function parameters with the power of Three.js

My question involves an Object with 2 parameters - Obj3D and Name, and I am trying to load the object by its name:

function load3DObjectByName(obj, loader)
{
    loader.load(
        "resources/3D/meshes.dae",
        function(collada) {
            obj.Obj = collada.scene.getChildByName(obj.Name, true);
            window.alert(obj.Obj["name"]); // obj.Obj is not undefined
    }
    );
     window.alert(obj.Obj["name"]); // obj.Obj is undefined
}

Unfortunately, even after loading, obj.Obj remains undefined... where the loader used is ColladaLoader.

javascript three.js

Answer 1

Answer №1

When the function loader.load is asynchronous, it means that the object will not be immediately populated after the function call. To put it simply:

load3DObjectByName(obj, loader);
//obj might still be initializing.

To handle this situation, you can either use a promise or continue using CPS.

function load3DObjectByName(obj, loader)
{
    return new Promise(function(resolve) {
        loader.load(
            "resources/3D/meshes.dae",
            function(collada) {
                obj.Obj = collada.scene.getChildByName(obj.Name, true);
                resolve(obj);
            }
        );
    });
}

var prom = load3DObjectByName(obj, loader);
prom.then(function(obj){
    //Now you can use the fully populated obj here.
});

Answer 2

When the function loader.load is asynchronous, it means that the object will not be immediately populated after the function call. To put it simply:

load3DObjectByName(obj, loader);
//obj might still be initializing.

To handle this situation, you can either use a promise or continue using CPS.

function load3DObjectByName(obj, loader)
{
    return new Promise(function(resolve) {
        loader.load(
            "resources/3D/meshes.dae",
            function(collada) {
                obj.Obj = collada.scene.getChildByName(obj.Name, true);
                resolve(obj);
            }
        );
    });
}

var prom = load3DObjectByName(obj, loader);
prom.then(function(obj){
    //Now you can use the fully populated obj here.
});

Answer 3

Answer №2

In accordance with MinusFour's observation, it is crucial to note that loader.load operates asynchronously. Essentially, this implies that the code executes in the following sequence:

loader.load(..., youranonymousfunctionReference)
window.alert(...
// subsequently in event loop
youranonymousfunctionReference.

Consequently, when window.alert is triggered, the anonymous function has yet to be executed, resulting in an undefined value for Obj.

Answer 4

In accordance with MinusFour's observation, it is crucial to note that loader.load operates asynchronously. Essentially, this implies that the code executes in the following sequence:

loader.load(..., youranonymousfunctionReference)
window.alert(...
// subsequently in event loop
youranonymousfunctionReference.

Consequently, when window.alert is triggered, the anonymous function has yet to be executed, resulting in an undefined value for Obj.

Utilizing JavaScript function parameters with the power of Three.js

Answer №1

Answer №2

Similar questions

Loop through an array in JavaScript to create properties for an object

Over-extended Affix in Bootstrap 3.1.0

Creating a function to update data in a Node.js/MongoDB environment

TypeError thrown by Basic TypeScript Class

What could be causing a parse error and missing authorization token in an AJAX request?

Choose the specific selector following the current selector

How to hide the header on a specific page using Angular

How can a function work with an array of subarrays of objects without altering the original array?

Using Vuetify Select with Vuex getters

Learn how to dynamically assign a new ID and name to a cloned div element using jQuery based on the original element's ID

Steps for displaying a JSX component for every element in an array

Utilizing jQuery datepicker to extract data from a database and trigger an Alert: A tutorial

Corrupted file download after exporting Web API data to Excel

Updating the background image with Jquery is resulting in a distracting flicker effect

Steps for referencing a custom JavaScript file instead of the default one:

Updating the price in real-time using JavaScript or jQuery based on the selected option

What is preventing me from generating Face3 in my ThreeJS Typescript project

Converting an Array with Key-Value pairs to a JSON object using JavaScript

Error: Attempting to access property 'navigate' of an undefined variable is not allowed

The process of triggering an action after three mouse clicks