Why is my Enter VR button missing or misplaced in A-Frame?

Question

I am using A-Frame, but I cannot see the Enter VR button which is usually on the bottom right corner. Thus I cannot enter VR or fullscreen.

How can I make it show up?

Answer 1

If your scene is wrapped in a <div> then you may have to play with the styling your container. <a-scene> is position: relative by default. The canvas and the Enter VR button are position: absolute by default.

This is common if you are using React which requires a render container, or if you are using embedded scenes and putting that in a div.

Try setting the container styles position: absolute; height: 100%; width: 100%;.

Answer 2

Using React, I simply told the initial render to use document.body rather than to create a container/div element to hold my AFrameReact components in. This resolved the issue fine for me and the enter VR mode button became visible once again.

Full example: ReactDOM.render(<World />,document.body);