因此，我一直在弄乱三个和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 )
}
它运行良好，然后我决定在创建要预加载所有纹理的材质时不加载纹理，所以我做了一个小实用程序来做到这一点：
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）中运行此代码时，最终被记录的THREE.texture对象的image属性设置为“ undefined”，而src属性设置为“”。我不明白为什么会这样，并且没有更改.png或.jpg文件的任何路径，也没有更改我使用TextureLoader的文件的位置。
当我尝试从头开始运行代码的第一段时，也会发生该错误，现在我似乎无法将任何纹理加载到我的应用程序中。
对于理解为什么突然发生的任何帮助，将不胜感激。
编辑
我编辑了第一个代码块，以使问题更加清楚。我以前没有使用Promise或callbacks或任何种类的东西。我只是在调用场景初始化函数中的“ createSphere”函数和类似函数。过去效果很好，加载纹理我也没有问题。
现在，使用与以前相同的程序结构，第一个代码块将不起作用。
您没有正确调用它。TextureLoader.load()立即返回（带有一个空的，仍要填充的THREE.Texture对象……仅在请求完成时才填充），并且它不等待图像被加载。
相反，您可以在此处阅读其文档，可以为它提供回调方法，这些方法将在加载完成，完成或进行中时调用。
从文档中获取示例：
// 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' );
}
);
如果您要等待所有纹理加载完毕，那将变得更加复杂。一种方法是使用Promises，这是我之前给出的一个非常类似的问题的答案：有没有办法等待THREE.TextureLoader.load（）完成？
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句