如何使用 Google Cardboard 的按钮移动 A-Frame？

Question

我正在使用 A-Frame 编写 WebVR 应用程序。该应用程序主要是为 Cardboard 用户量身定制的。在桌面上，您可以简单地将wasd-controls 组件添加到相机，以便使用 WASD 移动。但是，我希望能够以相同的方式移动，只使用 Cardboard 按钮（即屏幕触摸），其中方向由相机的方向确定。有没有用 A-Frame 做这件事的简单方法？

Answer 1

正如您所指出的，wasd-controls 实际上只是为桌面键盘控制而设计的。我写了一个类似的universal-controls component，可以选择替换look-controls 和wasd-controls。使用此组件，按下纸板按钮将沿其朝向的方向移动相机：

<a-entity camera universal-controls></a-entity>

或者，您可以定义“检查点”，当用户注视它们时，传送相机。在许多情况下，这可能是更好的用户体验。 Demo 和 source。

  <!-- Player -->
  <a-entity camera="userHeight: 1.6"
            universal-controls="movementControls: checkpoint"
            checkpoint-controls="mode: teleport">
    <a-entity cursor
              position="0 0 -1"
              geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03;"
              material="color: #CCC; shader: flat;">
    </a-entity>
  </a-entity>

  <!-- Terrain -->
  <a-grid></a-grid>

  <!-- Checkpoints -->
  <a-entity position="1 0 1">
    <a-cylinder checkpoint="offset: 0 1.6 0" radius="1" height="0.1" position="0 0 -5.2" color="#39BB82"></a-cylinder>
    <a-cylinder checkpoint="offset: 0 1.6 0" radius="1" height="0.1" position="3 0 0" color="#39BB82"></a-cylinder>
    <a-cylinder checkpoint="offset: 0 1.6 0" radius="1" height="0.1" position="-3 0 0" color="#39BB82"></a-cylinder>
  </a-entity>

这两个选项都在 aframe-extras package 中实现，它向 A-Frame 添加了几个组件。