Setting up start game button in AFrame

Question

So I'm working on a vr game for a school project. With aframe, you need to have a user interaction to enable sound on mobile device browsers. I am trying to create a button on the webpage that will act as the trigger and set the a-scene visibility to false. The problem is that the scene is still there just invisible and loading on top of the button so i can't press it.

I put the button in its own div and set the padding on top and bottom to 15px but that didn't work. I also tried to put the a-scene in it's own div but that didn't help

<body>

  <div  id="startButton"  
        style=" display: block;
                margin-left: 50%;
                margin-right: 50%;
                width: 100%;
                height: 100%;
                padding-top: 15px;
                padding-bottom: 15px">
    <button   onclick="startGame()">Start</button>
  </div>


    <a-scene  visible="true">


...

When I load the page up the button is present in the way i like it but i can't press it. It looks like the mouse is still set on the a-scene so anything underneath is untouchhable.

Edit: added more of the code.

try to provide the entire code or a jsfiddle with the entire example so that we can better understand what is going on — Julien

Piotr Adam Milewski Piotr Adam Milewski · Accepted Answer · 2019-04-23T13:02:48

Setting visible=false on the <a-scene> element won't make it dissapear. You'd be better off using the display property. Either:

1) Hide / show the <a-scene>
2) Create a div in front of the scene, and hide it when you want the experience to show up.

Check out nr. 2 in this fiddle.

Setting up start game button in AFrame

1 Answers