A-Frame 组件代码实现 —— thumbstick-moved：监听手柄摇杆事件

最新推荐文章于 2024-07-10 10:15:45 发布

MccccManchii

最新推荐文章于 2024-07-10 10:15:45 发布

阅读量1.1k

点赞数 35

分类专栏： A-Frame Components 文章标签： vr web javascript

本文链接：https://blog.csdn.net/AllenK_19/article/details/137057211

版权

A-Frame Components 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了如何在A-Frame框架中使用thumbstick-moved组件监听Oculus手柄的摇杆事件，通过更新实体位置响应不同方向的摇杆移动，提供了示例代码和组件配置方法。

摘要由CSDN通过智能技术生成

A-Frame Components

thumbstick-moved：监听手柄摇杆事件

通过 this.el.addEventListener(eventName,function) 监听手柄的摇杆事件，并更新其他 Entity
- 该函数内的监听事件采用 oculus 手柄的 event，详见：https://aframe.io/docs/1.5.0/components/oculus-touch-controls.html#events
- querySelector()方法详见：https://aframe.io/docs/1.5.0/introduction/javascript-events-dom-apis.html#with-queryselector

js 代码

// 监听手柄摇杆二维事件
AFRAME.registerComponent("thumbstick-moved", {
  schema: {
    // 默认摇杆移动距离为0.1m/次
    distance: { type: "number", default: 0.1 },
  },
  init: function () {
    // 避免在闭包内引用 this
    var self = this;
    // 增加事件监听器，当手柄摇杆方向发生变化时触发回调函数
    this.el.addEventListener("thumbstickmoved", function (evt) {
      // 存储当前对象的位置向量（三维）
      var vectors = self.boxEl.getAttribute("position");
      // 判断摇杆的变化位置，并更新实体的位置
      if (evt.detail.y > 0.95) {
        console.log("DOWN");
        self.boxEl.setAttribute("position", {
          x: vectors.x,
          y: vectors.y - self.data.distance,
          z: vectors.z,
        });
      }
      if (evt.detail.y < -0.95) {
        console.log("UP");
        self.boxEl.setAttribute("position", {
          x: vectors.x,
          y: vectors.y + self.data.distance,
          z: vectors.z,
        });
      }
      if (evt.detail.x < -0.95) {
        console.log("LEFT");
        self.boxEl.setAttribute("position", {
          x: vectors.x - self.data.distance,
          y: vectors.y,
          z: vectors.z,
        });
      }
      if (evt.detail.x > 0.95) {
        console.log("RIGHT");
        self.boxEl.setAttribute("position", {
          x: vectors.x + self.data.distance,
          y: vectors.y,
          z: vectors.z,
        });
      }
    });
  },
  update: function () {
    // 指定要监听的实体，该代码指定监听当前场景下的a-box实体
    this.boxEl = this.el.sceneEl.querySelector("a-box");
  },
});

html 代码

<a-scene>
  <a-entity
    id="leftHand"
    oculus-touch-controls="hand: left"
    thumbstick-moved="distance:0.1"
  ></a-entity>
  <a-entity
    id="rightHand"
    oculus-touch-controls="hand: right"
    thumbstick-moved="distance:0.5"
  ></a-entity>
  <a-box id="box" position="0 1 -3" color="#4CC3D9" rotation="0 45 0"></a-box>
</a-scene>