0

For exame, the enable vr mide button in the lower right hand corner. I need the buttons and text to appear and stay fixed to the screen when an event is triggered. Similar to how a canvas and button works in unity.

Andrew Vaughn
  • 7
  • 3

1 Answers1

1

Parent the buttons to the camera. Then they will stay locked to the camera. Move the buttons using the position component, and they will move in their local coordinate space. Parent/child relationships are created by nesting the entities, like this.

<a-scene>
  <a-box>
    <a-sphere></a-sphere>
    <a-light></a-light>
  </a-box>
</a-scene>
Thomas Williams
  • 842
  • 6
  • 13
  • problem is that the position fades off the screen on smaller devices. Any way to fix this? – Andrew Vaughn Nov 09 '19 at 00:36
  • I don't know of an out of the box tool for managing this, like Unity's canvas. The promlem is that you need to manage a 'screen space' that is in 3D space. You could play it safe, and place the UI object near the center of the camera view. Or you could detect if the object edge is out of the camera frustum and move it more to the center. Here is a tip for detecting whether a point is within the camera frustum. https://stackoverflow.com/questions/49902680/aframe-entity-is-seen – Thomas Williams Nov 09 '19 at 01:50
  • alternately, if the viewer is in vr mode, you could make a camera 'rig' , an entity that is the parent of the camera, and when movement occurs, move the rig, and the camera follows. Then you can parent your UI to the rig. This way the UI stays a fixed distance form the camera, but is not locked to screen space. The player can look at the UI (using a fusing reticle for interaction?), and then look away as needed. The UI becomes kind of like a wand in vive based games. – Thomas Williams Nov 09 '19 at 01:54
  • If it is not a VR experience, and you really want a UI that locks to screen space, you could make a UI out of html and javascript that sits on top of the 3d window. Using css `style="position:absolute; top:0px; left:0px; z-index:1000;"` you can force the html elements to sit above, then use javascript to manage the interactions. Doesn't work in vr because it is not in the 3d world. But you can manage to make it dynamically stay fixed in screen space. Here is a demo that shows how to use html elements as UI. https://glitch.com/~custom-quad – Thomas Williams Nov 09 '19 at 02:07
  • One way to make a UI that is out of the box, and resembles Unity's canvas UI system is DAT.GUI. It is not in 3d space (so does not work in VR), but it snaps perfectly to the edge of screen space and has many built in tools (sliders, buttons etc) and works very well with Aframe 3D properties. Here is a demo. https://glitch.com/~gui-aframe – Thomas Williams Nov 09 '19 at 02:21
  • And finally, this might be what you want, aframe-htmlembed-component. https://github.com/supereggbert/aframe-htmlembed-component – Thomas Williams Nov 09 '19 at 02:42
  • here is one more, aframe-jukebox, simpler version that the one above. https://github.com/EricEisaman/aframe-jukebox – Thomas Williams Nov 09 '19 at 03:10