Three.TextureLoader不加载图像文件

所以我一直在搞乱THREE和Node，直到现在，我一直使用TextureLoader类加载纹理，如下所示：

var loader = new THREE.TextureLoader; loader.crossOrigin = ''; function createSphere ( radius , segments , rings ) { var geometry = new THREE.SphereGeometry(radius , segments , rings); var material = new THREE.MeshPhongMaterial({ map: loader.load('./images/...'), bumpMap: loader.load('./images/...'), ect... }); return new THREE.Mesh ( geometry, material ) } 

它工作正常，然后我决定，当我创build我想要预先加载所有纹理的材质时，不是加载纹理，所以我做了一个小工具来做到这一点：

 var loader = new THREE.TextureLoader; loader.crossOrigin = ''; var textureMap = { earthTex : {file : 'earth_no_ice_clouds.jpg', message : 'Loading Global Land Masses'}, earthBumpTex : {file : 'earth_bump.jpg', message : 'Loading Global Depth'}, earthSpecTex : {file : 'earth_specular.png', message : 'Loading Water'}, earthCloudTex : {file : 'earth_clouds.png', message : 'Loading Clouds'}, earthCultureTex : {file : 'earth_cultural.png', message :'Loading Country Borders'}, earthLookUpTex : {file : 'earth_lookup.jpg', message :'Loading Country Projections'}, moonTex : {file : 'moon.jpg', message :'Loading Lunar Surface'}, moonBumpTex : {file : 'moon_bump.jpg', message : 'Loading Lunar Depth'}, skyDomeTex : {file : 'galaxy_3.png', message : 'Loading Galaxy'} }; Object.size = function(obj) { var size = 0, key; for (key in obj) { if (obj.hasOwnProperty(key)) size++; } return size; } function loadTextures( ) { var path = "./images/"; var size = Object.size(textureMap); var count = 0; for(var key in textureMap) { var textureItem = textureMap[key]; var texture = loader.load(path + textureItem.file); console.log(texture); } } loadTextures(); 

每当我在开发工具打开的浏览器（Chrome）中运行这个工具时，最终被logging的THREE.texture对象的image属性设置为“undefined”，其src属性设置为“”。 我不明白为什么会发生这种情况，我没有改变我的.png或.jpg文件的path，也没有改变我使用TextureLoader的文件的位置。

当我尝试运行代码的第一个代码片段时，错误也出现了，现在我似乎无法加载任何纹理到我的应用程序。

任何帮助理解为什么突然发生这将不胜感激。

编辑

我编辑了第一个代码块，试图让我的问题更清楚。 我没有使用承诺或callback或之前的任何types。 我只是从我的场景初始化函数调用我的“createSphere”函数和类似的函数。 它曾经工作得很好，我没有加载纹理的问题。

现在，使用与之前相同的程序结构，第一个代码块不起作用。

Answer 1

你没有正确地调用它。 TextureLoader.load()立即返回（有一个空的，仍然要填充的THREE.Texture对象…它只填充请求完成时），它不会等待图像加载。

相反，正如你可以在这里阅读它的文档，你可以用callback方法来提供它，这些方法在加载完成，完成或正在进行时将被调用。

以文档中的示例为例：

 // instantiate a loader var loader = new THREE.TextureLoader(); // load a resource loader.load( // resource URL 'textures/land_ocean_ice_cloud_2048.jpg', // Function when resource is loaded function ( texture ) { // do something with the texture var material = new THREE.MeshBasicMaterial( { map: texture } ); }, // Function called when download progresses function ( xhr ) { console.log( (xhr.loaded / xhr.total * 100) + '% loaded' ); }, // Function called when download errors function ( xhr ) { console.log( 'An error happened' ); } ); 

如果你想等待所有的纹理加载，这将变得更加复杂。 一种方法是使用Promise，这里是我给出的一个非常类似的问题的答案： 有没有办法等待THREE.TextureLoader.load（）完成？