三.TextureLoader没有加载图片文件答案

【问题标题】：Three.TextureLoader is not loading images files三.TextureLoader没有加载图片文件
【发布时间】：2016-06-03 03:01:36
【问题描述】：

所以我一直在搞乱 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 )
}

它工作得很好，然后我决定在创建我想预加载所有纹理的材质时不加载纹理，所以我做了一个小实用程序来做到这一点：

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 对象的图像属性设置为“未定义”，其 src 属性设置为“”。我不明白为什么会这样，而且我没有更改我的 .png 或 .jpg 文件的任何路径，也没有更改我使用 TextureLoader 的文件的位置。

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

如果能帮助您理解为什么会突然发生这种情况，我们将不胜感激。

编辑

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

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

【问题讨论】：

标签： javascript node.js google-chrome three.js

【解决方案1】：

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

相反，正如您可以在其文档 here 中阅读的那样，您可以使用回调方法来提供它，这些回调方法将在加载完成、完成或正在进行时调用。

以文档为例：

// 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，这是我之前给出的一个非常相似的问题的答案：Is there a way to wait for THREE.TextureLoader.load() to finish?

【讨论】：