12

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?

ngokevin
  • 12,980
  • 2
  • 38
  • 84

2 Answers2

23

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%;.

ngokevin
  • 12,980
  • 2
  • 38
  • 84
  • @ngokevin - this is exactly the issue I had in vue.js and I'd already done this. But in A-Frame 0.7.1, setting the height of the container to 100% breaks the grab/move behavior on the desktop (even with pointer-events:none) and covers my view in the inspector. – TimHayes Nov 03 '17 at 19:13
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);

Rolley
  • 21
  • 1