Changing Scene HTML -> Uncaught TypeError: callback is not a function

Help & Support
1

Hi i have the following script to change a scene with a button in html

var Uilungime = pc.createScript('uilungime');

Uilungime.attributes.add('css', {type: 'asset', assetType:'css', title: 'CSS Asset'});
Uilungime.attributes.add('html', {type: 'asset', assetType:'html', title: 'HTML Asset'});

Uilungime.attributes.add("scene1", {type: "string", default: "0", title: "Scene ID to Load"});

// initialize code called once per entity
Uilungime.prototype.initialize = function(dt) {
    // create STYLE element
    var style = document.createElement('style');

    // append to head
    document.head.appendChild(style);
    style.innerHTML = this.css.resource || '';
    
    // Add the HTML
    this.div = document.createElement('div');
    this.div.classList.add('container');
    this.div.innerHTML = this.html.resource || '';
    
    // append to body
    // can be appended somewhere else
    // it is recommended to have some container element
    // to prevent iOS problems of overfloating elements off the screen
    document.body.appendChild(this.div);
    
    this.bindEvents();
};

// update code called every frame
Uilungime.prototype.bindEvents = function() {

    var self = this;
    // example
    //
    // get button element by class
    var button = this.div.querySelector('.button');
    var counter = this.div.querySelector('.counter');
    // if found
    if (button) {
        button.addEventListener('click', function() {
           self.loadScene(self.scene1);
        }
        );
    }

};

Uilungime.prototype.changeScenes = function(sceneId) {
    // Get a reference to the current root object
    var oldHierarchy = this.app.root.findByName ('Root');
    
    // Load the new scene. The scene ID is found by loading the scene in the editor and 
    // taking the number from the URL
    // e.g. If the URL when Scene 1 is loaded is: https://playcanvas.com/editor/scene/475211
    // The ID is the number on the end (475211)
    this.loadScene (sceneId, function () {
        // Once the new scene has been loaded, destroy the old one
        oldHierarchy.destroy ();
    });
};

Uilungime.prototype.loadScene = function (id, callback) {
    // Get the path to the scene
    var url = id  + ".json";
    
    // Load the scenes entity hierarchy
    this.app.loadSceneHierarchy(url, function (err, parent) {
        if (!err) {
            callback(parent);
        } else {
            console.error (err);
        }
    });
};

He work, but the problem is i got this error on new scene “Uncaught TypeError: callback is not a function” and the scene dont load correctly (Directional Lights are not, The settings on the scene I made on UI are not set etc.)

What can i do?

Thanks.

2

Hi @Daniel_B,

Your loadScene method expects a callback argument to be passed, but on line 43 you don’t pass any.

The easiest fix is to make that argument optional, use it only when it’s being provided:

Uilungime.prototype.loadScene = function (id, callback) {
    // Get the path to the scene
    var url = id  + ".json";
    
    // Load the scenes entity hierarchy
    this.app.loadSceneHierarchy(url, function (err, parent) {
        if (!err) {
            if(callback) callback(parent);
        } else {
            console.error (err);
        }
    });
};

For more on scene loading check this manual page: Loading Scenes | Learn PlayCanvas

2 Likes
3

Thank you very much @Leonidas !