What steps can be taken to avoid the destruction of an object following its use of the .load() function in JavaScript (specifically in three.js)?

Question

What steps can be taken to avoid the destruction of an object following its use of the .load() function in JavaScript (specifically in three.js)?

I'm facing an issue with preventing the destruction of my object after loading it.

var loader = new THREE.ColladaLoader();
var rescue;
loader.load(
    'Improved_Person_Maker_better_quality.dae',
    function(collada) {
        scene.add(collada.scene);
        collada.scene.position.set(-25, 1, 25);
        collada.scene.rotation.x = -Math.PI / 2;
        rescue = collada.scene;
    },
    function(xhr) {
        console.log((xhr.loaded / xhr.total * 100) + '% loaded');
    }
);

rescue.position.set(-20, 1, 25);

Unfortunately, the last statement is not feasible as the loaded mesh no longer exists. Is there any way to rescue collada.scene?

javascript scope three.js

Answer 1

Answer №1

The loading process is performed asynchronously.

This indicates that rescue.position.set() is invoked before rescue is actually defined in the loader callback.

To resolve this issue, simply set the position within the callback function, as you have already done.

If you need to reference rescue later in your code, you can follow this approach

if (rescue !== undefined) {
    // your code here
}

Working with three.js version r.75

Answer 2

The loading process is performed asynchronously.

This indicates that rescue.position.set() is invoked before rescue is actually defined in the loader callback.

To resolve this issue, simply set the position within the callback function, as you have already done.

If you need to reference rescue later in your code, you can follow this approach

if (rescue !== undefined) {
    // your code here
}

Working with three.js version r.75

Answer 3

Answer №2

Give this a shot:

let saving; 
let handler = new THREE.LoadingManager();
handler.onProgress = function(item, progress, total) {
    console.log(item, progress, total);
};
handler.onLoad = function(){
       saving.position.set(-20, 1, 25);
};
let loader = new THREE.ColladaLoader(handler);
loader.options.convertUpAxis = true;

loader.load("<url path for the file>", function(collada) {
       scene.add(collada.scene);
       collada.scene.position.set(-25, 1, 25);
       collada.scene.rotation.x = -Math.PI / 2;
       saving = collada.scene;
    }, function(xhr) {
        console.log((xhr.loaded / xhr.total * 100) + '% loaded');
});
}

The Loading Manager allows for flexible asynchronous loading management, enabling you to handle multiple files at a later stage.

Answer 4

Give this a shot:

let saving; 
let handler = new THREE.LoadingManager();
handler.onProgress = function(item, progress, total) {
    console.log(item, progress, total);
};
handler.onLoad = function(){
       saving.position.set(-20, 1, 25);
};
let loader = new THREE.ColladaLoader(handler);
loader.options.convertUpAxis = true;

loader.load("<url path for the file>", function(collada) {
       scene.add(collada.scene);
       collada.scene.position.set(-25, 1, 25);
       collada.scene.rotation.x = -Math.PI / 2;
       saving = collada.scene;
    }, function(xhr) {
        console.log((xhr.loaded / xhr.total * 100) + '% loaded');
});
}

The Loading Manager allows for flexible asynchronous loading management, enabling you to handle multiple files at a later stage.

Answer 5

Answer №3

I want to extend a huge thank you to Stallion and Westlangley for guiding me in the right direction with asynchronous loading.

Although I came across a solution here, I feel it is necessary to reproduce it for others to benefit.

The key to resolving the issue lies in creating a standard THREE.Object3d() object and being able to include each object as a child of another. Following this approach, I executed the following steps:

loadObject: function(){
    var loader = new THREE.ColladaLoader();
    var container = new THREE.Object3D();
     loader.load(
'Improved_Person_Maker_better_quality.dae',
function ( collada ) {
    container.add(collada.scene);
},
function ( xhr ) {
    console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );

});
    return container;
}

For the sake of flexibility, I decided to create a new function for this purpose.

Answer 6

I want to extend a huge thank you to Stallion and Westlangley for guiding me in the right direction with asynchronous loading.

Although I came across a solution here, I feel it is necessary to reproduce it for others to benefit.

The key to resolving the issue lies in creating a standard THREE.Object3d() object and being able to include each object as a child of another. Following this approach, I executed the following steps:

loadObject: function(){
    var loader = new THREE.ColladaLoader();
    var container = new THREE.Object3D();
     loader.load(
'Improved_Person_Maker_better_quality.dae',
function ( collada ) {
    container.add(collada.scene);
},
function ( xhr ) {
    console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );

});
    return container;
}

For the sake of flexibility, I decided to create a new function for this purpose.

What steps can be taken to avoid the destruction of an object following its use of the .load() function in JavaScript (specifically in three.js)?

Answer №1

Answer №2

Answer №3

Similar questions

Dividing a string yields varying outcomes when stored in a variable compared to when it is displayed using console.log()

What is the best way to describe duplicate keys within a JSON array?

Concealing the rear navigation button within the material carousel

What is the best way to include message body in CDATA using strophe?

Guide to importing JavaScript in an npm package using TypeScript and JavaScript

Using JavaScript to dynamically insert HTML content and create a toggle effect

Automatically update the div every few seconds and pause when it has loaded successfully

What are the steps to integrate mailjet into my Vue application?

Modify content or display picture within accordion panel based on its identifier

Create a series of vertical lines using jQuery

Menu icon in Next.js/React/Tailwind not triggering close action when clicked again, causing responsiveness issue

Transform a Django/Python dictionary into a JavaScript dictionary using JSON

Iterate through the object received from the node promise and pass it to the subsequent .then method

Creating and deploying a basic Angular2 application in cordova

How can I use a JavaScript function to remove an element from a PHP array?

I have been working on incorporating a menu item in React, but I keep encountering an error

Steps for storing div content (image) on server

Transforming a jQuery menu into an active selection with Vue JS

Utilizing HTML data retrieved from an ajax request

Adding AngularJS data to JSON file for update