javascript - 循环中的 THREE.ImageUtils.loadTexture 不起作用？

Question

我使用了 Three.js 示例中的代码，这在另一个位置运行得很好，无需处于循环中。

一定是我漏掉了一些东西。这是我的第三次代码演绎，但我仍然无法让它工作。
回调似乎触发得太早或其他什么原因，因为该对象似乎是空的。

我当前收到的错误是“未捕获的类型错误:无法读取未定义的属性“图像””...当然。

var images = 
[ '01.jpg',
  '02.jpg',
  '03.jpg',
  '04.jpg',
  '05.jpg'  ];

function loadImages(){

 var callbackPainting = function(i) {

    var texture = texturePainting[i];
    console.log(texture); // this returns "undefined"
    var image = texture.image;

    var geometry = new THREE.PlaneBufferGeometry( 100, 100 );
    var mesh = new THREE.Mesh( geometry, materialPainting[i] );

    addPainting( scene, mesh );

    function addPainting( zscene, zmesh ) {

      zmesh.scale.x = image.width / 100;
      zmesh.scale.y = image.height / 100;
      // I know this makes the images in the same location. Overlook
      zmesh.position.set(0,0,0);
      zscene.add( zmesh );

    }


  };
  var texturePainting = {}
  var materialPainting = {}
  for(i in images){
    image = "images/" + images[i];
    texturePainting[i] = THREE.ImageUtils.loadTexture( image, THREE.UVMapping, callbackPainting(i) );
    texturePainting[i].minFilter = THREE.LinearFilter;
    materialPainting[i] = new THREE.MeshBasicMaterial( { map: texturePainting[i] } );
  }

}

Answer 1

线路texturePainting[i] = THREE.ImageUtils.loadTexture( image, THREE.UVMapping, callbackPainting(i) );立即调用callbackPainting()有参数i .

重写callbackPainting()返回一个函数(因此将 i 的每个传递值保留在闭包中)，例如:

var callbackPainting = function(i) {

  return function() {

    var texture = texturePainting[i];
    ...

  }

};