A-Frame 组件代码实现 —— trigger-changed 手柄Trigger触发事件

A-Frame Components

trigger-changed：监听手柄 Trigger 触发事件

• 通过 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("trigger-changed", {
    init: function () {
      // 避免在闭包内引用 this
      var self = this;
      // 增加事件监听器，当手柄Trigger键按下后触发回调函数
      this.el.addEventListener("triggerdown", function () {
        console.log("trigger down");
        // 更改实体的颜色
        self.boxEl.setAttribute("material", "color", "#FF0000");
      });
      // 增加事件监听器，当手柄Trigger键释放后触发回调函数
      this.el.addEventListener("triggerup", function () {
        console.log("trigger up");
        // 更改实体的颜色
        self.boxEl.setAttribute("material", "color", "#4CC3D9");
      });
    },
    update: function () {
      // 指定要监听的实体，该代码指定监听当前场景下的a-box实体
      this.boxEl = this.el.sceneEl.querySelector("a-box");
    },
  });
  

• html 代码

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

• 可以实现trigger键按下将方块的蓝色转变为红色