I attempt to use the OBJECT3D array

Question

I attempt to use the OBJECT3D array

As a beginner with Three.js, I am trying to add my 'model' object to an array. I believe my code is correct.
I have declared my variable as nextobj = [ ];.

function Loadobj() {
    var mx = [-1500,1500] , my = [350,350] , mz = [-1000,-1000];
    var nextobj = []; //Keeping Array Model

    for(var i = 0; i < 2; i++) { 
        var mtloader = new THREE.MTLLoader(); 
        mtloader.load('obj1/az-mp0076.mtl', function (materials) {
        materials.preload(); 
        var objloader = new THREE.OBJLoader();
        objloader.setMaterials( materials );
        objloader.load('obj1/az-mp0076.obj', function (object){ 
            model = object;
            model.position.set(mx[i],my[i],mz[i]);
            scen.add(model); 
            nextobj.push(model); 
            console.log(nextobj.length);  //Checking data in Object
            });
        });
    }
}

Step 1:
When I loop through 1 Object, it's displayed

https://i.sstatic.net/3ktGD.jpg

Step 2
When I loop through more than 1 object, it is not displayed, but my data is complete.

https://i.sstatic.net/IIZVv.png

How can I add my objects to the array? Thank you.
I am unsure of what might be wrong in my code.

javascript arrays three.js

Answer 1

Answer №1

Try implementing a recursive function when running the Loadobj method or transform it into a promise. In the for loop, there are two callbacks for loading materials and objects. The issue arises from the loop executing without waiting for each callback to complete loading, resulting in synchronous execution. However, the methods for loading materials/objects are asynchronous, with results only available inside the callback functions. To ensure fully loaded objects, manipulate the results of loading methods only after the callbacks have finished loading each item and then call Loadobj again once the previous execution is done.
Using a recursive function:

var mx = [-1500,1500], my = [350,350], mz = [-1000,-1000];
var nextobj = []; //Keep Array Model
var numOfObjs = 1;
var start = 0;
function Loadobj() {
  if (Loadobj == numOfObjs) return;
  start++;
  var mtloader = new THREE.MTLLoader(); 
  mtloader.load('obj1/az-mp0076.mtl', function (materials) {
    materials.preload(); 
    var objloader = new THREE.OBJLoader();
    objloader.setMaterials(materials);
    objloader.load('obj1/az-mp0076.obj', function (object) { 
      model = object;
      model.position.set(mx[start],my[start],mz[start]);
      scen.add(model); 
      nextobj.push(model);
      console.log(nextobj.length);
      Loadobj();
    });
  });
}

Another approach involves using Promises:

function Loadobj(obj) {
  return loadMaterials()
    .then(function(materials) {
      return loadObjs(materials, obj);
    })
    .catch(function(err) {
      console.log(err);
   });
}

function loadMaterials() {
  return new Promise(function(resolve, reject) {
    var mtloader = new THREE.MTLLoader(); 
    mtloader.load('obj1/az-mp0076.mtl', function(materials) {
      materials.preload(); 
      resolve(materials);
    });
  });  
}

function loadObjs(materials, obj) {
  return new Promise(function (resolve, reject) {
    var objloader = new THREE.OBJLoader();
    objloader.setMaterials(materials);
    objloader.load('obj1/az-mp0076.obj', function(object){ 
      var model = object;
      model.position.set(obj.mx, obj.my, obj.mz);
      // scene is available globally
      scene.add(model); 
      nextobj.push(model);
      resolve(model);
    });
  });
}

var objs = [
  {
    mx: -1500, 
    my: 350, 
    mz: -1000
  },
  {
    mx: 1500, 
    my: 350, 
    mz: -1000
  }
];

var nextobj = []; 

// use reduce to iterate over objs
objs.reduce(function(acc, obj) {
  return Loadobj(obj);
}, Promise.resolve());

Answer 2

Try implementing a recursive function when running the Loadobj method or transform it into a promise. In the for loop, there are two callbacks for loading materials and objects. The issue arises from the loop executing without waiting for each callback to complete loading, resulting in synchronous execution. However, the methods for loading materials/objects are asynchronous, with results only available inside the callback functions. To ensure fully loaded objects, manipulate the results of loading methods only after the callbacks have finished loading each item and then call Loadobj again once the previous execution is done.
Using a recursive function:

var mx = [-1500,1500], my = [350,350], mz = [-1000,-1000];
var nextobj = []; //Keep Array Model
var numOfObjs = 1;
var start = 0;
function Loadobj() {
  if (Loadobj == numOfObjs) return;
  start++;
  var mtloader = new THREE.MTLLoader(); 
  mtloader.load('obj1/az-mp0076.mtl', function (materials) {
    materials.preload(); 
    var objloader = new THREE.OBJLoader();
    objloader.setMaterials(materials);
    objloader.load('obj1/az-mp0076.obj', function (object) { 
      model = object;
      model.position.set(mx[start],my[start],mz[start]);
      scen.add(model); 
      nextobj.push(model);
      console.log(nextobj.length);
      Loadobj();
    });
  });
}

Another approach involves using Promises:

function Loadobj(obj) {
  return loadMaterials()
    .then(function(materials) {
      return loadObjs(materials, obj);
    })
    .catch(function(err) {
      console.log(err);
   });
}

function loadMaterials() {
  return new Promise(function(resolve, reject) {
    var mtloader = new THREE.MTLLoader(); 
    mtloader.load('obj1/az-mp0076.mtl', function(materials) {
      materials.preload(); 
      resolve(materials);
    });
  });  
}

function loadObjs(materials, obj) {
  return new Promise(function (resolve, reject) {
    var objloader = new THREE.OBJLoader();
    objloader.setMaterials(materials);
    objloader.load('obj1/az-mp0076.obj', function(object){ 
      var model = object;
      model.position.set(obj.mx, obj.my, obj.mz);
      // scene is available globally
      scene.add(model); 
      nextobj.push(model);
      resolve(model);
    });
  });
}

var objs = [
  {
    mx: -1500, 
    my: 350, 
    mz: -1000
  },
  {
    mx: 1500, 
    my: 350, 
    mz: -1000
  }
];

var nextobj = []; 

// use reduce to iterate over objs
objs.reduce(function(acc, obj) {
  return Loadobj(obj);
}, Promise.resolve());

I attempt to use the OBJECT3D array

Answer №1

Similar questions

My API is feeding data to the Material UI CardMedia image

Ensuring the absence of values in deconstructed variables within an object

"Enhancing Efficiency with Tagging and Contextual Autocomplete

The Importance of Strict Contextual Escaping in ReactJS

Tips for resolving the error message "TypeError: Cannot access property 'category' of undefined" while working in a React environment

Submitting quiz responses through a PHP based form

Error: Call stack limit reached while passing JSON data using Node.js

Video from Brightcove continues to play even after closing the modal dialog

utilizing an ajax request to clear the contents of the div

Customize your Google Translate experience by choosing your own option values

Obtain the form value upon submission without the need to reload the page

Toggling markers according to form selections is not functioning

Using Mongoose with Next.js to implement CRUD operations

Tips for correctly linking JS and CSS resources in Node.js/Express

When I utilize axios to send the request, the express routes for creating a new JSON entry in the mongo collection function correctly

Internet Explorer does not return results when using AJAX during the onchange event (specifically for IE only

Shader of the sea on a unique gltf model

The $scope in Angular doesn't seem to be working as expected in the callback function, despite using $scope

Purging a Collection

Email the jQuery variable to a recipient