如何在VR背景上拥有可滚动的2d html元素?

Question

所以我正在寻找实现一个360图像作为已经存在的html文件的背景。我使用 z-index 将场景放在其他元素后面，但如果我这样做，这意味着即使我认为背景工作正常，我也无法滚动 2d 内容。

如果我使场景嵌入，这意味着我可以滚动内容，但场景不会加载。

有谁知道我如何实现这一点，或者可能使嵌入式场景全屏？

场景如下所示：

<a-scene embedded allowfullscreen="yes" allowvr="yes">
    <a-sky src="puydesancy.jpg" rotation="0 -130 0"></a-sky>
    <a-text font="kelsonsans" value="WELCOME TO WABIYOLAND" width="6" position="-2.5 0.25 -1.5" rotation="0 15 0"></a-text>
 </a-scene>

css 如下，html 没有背景：

a-scene embedded {
    z-index: -1;
    display: block;
    border: 0;
}
body {
    z-index: 1;
    position: relative;
    margin: 0;
    height: 100%;
}

应该注意的是，这是专门针对移动设备的，并且VR会受到设备运动的影响。

Answer 1

如果由于场景正在拦截事件而无法滚动站点，则可以在场景前面放置一个空的div。

.HTML

<div></div>
<a-scene>
  ...

.CSS

div {
   position: fixed;
   width: 100%;
   height: 100%
}

在这里查看。