Three.TextureLoader不加载图像文件 [英] Three.TextureLoader is not loading images files
问题描述
var loader = new THREE.TextureLoader;
loader.crossOrigin ='';
函数createSphere（radius，segments，rings）{
var geometry = new THREE.SphereGeometry（radius，segments，rings）;
$ b var material = new THREE.MeshPhongMaterial（{
map：loader.load（'./ images / ...'），
bumpMap：loader。 load（'./ images / ...'），
ect ...
}）;
返回新的THREE.MESH（几何，材质）
}
它工作正常，然后我决定，当我创建要预加载所有纹理的材质时，不是加载纹理，而是制作一个小工具来完成此操作：
b$ b
var loader = new THREE.TextureLoader;
loader.crossOrigin ='';
var textureMap = {
earthTex：{file：'earth_no_ice_clouds.jpg'，消息：'加载全球土地大量'}，
earthBumpTex：{file： 'earth_bump.jpg'，消息：'加载全球深度'}，
earthSpecTex：{file：'earth_specular.png'，消息：'加载水'}，
earthCloudTex：{file：'earth_clouds。 png'，消息：'Loading Clouds'}，
earthCultureTex：{file：'earth_cultural.png'，消息：'Loading Country Borders'}，
earthLookUpTex：{file：'earth_lookup.jpg'，消息：'Loading Country Projections'}，
moonTex：{file：'moon.jpg'，消息：'加载Lunar Surface'}，
moonBumpTex：{file：'moon_bump.jpg'，消息： 'Loading Lunar Depth'}，
skyDomeTex：{file：'galaxy_3.png'，消息：'加载Galaxy'}
};
Object.size = function（obj）{
var size = 0，key;
for（key in obj）{
if（obj.hasOwnProperty（key））size ++;
}
返回大小;
}
函数loadTextures（）{
var path =./images/;
var size = Object.size（textureMap）;
var count = 0;
（texture map中的var key）{
var textureItem = textureMap [key];
var texture = loader.load（path + textureItem.file）;
console.log（texture）;
}
}
loadTextures（）;
每当我在浏览器（Chrome）中打开开发工具来运行这个时，THREE.texture对象最终被记录的图像属性设置为'undefined'，其src属性设置为。我不明白为什么会发生这种情况，并且我没有更改我的.png或.jpg文件的任何路径，也没有更改我使用TextureLoader的文件位置。
当我尝试运行代码的第一个代码片段时，错误也会发生，现在我似乎无法将任何纹理加载到我的应用程序中。
任何帮助理解突然发生的原因将不胜感激。
编辑
我编辑了第一个代码块，试图让我的问题更加清晰。我没有使用承诺或回调或之前的任何类型。我只是从我的场景初始化函数中调用了我的'createSphere'函数和类似的函数。它曾经工作得很好，我没有加载纹理的问题。
现在，使用与之前相同的程序结构，第一个代码块不起作用。
你没有正确地调用它。 TextureLoader.load（）立即返回（有一个空的，仍然要填充 THREE.Texture object ... it它只是在请求完成时填充），并且不会等待图像加载。
相反，正如您可以在其文档这里你可以用回调方法提供它，当加载完成，完成时，或者正在进行中。
以文档为例：
//实例化一个加载器
var loader = new THREE.TextureLoader（）;
//加载资源
loader.load（
//资源URL
'纹理/ land_ocean_ice_cloud_2048.jpg'，
//资源加载
函数（纹理）{
//用纹理做某事
var material = new THREE.MeshBasicMaterial（{
map：texture
}）;
}，
//下载过程中调用的函数
函数（xhr）{
console.log（（xhr.loaded / xhr.total * 100）+'％loaded'） ;
}，
//下载错误时调用的函数
函数（xhr）{
console.log（'发生错误'）;
}
）;
如果你想等待所有的纹理加载，这会变得更加复杂。一种方法是使用Promises，这是对我之前给出的非常类似的问题的回答：
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();
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.
EDIT
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.
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.
Taking the example from the documentation:
// 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' );
}
);
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?
这篇关于Three.TextureLoader不加载图像文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
