文章/答案/技术大牛

发布

社区首页 >问答首页 >A-框架VR中的HTML元素

问A-框架VR中的HTML元素
EN

Stack Overflow用户

提问于 2022-06-22 11:06:49

回答 1查看 172关注 0票数 1

我正在尝试创造一个使用A框架的虚拟现实体验。目前，我有一个虚拟现实按钮和退出按钮在屏幕上，两者都是通过HTML创建的(虚拟现实按钮由A帧本身添加)。

目前，当我进入虚拟现实，我不能退出，因为退出按钮消失，因为它似乎HTML是隐藏在A帧的VR模式。由于某种原因，这个按钮仍然出现在iOS上(不知道原因)。

是否有人知道如何使html和css元素包含在仍然以VR模式出现的？

html

css

aframe

virtual-reality

回答 1

Stack Overflow用户

发布于 2022-06-22 15:42:59

实际上，您可以尝试HTML嵌入组件，在这里您可以获得3D环境中的所有HTML元素。如果您想将HTML元素始终挂在相机上，您也可以这样做。这只是一个嵌入HTML按钮的示例代码，您可以使用CSS和所有其他样式。

<html>
  <head>
    <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
    <script src="https://unpkg.com/aframe-look-at-component@0.8.0/dist/aframe-look-at-component.min.js"></script>
    <script src="https://supereggbert.github.io/aframe-htmlembed-component/dist/build.js"></script>   
  </head>
  <body>
    <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="#ECECEC"></a-sky>
      <a-entity  position="0 1.6 -1" htmlembed look-at="[camera]">
        <button id="button"  onclick="console.log('leave button is clicked')">Leave</button>
    </a-entity>
    <a-entity position="0 0 0"  wasd-controls>    
        <a-entity  camera  position="0 2 0" look-controls  cursor="rayOrigin: mouse"></a-entity>
      </a-entity>
    </a-scene>
  </body>
</html>

HTML嵌入组件参考

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/72714406

复制

相似问题

问A-框架VR中的HTML元素
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问A-框架VR中的HTML元素EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问A-框架VR中的HTML元素
EN