How do you detect when a large asset has finished loading?

API reference :
https://developer.playcanvas.com/en/api/pc.Asset.html#ready

Example project:
https://launch.playcanvas.com/548562?debug=true

Code:
https://playcanvas.com/editor/code/502490?tabs=9005973

The problem is at LINE 42

—EDIT—
The finished solution (Run it in Chrome console):

function runThisInChromeConsole(){
    var URL = "https://dl.dropboxusercontent.com/u/357697/male.json";
    var modelAsset = new pc.Asset("human-model", "model", {
        url: URL
    });

   pc.app.assets.load( modelAsset );

    modelAsset.ready(function(){
        pc.app.assets.add(modelAsset);
        // Create the entity
        var testEntity = new pc.Entity('human-model');
        testEntity.addComponent('model');
        testEntity.model.asset = modelAsset;
        pc.app.root.addChild(testEntity);

        console.log('Asset loaded!');

        // Swop materials of object
        //var box = pc.app.root.findByName("Box");
        //human.model.meshInstances[0].material = box.model.meshInstances[0].material;

        var human = pc.app.root.findByName("human-model");
        var image = new Image();
        image.crossOrigin = "anonymous";// This is when loading cross origin
        image.src = "https://i.imgur.com/IbnzUdm.jpg";
        var texture = new pc.Texture();
        texture.setSource(image);

        (function loadTexture(){
            if(typeof(human.model.meshInstances[0].material) !== "undefined"){
                  var material = human.model.meshInstances[0].material;
               material.diffuseMap = texture;
               material.update();      
            }else{
                console.log("try again");
                loadTexture();
            }   
        })();
    });
}

—EDIT—

Hi @dirkus, to load an asset and detect when the resource is ready you must do something like this:

modelAsset.ready(function(asset){
   console.log('Asset loaded!');
});

this.app.assets.load( modelAsset );

Also I saw that you declare your function outside of the script declaration using:

function test(){} etc.

You would be better doing something like this:

LoadModel.prototype.test = function() {

    // then you would invoke the running PlayCanvas application instance like this:
    this.app.assets.load(modelAsset);
}; 

And you can call that method in your initialize or update method in this manner:

LoadModel.prototype.initialize = function() {

    this.test();
};

Hi … I forgot to mention that I am doing everything in an externally created GUI … so the examples I use are all run directly in Chrome Console to test (I will edit). I have no interest nor need to do things the “Playcanvas way”.

If you took that code and run it in console it works fine except of course when it hits line 42. The answer to everything.

I see, anyhow the script complains because you attach the ready method on an entity and not on an asset.

Attach it to the modelAsset and you would be good to go.

Although you want to do things in the Chrome console, all the solutions that you will get are the ‘PlayCanvas’ way and therefore the tutorials and docs all apply. The only thing that you are not doing is using the script component system.

Here is the updated external asset load project I did before with the callback for knowing when the model has finished loaded: https://playcanvas.com/editor/scene/547080

I’ve literally just copied the code from this tutorial and removed the this reference: https://developer.playcanvas.com/en/tutorials/loading-an-asset-at-runtime/

Edit: Ooo… Didn’t know there is a ready function. I update the project

Edit2: Done! That makes the code simpler!

@Leonidas … Thanks that helped me to get it working …

Run this function in chrome console to Load the model:
runThisInChromeConsole();

@yaustar Thanks for your helps also, as always it’s very much appreciated.