Why my texture's width and height always 4

Help & Support
1

I have loaded my texture from my server. but the width and height always equals 4.

2

my texutre’s width and height should be 512x512

3 
SwitchPicture.prototype.loadingTexture = function(url){
    var textures = [];
    var cubemap = new pc.Texture(this.app.graphicsDevice,{cubemap:true});
    var self = this;
    var times = {x:0};

    for(var i = 0; i < 6; i++){
        this.app.loader.getHandler("texture").crossOrigin = "anonymous";
        
        var asset = new pc.Asset("myTexture", "texture", {
            url: url[i]
        });
        this.app.assets.add(asset);
        asset.on("load",onimageloaded);
        this.app.assets.load(asset);
    }
    
    
    function onimageloaded(image){
        var index = textures.length;
        textures[index] = new pc.Texture(self.app.graphicsDevice,{width:512,height:512});
        textures[index].setSource(image);
        //var meshInstances = this.entity.model.meshInstances;
        //for(var i = 0; i < meshInstances.length; i++){
        //var mesh = meshInstances[i];
        //    console.log(mesh.material.emissiveMap);
        //mesh.material.emissiveMap = texture;
        //mesh.material.update();
        //}
        console.log(textures[index].width);
        times.x++;
        
    }
    
    var intervalId = setInterval(function(){
        if(times.x == 6){
            cubemap.setSource(textures.map(function(tex){
                return tex.getSource();
            }));
            console.log(cubemap);
            self.app.scene.skybox = cubemap;
            clearInterval(intervalId);
        }
    },100);
    
    
    
    //textures = [
    //         this.cubemap1,
    //         this.cubemap2,
    //         this.cubemap3,
    //         this.cubemap4,
    //         this.cubemap5,
    //         this.cubemap6];
    
   
};
4

Is url an array of URLs or just one?

5

thank you for reply. it’s an array.

6

Do you get any errors on this line?

        textures[index].setSource(image);

The asset load event passes a pc.Asset to the callback function, not the actual image data itself. The asset will also be referencing a pc.Texture already so you should be able to do something like this:

    function onimageloaded(asset){
        var index = textures.length;
        textures[index] = asset.resource;
        console.log(textures[index].width);
        times.x++;
    }

The github examples folder is good to work out how to load assets like this via engine only: https://github.com/playcanvas/engine/blob/master/examples/graphics/model-textured-box.html#L88

7

Thank you so much. I have solved this issues myself.

8

I have changed my code to `var textures = [];
var times = 0;
SwitchPicture.prototype.loadImage = function(url){
var image = new Image();
var self = this;
image.crossOrgin = “anonymous”;
image.onload = function(){
var index = textures.length;
textures[index] = new pc.Texture(self.app.graphicsDevice,{width:512,height:512});
textures[index].setSource(image);
times++;
};
image.src= url;

};

SwitchPicture.prototype.loadingTexture = function(urls){
textures = [];
var cubemap = new pc.Texture(this.app.graphicsDevice,{cubemap:true});
var self = this;

for(var i = 0; i < 6; i++){
   this.loadImage(urls[i]);
    //this.app.loader.getHandler("texture").crossOrigin = "anonymous";
    
    //var asset = new pc.Asset("myTexture", "texture", {
    //    url: url[i]
    //});
    //this.app.assets.add(asset);
    //asset.on("load",onimageloaded);
    //this.app.assets.load(asset);
}


var intervalId = setInterval(function(){
    if(times == 6){
        cubemap.setSource(textures.map(function(tex){
            return tex.getSource();
        }));
        console.log(cubemap);
        self.app.scene.skybox = cubemap;
        clearInterval(intervalId);
    }
},100);



//textures = [
//         this.cubemap1,
//         this.cubemap2,
//         this.cubemap3,
//         this.cubemap4,
//         this.cubemap5,
//         this.cubemap6];

};`
and problem solved!