Is there a way to retrieve an object in Three.js without directly placing it in a scene? (FBXLoader)

Question

Is there a way to retrieve an object in Three.js without directly placing it in a scene? (FBXLoader)

When I invoke this JavaScript function, it successfully adds the object to the scene:

var loader = new THREE.FBXLoader();

function returnFBX(PATH, scene) {
    loader.load('obj/' + PATH + '.fbx', function (object) {
        scene.add(object);
    });
}

However, if I change:

scene.add(object);

to:

return object;

It appears to return undefined.

I attempted using Promises and the Loading Manager, but both only managed to add the object to the scene rather than returning it as expected.

The issue may stem from having two nested functions and the asynchronous nature of loading. Yet, I am unsure how to resolve this given that this is a common method for loading objects.

javascript function three.js

Answer 1

Answer №1

load operates asynchronously - you can utilize a callback function or employ await, like so:

const afterload = obj => { console.log(obj); }

function retrieveFBX(filePATH, scene) {
    loader.load('obj/' + filePATH + '.fbx', function (obj) {
        afterload(obj);
    });
}

alternatively

async function retrieveFBX(filePATH, scene) {
    return loader.load('obj/' + filePATH + '.fbx', function (object) {
        return object;
    });
}

let loadedObj = await retrieveFBX( ... )

Answer 2

load operates asynchronously - you can utilize a callback function or employ await, like so:

const afterload = obj => { console.log(obj); }

function retrieveFBX(filePATH, scene) {
    loader.load('obj/' + filePATH + '.fbx', function (obj) {
        afterload(obj);
    });
}

alternatively

async function retrieveFBX(filePATH, scene) {
    return loader.load('obj/' + filePATH + '.fbx', function (object) {
        return object;
    });
}

let loadedObj = await retrieveFBX( ... )

Answer 3

Answer №2

This is the method I used by utilizing loadAsync()

async function LoadModel (...) {
  const response = await loader.loadAsync(...);
  return response;
}

const modelInstance = await LoadModel(...);

See how you can appropriately handle object loading time: here

Answer 4

This is the method I used by utilizing loadAsync()

async function LoadModel (...) {
  const response = await loader.loadAsync(...);
  return response;
}

const modelInstance = await LoadModel(...);

See how you can appropriately handle object loading time: here

Is there a way to retrieve an object in Three.js without directly placing it in a scene? (FBXLoader)

Answer №1

Answer №2

Similar questions

SapUI5: Implementing a toggle functionality to display/hide one list item based on another list item's action

A guide on tapping into the creation event of an express session

Steps for embedding a font in a .pptx file

Validate the array with AJAX and display an error message

React: Updating a property in an array of objects causes properties to become undefined

What is the process for creating a local repository for Node.js npm?

What methods does Enzyme have for determining the visibility of components?

Discovering necessary information by iterating through JSON

Data not being saved when using the Post method in a Web API

What is the process for dynamically populating a select dropdown based on the selection made in another select dropdown?

The CSS styling for a pie chart does not seem to be functioning properly when using jQuery's

The GeoChart zoomOut button is not visible at this time

Unexpected panorama rendering using Three.js and canvas

Display a single specific outcome within a React component's list

What steps should I take to determine the value of a function when a specific x value is

Move the image inside the box without directly following the mouse cursor, but at a slightly faster pace

Having issues with array.push functionality in JavaScript

Numerous web worker asynchronous requests are being made, but not all are coming back

The value of innerHTML is currently "undefined"

Accessing and displaying all states in $stateProvider using AngularJS and ui-router