如何使用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; 

});