Aframe场景切换时按钮触发异常问题及已知根源

我已经定位到这个问题的根源——这是Aframe的一个已知问题：当通过凝视（fuse）触发按钮切换场景后，光标并没有正确重置其fuse状态。当你点击返回按钮回到原场景时，光标依然保留着之前的fuse触发状态，导致原按钮被误触发。

要修复这个问题，我们需要在场景切换时手动重置光标的状态，包括停止fuse动画、重置光标触发标记，确保回到原场景时光标处于初始状态。

修改后的代码示例 #

HTML部分（保留原有结构）

<!-----scene1-------------------------------> 
<a-entity id="browser_scene" visible="true"> 
  <a-entity id="scene1" visible="true"> 
    <!--Icons--> 
    <a-image id="introid" src="#introicon" position="-20 12 -13" width="9" height="9" rotation="0 75 0" transparent="true" onclick="playscene2()" event-set__enter="_event: mouseenter; color: #33ccff" event-set__leave="_event: mouseleave; color: #00000"></a-image> 
  </a-entity> 
  <!-----scene2-------------------------------> 
  <a-entity id="scene2" visible="false"> 
    <!--Videosphere (intro)--> 
    <a-videosphere src="#intro"></a-videosphere> 
    <!--Icons--> 
    <a-image id="haus" src="#home" position="-5 -6 -1.75" width="2" height="2" rotation="35 -90 -180" transparent="true" onclick="playscene1()" event-set__enter="_event: mouseenter; color: #33ccff" event-set__leave="_event: mouseleave; color: #00000"></a-image> 
  </a-entity> 

<!--camera--> 
<a-entity foo rotation="0 90 0"> 
  <a-camera user-height="0" look-controls> 
    <a-cursor fuse="true" fusetimeout="2000" position="0 0 -0.1" geometry="primitive: ring; radiusInner: 0.002; radiusOuter: 0.003" material="color: red; shader: flat"> 
      <a-animation attribute="scale" to="3 3 3" dur="2000" begin="cursor-fusing" fill="backwards" easing="linear"> 
      </a-animation> 
    </a-cursor> 
    <a-entity id="redcircle" position="0 0 -0.1" geometry="primitive: ring; radiusInner: 0.007; radiusOuter: 0.0077" material="color: red; opacity: 0.25; shader: flat"></a-entity> 
  </a-camera> 
</a-entity>

JavaScript部分（添加光标重置逻辑）

// 新增：重置光标状态的工具函数
function resetCursorState() {
  const cursor = document.querySelector('a-cursor');
  // 触发mouseleave事件，让按钮退出hover状态
  cursor.emit('mouseleave');
  // 移除光标正在凝视的标记，终止计时
  cursor.removeAttribute('cursor-fusing');
  // 停止并重置凝视动画
  const fuseAnimation = cursor.querySelector('a-animation');
  if (fuseAnimation) {
    fuseAnimation.stop();
    cursor.setAttribute('scale', '1 1 1');
  }
}

function playscene1() {
  resetCursorState(); // 场景切换前先重置光标
  document.getElementById('scene1').setAttribute('visible', 'true');
  document.getElementById('scene2').setAttribute('visible', 'false');
  document.getElementById('haus').setAttribute('visible', 'false');
  var videoEl_1 = document.querySelector('#intro');
  skyon();
  document.querySelector('#intro').pause();
  document.querySelector('#intro').currentTime = 0;
}

function playscene2() {
  resetCursorState(); // 场景切换前先重置光标
  document.getElementById('scene1').setAttribute('visible', 'false');
  document.getElementById('scene2').setAttribute('visible', 'true');
  document.getElementById('haus').setAttribute('visible', 'true');
  var videoEl_1 = document.querySelector('#intro');
  document.querySelector('#intro').pause();
  document.querySelector('#intro').currentTime = 0;
  skyout();
  videoEl_1.play();
  document.getElementById('intro').addEventListener('ended', myHandler_1, false);
  function myHandler_1(e) {
    if(!e) { e = window.event; }
    playscene3();
  }
}

关键修复说明 #

• 新增的resetCursorState函数负责彻底重置光标：包括退出按钮hover状态、终止凝视计时、重置动画缩放，让光标回到初始状态
• 在两个场景切换函数的开头调用这个重置函数，确保每次场景切换时，光标都不会携带上一次的凝视状态

这样就能解决「凝视切换场景后点击返回触发原按钮」的问题，单独凝视或点击操作依然正常，只有组合操作时的误触被修复。

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