HTML - Change scenes

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

This sample will take you through on how to change 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.

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() {
            console.log('button clicked');

            // try to find object and change its material diffuse color
            // just for fun purposes
            var obj ='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());
        }, false);


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