Three.TextureLoader does not load image files

So, I worked with THREE and Node for a while, and so far I have downloaded 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 worked fine, and then I decided that instead of loading textures, when I created material that I would like to preload all my textures, so I made 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, , , "undefined", src "". , , .png .jpg , TextureLoader.

, , - .

, , .

, . promises - . "createSphere" . , .

, , .

+4
1

. 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()?

+3

Source: https://habr.com/ru/post/1629801/


All Articles