Question

我希望在raycaster点击一次之后禁用实体上的点击。该实体打开一个面板，所以我不希望它出现多次

Answer 1

这取决于您是否使用raycaster="objects: ...;"。这通常是推荐的方法，因此您的raycaster不会与场景中的每个实体进行交互，从而导致性能下降。

这可以通过多种方式完成，但最常见的一种方法是使用类.clickable之类的类选择器，然后在单击时删除该类。然后删除不再需要的事件侦听器。

Cursor Raycaster：

<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;

希望这有帮助。

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

1 个答案: