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

【问题标题】：How to draw 2D UI in A-Frame at fixed position in the camera-view?如何在相机视图的固定位置在 A-Frame 中绘制 2D UI？
【发布时间】：2020-08-21 02:09:43
【问题描述】：

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

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

我面临的第一个挑战是让触控发挥作用。所以现在我认为我的程序可以检测到任何 3D a-frame 实体上的触摸。我现在面临的第二个挑战是让设计工作。我想出了以下两个选项：

使用基本的 HTML。我创建了 DIV——其中一个 div 跨越了整个屏幕，其中包含<a-scene>。其他 div 将是使用 HTML 的基本 2D 元素。当我部署代码时，我意识到当你点击 AR 时，包含<a-scene> 的 div 实际上占据了整个屏幕。卡住了！
我现在正在尝试使用框架实体，例如使用 <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-frame 代码中定义它？如果您在这里试错位置属性，这似乎是一个乏味的过程，但我猜当屏幕尺寸发生变化时，这不是一个好的解决方案。第二个问题是触摸交互。我似乎有一个使用this 的临时解决方案。但我发现有时触摸屏幕的任何部分都会在 AR 模式下触发事件，这是不可取的。感谢任何更好的解决方案。

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

【问题讨论】：

标签： javascript html touch aframe smartphone

【解决方案1】：

正如here 所评论的那样，您应该将您的 gui 作为相机的子元素放在纯 html 中。

Example

Tutorial

【讨论】：

我已经把它作为第二个选项的潜在解决方案。但这还不够，正如问题中提到的那样。您如何将 GUI 放在右下角并保持固定？你如何让它响应触摸交互（注意在屏幕的任何部分响应触摸都是不可取的）？
有什么解决办法吗？