Question

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

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 [＆＃39; images / c.png＆＃39;]，而不是正确循环并记住哪些＆＃34; i＆＃34;它应该使用的价值。

正确的结果应该是：

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

但我真正得到的是：

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

我知道它是因为＆＃34;我＆＃34;任何负载时变量总是最大值，但我不知道如何实现我想要的。

感谢。

--- ---编辑

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

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()

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

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]);
}

three.js textureloader多个图像

2 个答案: