当我佩戴 VR 耳机时，我的 A-Frame 场景在相机后面渲染答案

【问题标题】：My A-Frame scene renders behind the camera when I wear a VR headset当我佩戴 VR 耳机时，我的 A-Frame 场景在相机后面渲染
【发布时间】：2019-10-17 11:55:18
【问题描述】：

我将 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 的三星 Galaxy S7 Edge）查看时，我看到绿色球体，但是当我在 VR 模式下从手机查看场景时，我看到红色球体（并且有转身，看着我身后）看到绿色球体。

发生了什么事？你看到同样的事情吗？我该如何解决这个问题？！？

【问题讨论】：

在你按下“进入 VR”之前，陀螺仪是否在旋转场景？
我在使用 Oculus Go 时遇到了同样的问题。我记得我花了很多时间寻找解决方案并实际找到了它，但不幸的是它并不总是有效。解决方案是务实地设置相机位置。您需要创建一个组（又名相机支架）将此相机放入此元素中，并将此元素（不是相机本身）移动到所需的距离。应该有帮助。
我了解到进入VR后相机是在旋转而不是改变位置
@PiotrAdamMilewski 正确！进入 VR 后相机正在旋转 - 它没有改变位置；在我进入 VR 模式之前，陀螺仪没有旋转场景。请注意，在我的手机（S7 Edge）上，场景似乎旋转了整整 180º，但在我妻子的手机（iPhone SE）上，场景似乎旋转了 ~90º；也就是说，她首先看到了绿色球体，但随后（进入 VR 模式后）她看到了红色球体，但不是直接在她面前（就像我一样），而是稍微偏离相机右侧。
@SenseiJames 你确定它没有根据陀螺仪读数调整旋转吗？总是 180 度 (S7) 和 90 度 (iPSE) 吗？

标签： aframe

【解决方案1】：

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

HTML (Angular 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 建议这个实现。团队合作让梦想成真！

【讨论】：