Question

我将A-Frame的hello world sample scene中的代码直接从其GitHub主页粘贴到了this CodePen。

当我在台式机上查看甚至在手机上查看时，场景看起来也不错。但是，当我在手机上查看并单击VR耳机按钮（右下角）时，整个场景都呈现在我身后！（好像z轴突然翻转了！）

Here is a CodePen以及一个更简单的示例：

<a-scene>
  <a-sphere position="0 1.25 -5" radius="1.25" color="green"></a-sphere>
  <a-sphere position="0 1.25 5" radius="1.25" color="red"></a-sphere>
</a-scene>

也就是说，绿色球体在镜头前5个单位，红色球体在镜头后5个单位。在常规模式下从台式机或手机（具有VR功能的Samsung Galaxy S7 Edge）上观看时，我看到绿色的球体，但是在VR模式下从手机中观看场景时，我看到的是红色球体（并且有转身，在我身后）看看绿色的球形。

这是怎么回事？你看到同一件事吗？以及我该如何解决这个问题？！

Answer 1

根本问题（如@PiotrAdamMilewski所建议的）是我的手机在进入VR模式时正在采用陀螺仪的方向。解决方案是，当用户戴上VR头戴式耳机时将摄像机对准场景-这样可以确保用户在开始体验VR时能够准确地看到您想要的位置。

HTML（角度8）：

<a-scene #scene>
 <!-- ... -->

  <a-entity #cameraParent>
    <a-entity camera look-controls pointerLockEnabled #camera>
    </a-entity>
  </a-entity>
</a-scene>

JavaScript（TypeScript）：

  @ViewChild('scene', { static : true }) scene;
  @ViewChild('cameraParent', { static : true }) cameraParent;
  @ViewChild('camera', { static : true }) camera;

  // ...

  this.scene.nativeElement.addEventListener('enter-vr', ()=> {
    const camera = this.camera.nativeElement;
    const cameraParent = this.cameraParent.nativeElement;
    cameraParent.object3D.rotation.x = -camera.object3D.rotation.x;
    cameraParent.object3D.rotation.y = -camera.object3D.rotation.y;
    cameraParent.object3D.rotation.z = -camera.object3D.rotation.z;
  });

请注意，相机被包装在一个容器中，并且我们旋转了相机的容器（旋转了相机角度），而不是旋转相机本身。支持@PiotrAdamMilewski帮助我确定根本原因，向@RomanMahotskyi提出建议此实现。团队合作使梦想成真！

戴上VR耳机后，我的A帧场景呈现在相机后面

1 个答案: