使用函数：javascript（three.js）中的.load（）后，如何防止对象被破坏

Question

I am trying to prevent the destroying of my object after I loaded 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);

The last statement is not possible, because the loaded mesh does not exist any more. Is there a way to rescue collada.scene?

Answer 1

The loader is asynchronous.

That means rescue.position.set() is being called before rescue is defined in the loader callback.

Just set the position in the callback, which you have done.

If you must refer to rescue later in your code, you can use this pattern

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

three.js r.75

Answer 2

You can try this:

var rescue; 
var manager = new THREE.LoadingManager();
manager.onProgress = function(item, loaded, total) {
    console.log(item, loaded, total);
};
manager.onLoad = function(){
       rescue.position.set(-20, 1, 25);
};
var loader = new THREE.ColladaLoader(manager);
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;
       rescue = collada.scene;
    }, function(xhr) {
        console.log((xhr.loaded / xhr.total * 100) + '% loaded');
});
}

Loading Manager provide you flexibility of the async manage loading so that later point you can have multiple files.

Answer 3

A really great thank goes here to Stallion and Westlangley for giving me the right hint with the asynchronous loading.

I found a solution here but I will reproduce it, too.

The solution is to create a normal THREE.Object3d() object. It is possible to add every object as a child of another. So I did the following:

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 flexibilty reasons I created a new function.