如何在A-Frame中在摄像机视图中的固定位置绘制2D UI？

问题描述

我正在使用A-Frame在网络上渲染AR内容。我正在通过本地https服务器在智能手机的Google Chrome浏览器中测试代码。我正在努力实现以下目标：

在这里，整个屏幕都是真实世界的摄像机视图。某些文本和/或按钮显示在屏幕上的固定位置。请注意，相机上的文字/按钮粘贴，即，即使相机视图发生变化，元素也会保留在屏幕上。

我面临的第一个挑战是触摸工作。因此，现在我认为我的程序可以检测到任何3D a帧实体上的触摸。我现在面临的第二个挑战是使设计工作。我提出了以下两种选择：

1. 使用基本HTML。我创建了DIV-其中一个div跨越了整个屏幕，其中包含<a-scene>。其他div将是使用HTML的基本2D元素。当我部署代码时，我意识到当您单击AR时，包含<a-scene>的div实际上占据了整个屏幕。卡住了！

2. 我现在正在尝试a框架实体，例如使用<a-plane>并显示文本。为了用摄影机视图固定任何实体，将实体作为子实体放置到<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>
   

选项2有两个问题。第一个问题是position属性。它相对于相机的0 0 0位置。因此，我不确定如何将实体放置在屏幕的左下角。您如何在A帧代码中定义它？如果您在此处尝试位置属性并尝试错误，这似乎是一个繁琐的过程，但是我想当屏幕尺寸改变时，这不是一个好的解决方案。第二个问题是触摸交互。对于this，我似乎有一个临时解决方案。但是我发现有时触摸屏幕的任何部分都会在AR模式下触发该事件，这是不希望的。任何更好的解决方案都值得赞赏。

人们如何在一个框架内解决这个问题？如何在摄像机视图内的a帧中的固定位置设计2D元素。谢谢。

解决方法

根据here的评论，您应将gui作为相机的子级放置在纯html中。

Example

Tutorial