[SOLVED] Uncaught TypeError: Cannot read property 'camera' of null

I’m getting this error, when going into two of my scenes, we have around 20 scenes, built in much the same way but two of them have started throwing this error. When I launch the scene from the editor directly, it doesn’t happen, but when I transition from the menu scene, it happens.

playcanvas-stable.dbg.js:20988 Uncaught TypeError: Cannot read property ‘camera’ of null
at Func.get (playcanvas-stable.dbg.js:20988)
_at Func.resetAspectRatio (playcanvas-stable.dbg.js:22068)
at Func.frameBegin (playcanvas-stable.dbg.js:22078)
at Application.render (playcanvas-stable.dbg.js:20507)
at playcanvas-stable.dbg.js:20823

The main issue is that I can’t debug the issue, because the stack trace only traces back to the render loop tick, I’ve been trying all sorts of things (even cleaning out the scene except for a few transitional things, and still no luck. I even tried to make a copy of a working and copying some of the entities over.

Any suggestions would be appreciated.

Are you deleting the camera when you change/load a scene?

No, but we do remove the old hierarchy, but we use the code snippet from the Changing scenes tutorial for that:

FlowManager.prototype.changeScenesExecute = function(id) {
    var oldHierarchy = this.app.root.findByName ('Root');
    this.loadScene (id, function (scope) {
        oldHierarchy.destroy ();
        console.log("~~~ Finished loading scene ~~~");
        window.flowManager.fire("sceneLoaded", id);
        //this.fire sometimes bugs out
    });
};

FlowManager.prototype.loadScene = function (id, callback) {
    var url = id  + ".json";
    window.currentScene = id;
    window.sceneSettings = {};
    
    this.app.loadSceneHierarchy(url, function (err, parent) {
        if (!err) {
            callback(parent, this);
        } else {
            console.error (err);
        }
    });
};

I did forget to say that when I debug the issue, it seems the ‘Camera’ entity exists, but when the internal playcanvas logic tries to access the .camera property, it throws the exception.

Is there anything in those two scenes that make it different from the rest? Are there any unique scripts?

Yes, we’ve narrowed it down somewhat, it seems that switching up which scene ID gets loaded on which menu button, is making a difference, so I’m investigating that, but that also means it’s not internal scene logic, but rather the way it’s loaded up.

Turns out our dynamic asset loading, was not actually waiting for all assets to load, before continuing to the next scene, and that caused the error to occur.

For reference, to get previously unloaded assets tagged with some tag:

 //Load up all assets tagged "assetTag"
    var assets = this.app.assets.findByTag("assetTag");
    var loadcount = 0;
    var assetsToLoad = assets.filter(function(elt){ return !elt.resource; });
    var assetcount = assetsToLoad.length;

var counter = function () 
        {
            loadcount++;
            if (loadcount >= assetcount) {
                //When all assets have been loaded, execute the scene change!
                this.changeScenesExecute("sceneID");
            }
        };
    
    for (var i = 0; i < assetsToLoad.length; i++)
    {
        assetsToLoad[i].once("load", counter, this);
        this.app.assets.load(assetsToLoad[i]);
    }
    
//If no assets were found, make sure the callback is called anyway
    if(assetsToLoad.length === 0)
    {
        counter.call(this);
    }
1 Like