Converting Three.js objects into arrays

Question

Converting Three.js objects into arrays

I am new to Three.js and I want to add my 'palmtree' object to an array. I believe my code is correct, but something seems off.

Here is the snippet of my code:

var objects = [];
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);
    });
});

After adding the palmtree object to the scene, I noticed that when I check objects.length, it returns 0. I'm not sure what I'm doing wrong.

If you have any suggestions on how to properly push the palmtree object to the objects array, please let me know. Thank you!

javascript arrays three.js

Answer 1

Answer №1

It seems like there is a fundamental concept missing here. Object loading happens asynchronously, so if you try to access objects.length outside of the callback function, it will likely be 0 because your palm tree has not finished loading yet.

Instead, try checking the length of objects inside the callback function 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
    });
});

With this approach, the output will be 1.

Therefore, the array length will only show 1 once the loading process is complete and the callback function has been executed.

Answer 2

It seems like there is a fundamental concept missing here. Object loading happens asynchronously, so if you try to access objects.length outside of the callback function, it will likely be 0 because your palm tree has not finished loading yet.

Instead, try checking the length of objects inside the callback function 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
    });
});

With this approach, the output will be 1.

Therefore, the array length will only show 1 once the loading process is complete and the callback function has been executed.

Converting Three.js objects into arrays

Answer №1

Similar questions

Real-time monitoring within a callback function in Angular 5

retrieve the information from a specific field within the store and store it in an array

When attempting to showcase array information in React, there seems to be an issue with the output

Divide the array of words into segments based on the maximum character limit

What is the process for applying a class in jQuery to empty HTML elements?

Discover how to retrieve the calculated percentage within CSS with the assistance of jQuery specifically designed for Webkit

Module-alias cannot be resolved by esm

JavaScript code to activate a text box when a checkbox is clicked

Parsing JSON Arrays in Swift results in a value of zero

JS/Apps Script: Passing object and its keys as function parameters

Enhancing Browser Experience: The correct method for dynamically adding an AngularJS controller through a Chrome Extension's Content

Develop interactive web applications using Typescript

Array volatility - ensuring memory coherence of the elements

Accessing index.html via file:// from Vue-cli template

Is there a way for me to obtain the present value of the chosen button in the list below?

Generate JSON dynamically using a foreach loop

Angular parent scope does not reflect changes when a directive updates the shared scope variable

Is it possible to assign variables inside an http call from a function in AngularJS?

Developing a Vue.js application with a universal variable

What is the best way to use jQuery to retrieve information from one child element in an XML API in order to locate another child