[SOLVED] Tutorial request HTML-CSS menu

Please can we have a tutorial on how to create a SIMPLE HTML/CSS menu that can be used to launch a scene using the scene ID. As a bonus it would be great to know how to include a small javascript file that will load and run AFTER the HTML/CSS files have rendered in the DOM.

I have tried to reverse engineer this project - https://playcanvas.com/project/354600/overview/htmlcss--live-updates
But not understanding it and when I try to duplicate the results in my scenes it just does not work.

Same problem here - http://developer.playcanvas.com/en/user-manual/assets/html/ — I don’t know if anyone else has this problem but I find the docs to be very hard to decipher. The new tutorials sections is really promising though! Step by step instructions are awesome!

This example is quite good but still a tiny bit complex - http://developer.playcanvas.com/en/tutorials/changing-scenes/ … and how to do this with HTML? .

And lastly I would have thought it would be possible to open a scene simply by running a few lines of code from inside Chrome developer tools…something like this- “WhateverTheNameOFTheAPP.prototype.loadLevel(“nameOfScene” || “SceneID”)” ; WhateverTheNameOFTheAPP.prototype.deystroyScene(“nameOfScene” || “SceneID”);

There has to be a simple way to create a html menu and then use that menu to fire off some javascript to load a scene or do anything else.


I’ve added the tutorial request for a HTML/CSS menu to our backlog of tutorials to add.

In the meantime, http://developer.playcanvas.com/en/tutorials/capturing-a-screenshot/ has a HTML button that when clicked, takes a screengrab. You should be able to combine this with the changing scene sample to do what you need.

In terms of the console, you can use


To load the scene. This won’t unload/destroy the existing scene though so you will have both scenes loaded. Again, look at the changing scenes example to see how it handles it.

1 Like

We have just added a HTML with CSS sample to the tutorials section: http://developer.playcanvas.com/en/tutorials/htmlcss-ui/

Hopefully that will help :slight_smile:

1 Like

Thanks, that did help a lot! The HTML/CSS side is working now somewhat but I still have 3 odd bugs when I switch between scenes.

My test project - https://playcanvas.com/editor/scene/480406/launch

  1. I get a null error very randomly after switching scenes back and forth 10-30 times
    on this function call - “pc.app.root.findByName(‘ModelViewer’).destroy();”
  2. Look at the ram on Chrome go up to 1gb if you switch scenes 30 or so times (I can reproduce this bug every time).
  3. I loose the event listener on my back button after 10 - 30 scene switches… or the z-index gets broken or something else … not sure yet.

There is still a few things that I can try and I have only spent 6 or so hours debugging it so will carry on with different methods tomorrow. I might try to not use the scene feature in PC and instead just hide and show the models when I need them. If you have any tips on hiding and showing the models it would be appreciated as I cannot find it in the api reference.

Loving playcanvas so far, despite its quirks! And very happy to see good + quick responses in the forum, it makes all the difference thank you so much.

To hide or show a model, either enable/disable the entity:

this.entity.enabled = true; // ...or false

API Ref for pc.Entity#enabled

Or enable/disable just the model component of an entity:

this.entity.model.enabled = true; // ...or false

API Ref for pc.Component#enabled

Generally the issue with the project is that when you load a scene hierarchy, it creates new entities and therefore new script components attached.

So for example, ui.js that is responsible for adding CSS and HTML to the document is being created every time the user goes back to the menu. This means that the same HTML is being added each time so you get this:

I’m not sure what is causing the RAM usage to go up so it be something I will look at.

Personally for as project like this, I would go with a single scene and hide/show the HTML menu and various models. It should be easier to manage as well.