三.TextureLoader 不加载图片文件 [英] Three.TextureLoader is not loading images files

问题描述

所以我一直在搞乱三和节点，直到现在，我一直在使用 TextureLoader 类加载纹理，如下所示:

So I've been messing around with THREE and Node for a while, and up until now, I have been loading textures using the TextureLoader class as follows:

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

它工作正常，然后我决定在创建材质时不加载纹理，而是要预加载所有纹理，因此我制作了一个小实用程序来做到这一点:

It was working fine, and then I decided that instead of loading the textures when I created the material that I would like to pre-load all my textures, so I made a a small utility to do just that:

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 的文件的位置.

Whenever I run this in my browser (Chrome) with the developer tools open, the THREE.texture object that ends up being logged has its image property set to 'undefined' and its src property set to " ". I do not understand why this is happening, and I have not changed any of the paths for my .png or .jpg files nor the location of the file in which I am using my the TextureLoader.

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

When I try to run the first snippet of code up top, the error also occurs and now I cannot seem to load any textures into my application.

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

Any help in understanding why this has happened all of a sudden would be greatly appreciated.

编辑

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

I edited the first code block in an attempt to make my issue more clear. I wasn't using promises or callbacks or anything of the sort before. I was just calling my 'createSphere' function and similar functions from my scene initialization function. It used to work fine, and I had no problems loading textures.

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

Now, using the same program structure from before, the first code block doesn't work.

推荐答案

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

You're not calling it correctly. TextureLoader.load() returns immediately (with an empty, still to be populated THREE.Texture object ... it populates only when the request completes), and it doesn't wait for the image to be loaded.

相反，正如您在其文档此处中所读到的那样，您可以为它提供回调方法，这些方法将在加载完成、完成或正在进行时调用.

Instead, as you can read in its documentation here you can feed it with callback methods which will be called when loading is complete, finished, or in progress.

以文档中的示例为例:

// 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() 完成?

If you want to wait for all the textures to be loaded, that's going to get more complicated. One way is to use Promises, here is an answer to a very similar question I've given before: Is there a way to wait for THREE.TextureLoader.load() to finish?

这篇关于三.TextureLoader 不加载图片文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！