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

问题描述

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

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

在另一个功能中，我检查assetsLoaded以初始化我的场景:

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

但这会引发以下错误:

Uncaught TypeError: Cannot read property 'x' of undefined

推荐答案

可能是较旧版本的另一个答案，这就是我的工作方式

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;

});

这篇关于如何使用Three.js预加载纹理?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！