时间戳

首页 > 解决方案 > 如何使用 WebVR 和 A-Frame 跟踪控制器移动事件？

javascript - 如何使用 WebVR 和 A-Frame 跟踪控制器移动事件？

问题描述

我有一个使用 A-Frame 制作的 WebVR 页面，使用带有触摸控制器的 Oculus Rift。我有控制器的这些元素：

<a-entity oculus-touch-controls="hand: right" right-control-listener></a-entity>
<a-entity oculus-touch-controls="hand: left" left-control-listener></a-entity>
<a-entity laser-controls="hand: right" raycaster="objects: .clickable"></a-entity>

我想选择或抓住一个对象并在控制器移动时移动它。但我一直无法找到控制器移动的事件。Mousemove似乎不可用，即使mouseup和mousedown可用。

标签： javascriptaframevirtual-realitywebvroculus

解决方案

使用tick方法。如果要跟踪实体位置或旋转，请执行以下操作：

AFRAME.registerComponent('track', {
  init: function () {
     this.trackedEl = document.querySelector('#trackedEntity');
  },

  tick: function () {
     this.el.object3D.position.x = this.trackedEl.object3D.position.x;
  }
});

查看演示，其中红球跟踪相机的 x 位置（使用 wasd 键移动）。您可以为要跟踪的控制器实体使用适当的选择器来执行类似的操作。例如：document.querySelector('[laser-controls]');

推荐阅读