HTML - Change scenes

Help & Support
1

I have an interface for HTML, how to make a transition to a specific scene with this HTML button?

2

This sample will take you through on how to change scenes: https://developer.playcanvas.com/en/tutorials/changing-scenes/

The difference would be instead of a timer, there would be an onclick event listener on the HTML button to call the script’s scene load function.

3

thanks for the answer!

Something like that?

var ChangingScenes = pc.createScript('changingScenes');

ChangingScenes.attributes.add("sceneName", {type: "string", default: "", title: "Scene Name to Load"});

ChangingScenes.prototype.initialize = function(dt) {
    // Change scenes in 1 second
  
    
    var button = this.div.querySelector('.button');
    if (button) {
        // add event listener on `click`
        button.addEventListener('click', function() {
           self.loadScene(self.sceneName);
            
            console.log('button clicked');

            // try to find object and change its material diffuse color
            // just for fun purposes
            var obj = pc.app.root.findByName('chamferbox');
            if (obj && obj.model && obj.model.model) {
                var material = obj.model.model.meshInstances[0].material;
                if (material) {
                    material.diffuse.set(Math.random(), Math.random(), Math.random());
                    material.update();
                }
            }
        }, false);
    }

};


ChangingScenes.prototype.loadScene = function (sceneName) {
    // Get a reference to the scene's root object
    var oldHierarchy = this.app.root.findByName ('Root');
    
    // Get the path to the scene
    var scene = this.app.scenes.find(sceneName);
    
    // Load the scenes entity hierarchy
    this.app.scenes.loadSceneHierarchy(scene.url, function (err, parent) {
        if (!err) {
            oldHierarchy.destroy();
        } else {
            console.error(err);
        }
    });
};