I am trying to create a VR experience using A-Frame. Currently I have a VR button and an Exit button on the screen, both are created through HTML (the vr button is added by A-Frame themselves).
Currently, when I go into VR I cannot exit, because the exit button disappears as it seems HTMLs are hidden by A-Frames' VR mode. For some reason, the button is still appearing on iOS (no idea why).
Does anyone know how to make html & css elements contained within a , still appear in VR mode?
Actually you can try HTML embed component where you can get all HTML elements in 3D environment. If you want to stick that HTML element always to camera you can do that as well. This is just a sample code to embed HTML button you can use CSS and all other styling as well.
<html>
<head>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-look-at-component@0.8.0/dist/aframe-look-at-component.min.js"></script>
<script src="https://supereggbert.github.io/aframe-htmlembed-component/dist/build.js"></script>
</head>
<body>
<a-scene>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
<a-entity position="0 1.6 -1" htmlembed look-at="[camera]">
<button id="button" onclick="console.log('leave button is clicked')">Leave</button>
</a-entity>
<a-entity position="0 0 0" wasd-controls>
<a-entity camera position="0 2 0" look-controls cursor="rayOrigin: mouse"></a-entity>
</a-entity>
</a-scene>
</body>
</html>