如何添加2D叠加退出按钮时，用户进入VR在WebVR？

我是一个新帧，并试图把2D覆盖菜单退出VR模式时，用户进入VR模式。

我想要的与这里给出的krpano例子完全相同。

Krpano示例图片

我添加了一个实体并在上面写了代码。它工作，但我想在webVR的一种2D叠加。

欢迎任何帮助或建议。

我认为有两种方法:

使用常规HTML标记创建UI，并将其叠加到WebVR画布上。

在frame中创建你的UI元素，但是将它们父化到摄像机对象中，这样它们就不会移动。

下面是一个使用这两种技术的简单示例。我在HTML元素中应用了指针事件:none，以阻止它们妨碍鼠标与3D场景的交互，但如果你愿意，你可以让你的UI项目可点击。当你将UI项目创建为3D元素时，它们将响应你所喜欢的场景照明。然而，让他们对鼠标点击做出反应要困难得多。

.uiwrapper {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  pointer-events: none;
}
.uiblock {
  font-family: sans-serif;
  font-size: 4vmin;
  width: 10em;
  height: 1em;
  display: inline-block;
  color: #fff;
  background: rgba(0, 0, 100, 0.5);
  padding: 1em 2em;
  margin-top: 20vh;
}
.as-console-wrapper {
  /* ignore console warnings in snippet view */
  display: none !important;
}

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<a-scene>
  <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
  <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
  <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
  <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
  <a-sky color="#666"></a-sky>
  <a-entity light="type: directional; color: #FFF; intensity: 2" position="1 2 3"></a-entity>
  <a-camera position="0 1 0">
    <a-plane position="0 0 -.11" width=".1" height=".02" color="rgb(0, 0, 100)" opacity="0.5"></a-plane>
    <a-entity position="0 0 -.1" text="color: #fff; width: 0.16; align: center; value: Linked to camera"></a-entity>
  </a-camera>
</a-scene>
<div class="uiwrapper">
  <div class="uiblock">
    HTML overlay
  </div>
</div>
</div>