将图像定位到用户方向360°

Question

我想建立一个VR应用程序，它取决于用户正在看的方向。

我的VR内容是基于基点的，所以如果用户向北看，也应该显示" north - content“。

我用来显示360°的图像，它应该定位在用户看起来的位置。

我的代码如下所示

<a-scene>
      <a-sky src="../../assets/img/puydesancy.jpg" rotation="0 -130 0"></a-sky>
      <a-text font="kelsonsans" value="Sightseeing" width="5" position="-0.75 1.0 -1.5" rotation="0 0 0"></a-text>
</a-scene>

图像是一个360°的球面全景图。

Answer 1

你需要制作一个组件，它将根据相机的旋转来处理环境：

AFRAME.registerComponent("rotationhandler", {
    tick: function() {
      var rotation = this.el.getAttribute("rotation");
      if (rotation.y > 0 && rotation.y < 90) {
        document.querySelector("a-sky").setAttribute("color", "red")
      } else {
        document.querySelector("a-sky").setAttribute("color", "blue")
      }
    }
})

因此，在tick上，我检查旋转，当角度正确时，我进行一些更改。只需在旋转上抛出一个模数，这样当有人超过0或旋转超过360时，它就不会变得愚蠢。

在this fiddle上查看它。

还有另一种方法，在相机上监听componentchanged，但在我看来这是一种滞后的方法。

现在，当进入VR模式时，旋转取决于陀螺仪的输出值。所以它会像你想要的那样对应于东北方向等。

​