AFRAME - Overlay scene

Question

I am trying to understand how I could create an overlay menu on top of an A-FRAME scene.

This website illustrates really well what I am trying to do -> https://vr.with.in/

If you click on one of the tiles from the home menu, you will notice that the previous scene is put into background and additional information are put into foreground on top of a semi-transparent overlay.

It will be much appreciated if someone could take me in the right direction. Cheers.

Answer 1

When you click any item, a new entiy with the details is created closer to the camera.

At the same time, you create a sphere around the camera, which imitates "putting" into background:

<a-sphere id="overlay" radius="2" material="opacity:0.4; color: black; side: back"></a-sphere>

Check it out here .