Events 如何在帧中的a实体上禁用光线投射器单击事件？

我想在光线投射器单击一次实体后禁用该实体上的单击。实体将打开一个面板，因此我不希望它显示多次

这实际上取决于您是否正在使用

raycaster=“objects:…；”

。这通常是推荐的方法，因此光线投射器不会与场景中的每个实体交互，从而导致性能下降

这可以通过多种方式实现，但最常见的方法之一是使用类选择器，如

。clickable

，然后单击后删除该类。如果不再需要事件侦听器，请将其删除

光标光线投射器：

<a-cursor raycaster="objects: .clickable;"></a-cursor>

AFRAME.registerComponent('click-once', {
  init: function () {
    var self = this;
    var scene = self.el.sceneEl;
    var raycaster = scene.querySelector('[cursor]').components.raycaster;

    // Define function to be executed on click.
    var clickHandler = function (e) {

      // Log clicks.
      console.log('clicked');

      // Remove "clickable" class from entity.
      self.el.classList.remove('clickable');

      // Refresh raycaster object list to reflect changes.
      raycaster.refreshObjects();

      // Remove event listener since no longer needed.
      self.el.removeEventListener('click', clickHandler);

    };

    // Add event listener for click.
    self.el.addEventListener('click', clickHandler);
  }
});   

编辑：如果将属性或组件用作选择器，而不是类/ID，则可以进一步简化此操作。例如：

数据可点击

默认情况下，添加/删除实体和属性/组件（非类）时，A帧的

raycaster

会自动刷新，因此在这种情况下无需使用

raycaster.refreshObjects（）

HTML:

正在运行的代码演示：

---

编辑：如果您使用的是

而不是

，则我使用的是此代码，它似乎大部分工作正常，但我收到了以下错误：未捕获类型错误：无法读取未定义的属性“refreshObjects”，我不确定为什么它将raycaster视为未定义但仍在工作。有什么想法吗？@schatzkin：我更新了我的答案来解决你的问题。见最后的编辑。我已经更新了我的答案和演示，展示了如何使用数据属性或组件，而不是类。由于在添加/删除实体、组件和某些属性（例如，
数据xxxx
）时，默认情况下A-Frame会自动刷新光线投射器对象列表，因此此方法更为优越。
<a-entity cursor raycaster="objects: [data-clickable];"></a-entity>

self.el.removeAttribute('data-clickable');