three.js纹理加载器多张图片

Question

我有一个使用WebGL和Three.js的网站，注意到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()

- Eric

---

我认为这是一个常见的JS闭包问题！尝试创建一个函数来返回下一个项目。 - Neil

我现在有一个不太完美的解决方案，就是从tex.image.src中提取图像名称，但我认为这是一种相当愚蠢的方法。 - Eric

它们不能保证按顺序加载。 - Eric

如果你每次加载一个回调时都调用它，它们就会被执行。 - Neil

啊，现在我明白你的意思了。谢谢。 - Eric

Answer 1

如果您正在使用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);
    });  
}

- mika

Answer 2

尝试为它编写一个闭包函数，例如：

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

- Rohan Kumar