How can I preload textures with Three.js?

问题:

I am using THREE.TextureLoader() to preload the textures, but I can't seem to assign them to my shaders.

var textureLoader = new THREE.TextureLoader();
textureLoader.load('img/texture.jpg', function(){
    assetsLoadedCount++;
});

In another function, I check assetsLoaded to initialize my scene:

if(assetsLoadedCount == totalAssetsCount)
{
    // Create a sphere:
    var sphere = new THREE.Mesh(
        new THREE.SphereGeometry(100, 10, 10),
        new THREE.MeshBasicMaterial({
            map: textureLoader
        })
    );
    scene.add(sphere);
}

But this throws the following error:

Uncaught TypeError: Cannot read property 'x' of undefined 

回答1:

Already figured it out!

Turns out the callback-function of the load()-method give the texture as a parameter. So:

var textureLoader = new THREE.TextureLoader();
textureLoader.load('img/texture.jpg', function(t){
    assetsLoadedCount++;
    loadedTexture = t;
});

further on:

if(assetsLoadedCount == totalAssetsCount)
{
    // Create a sphere:
    var sphere = new THREE.Mesh(
        new THREE.SphereGeometry(100, 10, 10),
        new THREE.MeshBasicMaterial({
            map: loadedTexture
        })
    );
    scene.add(sphere);
}

回答2:

May be the other answer worked on the older version, this is how I got it working

var textureLoader = new THREE.TextureLoader();
textureLoader.load(url);

// Add the event listener
textureLoader.addEventListener('load', function(event){

    // The actual texture is returned in the event.content
    sphere.material.map = event.content;

});