Hololens2中使用Aframe激光控制点击对象几秒后失效问题求助

可能的原因 #

1. 自定义组件命名与内置API冲突 #

你注册了名为click的自定义组件，但A-Frame本身内置了click事件系统，这个命名会和原生事件处理逻辑冲突，导致事件监听在运行一段时间后被异常覆盖或解绑。

2. 多Raycaster实例相互干扰 #

你的场景中同时存在多个Raycaster实例：

• <a-scene>上的raycaster属性
• <a-entity id="mouseCursor">的raycaster
• 左右laser-controls上的raycaster

在Hololens2的AR模式下，多个射线检测源同时运行会导致事件触发逻辑混乱，初期可能因为优先级问题正常工作，但几秒后射线检测的状态同步出现异常，导致点击失效。

3. 事件监听的不合理绑定 #

在自定义组件的init方法中，通过document.querySelector全局查询元素绑定事件，这种方式没有利用A-Frame组件的自身上下文，容易出现元素引用异常或事件重复绑定的问题。

修复后的代码示例 #

<html>
  <head>
    <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
    <script>
      // 重命名组件，避免与内置click冲突
      AFRAME.registerComponent('btn-toggle', {
        dependencies: ['material'],
        init: function () {
          var isClick = false;
          // 直接使用组件自身的元素，无需全局查询
          this.el.addEventListener("click", (e) => {  
              if(!isClick){
                this.el.setAttribute('material', 'color', 'tomato');
                isClick = true;
              } 
              else{
                this.el.setAttribute('material', 'color', 'white');
                isClick = false;
              }                
          });
        }
      });
    </script>
  </head>
  <body>
    <a-scene
      id="a_scene"  
      background="color: #837E7C">    
      <a-camera>
        <a-box 
          btn-toggle
          position="-1.7 -0.2 -8"
          id="clickbtn"
          material="color: white; opacity:1"
          width="0.5" 
          height="0.5" 
          depth="0.05" 
          animation__scale="property: scale; to: 2 2 2; dur: 200; startEvents: mouseenter"
          animation__scale_reverse="property: scale; to: 1 1 1; dur: 200; startEvents: mouseleave"
          class="raycastable">
        </a-box>
      </a-camera>

      <!-- 保留laser-controls的raycaster，移除多余的mouseCursor和场景级raycaster -->
      <a-entity id="leftHand" laser-controls="hand: left" raycaster="objects: .raycastable"></a-entity>
      <a-entity id="rightHand" laser-controls="hand: right" raycaster="objects: .raycastable"></a-entity>
    </a-scene>
  </body>
</html>

额外说明 #

• Hololens2的AR交互中，laser-controls已经内置了射线检测逻辑，无需额外添加全局或鼠标模式的cursor/raycaster，避免资源浪费和逻辑冲突。
• 自定义组件尽量使用this.el来引用自身元素，保证组件的封装性和上下文正确性。

内容的提问来源于stack exchange，提问作者min