проблема с загрузкой нескольких файлов OBJ в Three JS и установкой их позиций

Question

Я хочу загрузить несколько файлов OBJ и разместить их в определенных c позициях для механической сборки. Я могу сделать несколько фрагментов вроде

{
  const objLoader = new OBJLoader();
  objLoader.load('obj/'+'AA2.obj', function(object) { 
    object.traverse( function ( child ) {
       if ( child instanceof THREE.Mesh )
          child.material.color.setRGB (0.6,0.3,0.3); 
   });
  object.position.x=-1065.4;
  object.position.y=700.0;
  object.position.z=-937.1;
  scene.add( object );
  })
}

, и это отлично работает.

Но я хочу сделать это в al oop. Я использую массив:

const parts = [
  ['AA1',-1065.4,0.0,-937.1,0.6,0.3,0.3],
  ['AA2',-1065.4,700.0,-937.1,0.6,0.3,0.3],
  ['AB1',-225.0,0.0,-937.1,0.6,0.3,0.3],
  ['AB2',225.0,0.0,-937.1,0.6,0.3,0.3],
  ...
  ];

, а затем я l oop с:

for (var i = 0;i < parts.length; i++) {
    const objLoader = new OBJLoader();
    objLoader.load('obj/'+parts[i][0]+'.obj', function(object) {
      object.traverse( function ( child ) {
        if ( child instanceof THREE.Mesh )
          child.material.color.setRGB (parts[i][4], parts[i][5], parts[i][6]);
        });
      object.position.x=parts[i][1];
      object.position.y=parts[i][2];
      object.position.z=parts[i][3];
      scene.add( object );
    })         
  }

, и это не удается, потому что все объекты имеют одинаковый окончательный цвет, и все они устанавливается в положение 0.

В консоли нет сообщений об ошибках. Что я делаю не так? Это как-то связано с асинхронной загрузкой?

Спасибо,

Деннис

Answer 1

Проблема в том, что при вызове функции обратного вызова l oop уже завершил свою работу и установил последнее значение для i. Вот почему вы всегда видите один и тот же цвет. Ниже похожий пример. В качестве одного решения просто замените var на let

for (var i = 0; i < 10; i++) {
  setTimeout(() => console.log('var: ', i), 100)
}

for (let i = 0; i < 10; i++) {
  setTimeout(() => console.log('let: ', i), 100)
}