Load images from URL

Help & Support
,
32

Render models and assets weren’t available during the last exchange in the thread.

Honestly confused by this one. I don’t use BasicMaterial myself but something is a bit odd.

Moving the line where the render material is assigned to the callback after the texture is loaded and assigned to the colorMap makes it work fine: https://playcanvas.com/project/947824/overview/f-debugging-image-loaded-from

Maybe @mvaligursky knows more.

All I did was go from:

var TextureFromUrl = pc.createScript('textureFromUrl');

TextureFromUrl.prototype.initialize = function() {

    // create and set material
    this.material = new pc.BasicMaterial();
    this.material.cull = pc.CULLFACE_NONE;
    //this.material.color.set(0.3, 0.6, 0.1);
    this.material.update();
    this.entity.render.material = this.material;

    var url = "https://dev3.freshfx.at/ffx/debug.jpg"; // uploaded here and CORS flags set properly
    this.loadTexture(url);
};

TextureFromUrl.prototype.loadTexture = function(url) 
{
    console.log("loading image from url", url);

    var asset = this.app.assets.loadFromUrl(url, 'texture', function (error, asset) {
        if (error) {
            console.log(error);
            return;
        }
        console.log("loaded texture", asset.resource);
        this.material.colorMap = asset.resource;
        this.material.update();
    }.bind(this));
};

to

var TextureFromUrl = pc.createScript('textureFromUrl');

TextureFromUrl.prototype.initialize = function() {

    // create and set material
    this.material = new pc.BasicMaterial();
    this.material.cull = pc.CULLFACE_NONE;
    //this.material.color.set(0.3, 0.6, 0.1);
    this.material.update();
   
    var url = "https://dev3.freshfx.at/ffx/debug.jpg"; // uploaded here and CORS flags set properly
    this.loadTexture(url);
};

TextureFromUrl.prototype.loadTexture = function(url) 
{
    console.log("loading image from url", url);

    var asset = this.app.assets.loadFromUrl(url, 'texture', function (error, asset) {
        if (error) {
            console.log(error);
            return;
        }
        console.log("loaded texture", asset.resource);
        this.material.colorMap = asset.resource;
        this.material.update();

        this.entity.render.material = this.material;
    }.bind(this));
};