Javascript three.js textureloader多个图像

所以我有一个网站在webgl w/three.js中做了一些事情，我注意到loadTexture很快就会消失，我可能应该改用textureloaders。基本上，我希望在代码开始执行任何代码之前预加载所有纹理。我正在考虑做下面的事情，这将允许我加载任意数量的图像，并将它们指定给一个纹理对象，在需要时可以调用该对象

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['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);
    });  
}

---

试着为它做一个闭包函数，比如

for(var i=0;i<to_load.length;i++){
    (function(tl){
       texture_loader.load(tl,function(tex){
           loadedtex[tl] = tex
       })
    })(to_load[i]);
}

---

用于（var i=0；我认为这是一个常见的JS闭包问题！尝试创建一个函数来返回下一个项我现在有一个粗略的解决方案，就是从那里获取tex.image.src并解析出图像名称，但我认为这是一个非常愚蠢的方法。它们不能保证按顺序加载。如果你每次从回调调用它，它们都会被加载一次装完的时候啊，现在我明白你的意思了。谢谢。
for(var i=0;i<to_load.length;i++){
    (function(tl){
       texture_loader.load(tl,function(tex){
           loadedtex[tl] = tex
       })
    })(to_load[i]);
}