three.js - 如何使用 Three.js 预加载纹理？

Question

我正在使用 THREE.TextureLoader() 预加载纹理，但我似乎无法将它们分配给我的着色器。

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

在另一个函数中，我检查assetsLoaded以初始化我的场景：

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

但这会引发以下错误：

Uncaught TypeError: Cannot read property 'x' of undefined 

Answer 1

已经想通了！

原来 - 方法的回调函数load()将纹理作为参数。所以：

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

进一步：

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

Answer 2

可能是其他答案适用于旧版本，这就是我的工作方式

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;

});