如何用Three.js预加载纹理?

时间:2013-08-02 08:38:16

标签: three.js textures preloading

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

2 个答案:

答案 0 :(得分:2)

已经弄清楚了!

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

答案 1 :(得分: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;

});