Loading several items using identical function

Question

Loading several items using identical function

Seeking a way to efficiently load multiple models and access them outside the loader, I aim to adhere to the DRY (Don't Repeat Yourself) principle by creating a single function for loading and returning the object.

function loadObject(obj, mtl) {
            var loader = new THREE.OBJMTLLoader();
            return loader.load( obj, mtl, function ( object ) {
                return object;
            });
}

However, when I utilize this in the main function:

    var box = loadObject('box.obj', 'box.mtl');
    scene.add(box);

I encounter the following error:

THREE.Object3D.add: object not an instance of THREE.Object3D. undefined

javascript three.js

Answer 1

Answer №1

It appears that the issue lies in your loadObject function. The callback function passed to loader.load is invoked asynchronously, so box ends up being undefined since load doesn't return anything. To solve this, you should pass a callback function into loadObject like this:

function loadObject(obj, mtl, onSuccess) {
    var loader = new THREE.OBJMTLLoader();
    loader.load(obj, mtl, onSuccess);
}

var box = loadObject('box.obj', 'box.mtl', function(box) {
    // 1
    scene.add(box);
});

// 2
more code

Remember, with asynchronous methods and callbacks, the code after "2" may execute before the code under "1".

Answer 2

It appears that the issue lies in your loadObject function. The callback function passed to loader.load is invoked asynchronously, so box ends up being undefined since load doesn't return anything. To solve this, you should pass a callback function into loadObject like this:

function loadObject(obj, mtl, onSuccess) {
    var loader = new THREE.OBJMTLLoader();
    loader.load(obj, mtl, onSuccess);
}

var box = loadObject('box.obj', 'box.mtl', function(box) {
    // 1
    scene.add(box);
});

// 2
more code

Remember, with asynchronous methods and callbacks, the code after "2" may execute before the code under "1".

Loading several items using identical function

Answer №1

Similar questions

Tips for setting environmental variables to match ID values in html documents

Mongo: executing queries with both .find() and .update() methods sequentially

Can React components receive props or data when they are inserted into regular HTML code?

The functionality for the "OnChange" event in the <html:select> field does not seem to be functioning properly

Utilizing arrays in the label field of Chart.js

JavaScript code to make titles slide in as the user scrolls

Issue: $injector:unpr Angular Provider Not Recognized

How can I apply an underline effect when hovering over navigation links in a responsive menu?

How to create a responsive image that appears over a button when hovering in Bootstrap?

Adjusting the height of a DIV element to suit the window dimensions

Creating a Star Rating system with jQuery using a dropdown menu for multiple selections

When I test my jQuery scripts in jsfiddle, they run smoothly. However, they do not seem to work properly when I

Exploring the functionalities of using Script in Next.js 13

Tips for extracting data from a JSON file

What is the best way to align HTML inputs within a grid, whether it be done automatically or manually using JavaScript?

What is the reason for Vue not updating the component after the Pinia state is modified (when deleting an object from an Array)?

Adjust the canvas size to perfectly fit within the parent bootstrap cell in a grid layout

I am interested in incorporating my own icon.png as a clickable button in my React JS application

Tips on separating/callback functions based on earlier variables

What steps should I take to ensure axios is returning the appropriate buffer type?