javascript - three.js textureloader多个图像

因此，我有一个网站在带/ three.js的webgl中做一些事情，并且我注意到loadTexture即将消失，我可能应该改用TextureLoader。基本上，我想在代码开始执行任何代码之前预加载所有纹理。我正在考虑做以下类似的事情，这将允许我加载任意数量的图像，并将它们分配给可以在需要时调用的纹理对象。

var loadedtex = {}
var to_load = ['images/a.png','images/b.png','images/c.png']
var texture_loader = new THREE.TextureLoader();
for(var i=0;i<to_load.length;i++){
    texture_loader.load(to_load[i],function(tex){
        loadedtex[to_load[i]] = tex
    })
}

我可能缺少明显的东西，但无法完全正常工作。当我使用上面的代码时，loadedtex每次都会填满loadedtex ['images / c.png']，而不是正确地循环并记住它应该使用哪个“i”值。

正确的结果应该是这样的:

loadedtex['images/a.png'] = Three.Texture{}...
loadedtex['images/b.png'] = Three.Texture{}...
loadedtex['images/c.png'] = Three.Texture{}...

但我真正得到的是:

loadedtex['images/c.png'] = Three.Texture{}

我知道这是因为“i”变量在加载任何内容时始终是最大值，但是我不确定如何完成我想要的操作。

谢谢。

---编辑---

这就是我最终得到的。似乎运作良好。谢谢你的建议。

var loadedtex = {}
var textureloaded = 0
var to_load = ['images/a.png','images/b.png','images/c.png']
var texture_loader = new THREE.TextureLoader();
load_textures = function(){
    if (textureloaded == to_load.length){return}
    var texture = to_load[textureloaded]
    texture_loader.load(texture,function(tex){
        loadedtex[texture] = tex
        textureloaded += 1
        load_textures()
    })
}
load_textures()

最佳答案

如果您使用的是ES6:

let assets = [
    { name:'img1', url:'img/img1.png' },
    { name:'img2', url:'img/img2.png' },
    { name:'img3', url:'img/img3.png' },
];
this.textures = {};
for ( let img of assets ) {
     this.loader.load(img.url, ( texture ) => {
        this.textures[img.name] = texture;
        assets.splice( assets.indexOf(img), 1);
        if ( !assets.length ) {
            this.init()
        }
        console.log('[TextureLoader] Loaded %o', img.name);
    });
}