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" . , .
, , .