如何在 Aframe 中的 a-entity 上禁用 raycaster 点击事件？

Question

我想在实体被光线投射器单击一次后禁用对它的单击。该实体打开了一个面板，所以我不希望它多次显示

Answer 1

这真的取决于您是否使用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);
  }
});   

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

默认情况下，A-Frame 的raycaster 在添加/删除实体和属性/组件（不是类）时会自动刷新，因此在这种情况下无需使用raycaster.refreshObjects()。 https://aframe.io/docs/master/components/raycaster.html#properties_autorefresh

HTML：

<a-entity cursor raycaster="objects: [data-clickable];"></a-entity>

JS：

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

实际代码演示： https://codepen.io/dansinni/pen/MGKGZq

编辑：如果您使用的是<a-cursor> 而不是<a-entity cursor="..."，那么您可能需要使用以下var raycaster 赋值：

var raycaster = scene.querySelector('a-cursor').components.raycaster;

或者，如果您明确附加 raycaster 组件：

var raycaster = scene.querySelector('[raycaster]').components.raycaster;

希望这会有所帮助。