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

2022-01-30 15:03:05 标签 aframe

我是一个新帧,并试图把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>

阅读全文

▼ 版权说明

相关文章也很精彩
推荐内容
更多标签
相关热门
全站排行
随便看看

错说 cuoshuo.com —— 程序员的报错记录

部分内容根据CC版权协议转载;网站内容仅供参考,生产环境使用务必查阅官方文档

辽ICP备19011660号-5

×

扫码关注公众号:职场神器
发送: 1
获取永久解锁本站全部文章的验证码