所以我一直在摆弄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对象的image属性设置为“undefined”,src属性设置为““。我不明白为什么会发生这种情况,我没有更改任何.png或.jpg文件的路径,也没有更改我使用TextureLoader的文件的位置。
当我试图运行第一段代码时,错误也发生了,现在我似乎无法将任何纹理加载到我的应用程序中。
如果能帮助我们理解为什么会突然发生这种情况,我们将不胜感激。
- 编辑 *
我编辑了第一个代码块,试图让我的问题更清楚。我没有使用承诺或回调或任何类似的东西之前。我只是调用我的'createSphere'函数和类似的函数从我的场景初始化函数。它曾经工作得很好,我没有问题加载纹理。
现在,使用与前面相同的程序结构,第一个代码块不起作用。
2条答案
按热度按时间6yjfywim1#
TextureLoader.load()
立即返回(带有一个空的、仍待填充的THREE.Texture
对象......它只在请求完成时填充),并且它不等待映像加载。相反,正如您在这里阅读的文档中所看到的,您可以向它提供回调方法,这些方法将在加载完成、结束或正在进行时调用。
以文档中的示例为例:
如果你想等待所有的纹理都被加载,那会变得更加复杂。一种方法是使用Promises,这里是我之前给过的一个非常相似的问题的答案:有没有办法等待THREE.TextureLoader.load()完成?
e4yzc0pl2#
我通过首先导入图像修复了它
这个导入是图像的url,并且在textureloader中使用该url来修复它