Three.js object to array

Question

I'm just beginner with Three.js. I would like to push my 'palmtree' object to an array. My code should be fine, I think..

I have my var objects = [];.

And inside the init:

var mtlLoader = new THREE.MTLLoader();
mtlLoader.load("objects/palmtree.mtl", function(materials) {
    materials.preload();
    var objLoader = new THREE.OBJLoader();
    objLoader.setMaterials(materials);
    objLoader.load("objects/palmtree.obj", function(palmtree) {
        palmtree.position.x = 205.12577753354344;
        palmtree.position.y = 2;
        palmtree.position.z = -600.0613083252872;
        palmtree.scale.x = 64;
        palmtree.scale.y = 64;
        palmtree.scale.z = 64;
        scene.add(palmtree);
        objects.push( palmtree );
    });
});

The result looks fine. I have my palmtree in the scene. But when I try objects.length I get 0.. I don't understand what is wrong.

How can I push my palmtree to the objects array? Many thanks.

Do you see the palmtree with all the adjustments you did (scaling and positioning)? — Normal
– Normal, Commented Jan 17, 2017 at 11:28
Yes. I checked the length outside the objLoader.load (see answer of Wilt). If I check the length inside the objLoader.load then I get 1 as result. I'm now trying to figure out how I can check the length outside the objLoader.load with the palmtree in it. — user7429559
– user7429559, Commented Jan 17, 2017 at 13:00

Wilt · Accepted Answer · 2017-01-17 11:30:34Z

2

I think your are missing something fundamental here. Object loading is an asynchronous process so if you call objects.length somewhere outside your callback method it will most likely return 0 for the array length since your palm tree has not been loaded yet.

But try once to check objects.length in the callback for example like this:

var mtlLoader = new THREE.MTLLoader();
mtlLoader.load("objects/palmtree.mtl", function(materials) {
    materials.preload();
    var objLoader = new THREE.OBJLoader();
    objLoader.setMaterials(materials);
    objLoader.load("objects/palmtree.obj", function(palmtree) {
        palmtree.position.x = 205.12577753354344;
        palmtree.position.y = 2;
        palmtree.position.z = -600.0613083252872;
        palmtree.scale.x = 64;
        palmtree.scale.y = 64;
        palmtree.scale.z = 64;
        scene.add(palmtree);
        objects.push( palmtree );
        console.log(objects.length); // <-- will output new length
    });
});

In this case it will output 1.

So the array length will only return 1 after your loading process has finished and the callback has been executed.

answered Jan 17, 2017 at 11:30

Wilt

44.9k15 gold badges163 silver badges216 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user7429559 Over a year ago

Thanks. This is really helpful. Now I have to figure out how I reach it from outside the load.

Wilt Over a year ago

@EmielSchumacher You can reach it the same way, the question is more about when you use this array. What do you want to do with this array?

user7429559 Over a year ago

I want to check if I click on an object in the onDocumentMouseDown function with raycaster.intersectObjects( objects ). That is why it needs to be in the array. :-)

Wilt Over a year ago

@EmielSchumacher it will be in the array after load is done, so you can use this code without problems.

Collectives™ on Stack Overflow

Three.js object to array

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related