我正在尝试制作一个预加载器,在加载最终可视化之前向查看器显示有用的信息。为此,我试图使用纹理加载器函数中的Three.js。下面是我的版本,下面是文档中的示例...不确定为什么这不起作用。
// add the earth
function addEarth(){
loadText.textContent = "Creating Earth";
var planetTexture = loader.load( "earthmap4k_optimized.jpg", function(){
var planetBump = loader.load( "earthbump4k_optimized.jpg" , function(){
var planetSpecular = loader.load( "earthspec4k_optimized.jpg", function(){
var earthTexture = new THREE.MeshPhongMaterial( {
map: planetTexture,
bumpMap: planetBump,
bumpScale: 0.5,
specularMap: planetSpecular
}),
earth = new THREE.Mesh(spGeo, earthTexture);
worldObj.add(earth);
scene.add(worldObj);
earthLoaded = true;
}, function(xhr){loadText.textContent = "Earth Specular Map "+ (xhr.loaded / xhr.total * 100) + "%"},
function(xhr){loadText.textContent = "Error Loading Earth Specular Map";});
}, function(xhr){loadText.textContent = "Earth Bump Map "+ (xhr.loaded / xhr.total * 100) + "%"},
function(xhr){loadText.textContent = "Error Loading Earth Bump Map";});
},
function(xhr){loadText.textContent = "Earth Texture Map "+ (xhr.loaded / xhr.total * 100) + "%"},
function(xhr){loadText.textContent = "Error Loading Earth Texture Map";});
}
这是文档中的示例
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' );
}
);