场景光标中断 raycaster

Question

我正在尝试设置有保险丝来触发悬停动画，同时仍然能够点击/点击环境中的项目。

将<a-cursor position="0 0 -0.25"></a-cursor> 添加为我的相机的子项会在屏幕上显示环形光标，并允许悬停 mouseenter/mouseleave eventListeners 按预期触发。

然后我将cursor="rayOrigin:mouse;" 添加到场景中，这样我就可以点击场景中的对象，但这会破坏悬停动画。

对于悬停动画，我有一个不可见的平面，但位于具有 mouseenter/mouseleave eventListeners 的动画对象的前面。但是，当光标在光线投射中同时具有平面和对象时，就会调用 mouseleave。如果省略 cursor="rayOrigin:mouse;"，则不会发生这种情况。

此处出现故障 --> https://glitch.com/edit/#!/join/49af29f1-557a-4976-bc2b-f89fce5e3ad6

Answer 1

<a-cursor> 干扰了场景的光标

<a-scene cursor="...">
  <a-camera>
    <a-cursor>
    </a-cursor>

因为<a-cursor> 创建的raycaster 会发出事件（在交叉路口和清除时），这些事件会冒泡并被<a-scene>s 光标捕获。正是these two listeners。

为了防止它们相互干扰，可以去掉两者之间的父子关系：

<a-camera>
  <a-cursor>
  </a-cursor>
</a-camera>
<a-entity cursor="rayOrigin: mouse"></a-entity>

查看this fiddle

---

另一种方法是动态添加/删除一个游标，这样一次只有“预期”的游标在工作。