[SOLVED] How to fire an event when loaded asset is visible?

Help & Support
1

Hi,
I load an asset using the script below on the entity for which it has to be loaded.
It fires an event when loading finisched. That works fine. But the asset is not yet visible. That takes some more seconds. Now I would like to fire an event when the asset is really visible.
How can I do that?

LoadGlbAsset.prototype.initialize = function() {

    utils.loadGlbContainerFromAsset(this.glbAsset, null, this.glbAsset.name, function (err, asset) {
        if (err) {
            console.error(err);
            return;
        } 
        var renderRootEntity = asset.resource.instantiateRenderEntity();
        this.entity.addChild(renderRootEntity);

        this.entity.fire('glbmodel:added', this.entity);

    }.bind(this));
};
2

Should be visible immediately at that point. Can you post a project that showcases the issue please?

Have you got auto render disabled in your project?

3

https://playcanvas.com/project/1024869/overview/eptcopy2

In Gui.js I wait for the event indicating that the asset is loaded. Then I want to do something after 1 second. But the alert pops up immediately after the model. And when setting the delay to 2000 ms, it is almost the same.

Where can I disable/enable auto render?

4

If you don’t know about it, you are don’t seem to be using it.

Looks like its a frame timing issue. The GLB load callback is fired after the rendering is done in the frame so it doesn’t ‘show’ until the next frame.

The easy fix here is to fire the event in the next ‘browser frame’ using a setTimeout with 0 time.

    utils.loadGlbContainerFromAsset(this.glbAsset, null, this.glbAsset.name, function (err, asset) {
        if (err) {
            console.error(err);
            return;
        } 
        var renderRootEntity = asset.resource.instantiateRenderEntity();
        this.entity.addChild(renderRootEntity);

        // Fire on the next browser frame
        setTimeout(function() {
            this.entity.fire('glbmodel:added', this.entity);
        }.bind(this));
    }.bind(this));

https://playcanvas.com/project/1024879/overview/f-eptcopy2

5

Yes, that works perfect!