如何将 HTML 个元素放置在 A-Frame 的顶部

Question

我正在尝试定位 HTML 元素以在 A 型框架顶部构建一个 UI，可以在桌面和移动设备上单击或触摸。

Answer 1

任何 HTML 元素都可以通过适当的样式覆盖在 A-Frame 之上。您至少需要设置 position: absolute; 和 z-index: 9999; 以便它呈现在顶部。下面是在 A-Frame canvas 上呈现的简单 <button> 示例：

.button {
  width: 200px;
  height: 100px;
  position: absolute;
  top: calc(50% - 300px);
  left: calc(50% - 50px);
  background-color: magenta;
  z-index: 9999;
  line-height: 100px;
  text-align: center;
  color: white;
}

Glitch with code illustrating

另一种方法是将 A-Frame 嵌入到 iframe 中，然后将 UI 置于其上。任何 CSS 定位技术都适用，但不在本答案的范围内。

如何将 HTML 个元素放置在 A-Frame 的顶部

How to position HTML elements on top of A-Frame

aframe