title: How to draw 2D UI in A-Frame at fixed position in the camera-view?
body: <p>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:
  <a href="https://i.stack.imgur.com/4Zg8j.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4Zg8j.png" alt="enter image description here" /></a></p>
  <p>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 <em>stick</em> to the camera, i.e., even if the camera-view changes, the elements will remain on the screen.</p>
  <p>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:</p>
  <ol>
  <li><p>Go with basic HTML. I created DIVs -- one of the divs spanned the whole screen, which contained <code>&lt;a-scene&gt;</code>. The other divs would be the basic 2D elements using HTML. When I deployed the code I realized that the div containing <code>&lt;a-scene&gt;</code> actually took the whole screen when you click AR. Stuck!</p>
  </li>
  <li><p>I am now trying a-frame entities, such as using <code>&lt;a-plane&gt;</code> and show text. In order to fix any entity with the camera-view, the entities are put as a child to <code>&lt;a-camera&gt;</code>.</p>
  <pre><code>&lt;a-camera position=&quot;0 0 0&quot;&gt;
    &lt;a-plane id=&quot;walls&quot; position=&quot;2 0.5 -5&quot; color=&quot;black&quot; height=&quot;2&quot; width=&quot;1&quot;&gt;&lt;/a-plane&gt;
  &lt;/a-camera&gt;
  </code></pre>
  </li>
  </ol>
  <p>There are two problems with option 2. The first problem here is the <code>position</code> attribute. Its relative to the <code>0 0 0</code> 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 <a href="https://jsfiddle.net/gftruj/ev4hf4Lg/" rel="nofollow noreferrer">this</a>. 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.</p>
  <p>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.</p>