How to draw 2D UI in A-Frame at fixed position in the camera-view?

Question

I am using A-Frame to render AR contents in the web. I am testing the code in my smartphone's Google Chrome browser over local https server. I am trying to achieve the following:

Here, the whole screen is the camera-view of the real-world. Some texts and/or buttons are displayed at fixed location on the screen. Note that the texts/buttons stick to the camera, i.e., even if the camera-view changes, the elements will remain on the screen.

The first challenge I faced was making touch work. So right now I think my program can detect touch on any 3D a-frame entities. The second challenge that I am facing right now is making the design work. I came up with the following two options:

Go with basic HTML. I created DIVs -- one of the divs spanned the whole screen, which contained <a-scene>. The other divs would be the basic 2D elements using HTML. When I deployed the code I realized that the div containing <a-scene> actually took the whole screen when you click AR. Stuck!
I am now trying a-frame entities, such as using <a-plane> and show text. In order to fix any entity with the camera-view, the entities are put as a child to <a-camera>.
```
<a-camera position="0 0 0">
  <a-plane id="walls" position="2 0.5 -5" color="black" height="2" width="1"></a-plane>
</a-camera>
```

There are two problems with option 2. The first problem here is the position attribute. Its relative to the 0 0 0 position of the camera. So I am unsure how to position the entity at, for example, the bottom left corner of the screen. How do you define that in your a-frame code? It seems like a tedious process if you trial and error the position attribute here, but I am guessing that's not a good solution when the screen size changes. The second problem is touch interaction. I seem to have a temporary solution for that using this. But I found that sometimes touch on any part of the screen fires the event in AR mode, which is undesirable. Any better solution is appreciated.

How are people tackling this problem in a-frame? How do you design 2D elements at fixed location in a-frame within the camera-view. Thanks.

Avatazjoe Avatazjoe · Accepted Answer · 2020-12-17T19:50:54

As here was commented, you should place your gui as child of the camera in plain html.

Example

Tutorial

How to draw 2D UI in A-Frame at fixed position in the camera-view?

1 Answers