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