如何使用 Three.js 预加载纹理？答案

【问题标题】：How can I preload textures with Three.js?如何使用 Three.js 预加载纹理？
【发布时间】：2013-08-03 10:57:29
【问题描述】：

我正在使用 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

【问题讨论】：

标签： three.js textures preloading

【解决方案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);
}

【讨论】：

【解决方案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;

});

【讨论】：