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

Question

我正在尝试定位 HTML 元素以在 A-Frame 之上构建一个 UI，该 UI 可以在桌面和移动设备上单击或触摸。

Answer 1

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

.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
另一种方法是在 iframe 中嵌入 A-Frame 并将您的 UI 放在它上面。任何 CSS 定位技术都将适用，并且超出了本答案的范围。