THREE.ImageUtils.loadTexture 循环不工作？

Question

我使用了 three.js 个例子中的代码，这在另一个位置工作得很好，没有循环。

一定是我遗漏了什么。这是我的第三次代码演绎，我仍然无法让它工作。
似乎回调触发得太早了，因为对象似乎是空的。

我目前遇到的错误是 "Uncaught TypeError: Cannot read property 'image' of undefined"...当然。

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() 重写为 return 函数（因此将 i 的每个传递值保存在闭包中），例如：

var callbackPainting = function(i) {

  return function() {

    var texture = texturePainting[i];
    ...

  }

};

THREE.ImageUtils.loadTexture 循环不工作？

THREE.ImageUtils.loadTexture in a loop not working?

javascript

three.js