在ThreeJS中加载几个OBJ文件并设置它们的位置时出现问题

Question

我想加载许多OBJ文件，并将它们放置在机械部件的特定位置。我可以做很多类似的片段

{
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 );
})
}

这很好用。

但我想做一个循环。我正在使用阵列：

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],
...
];

然后我循环：

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。

控制台中没有错误消息。我做错了什么？这个有吗与异步加载有关？

谢谢，

Dennis

Answer 1

问题是，在调用回调函数时，循环已经完成了它的工作，并设置了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)
}