如何禁用 Aframe 中 a-entity 的 raycaster 单击事件？

Question

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

Answer 1

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

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

光标光线投射器：

<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 属性或组件用作选择器，而不是 classes/ids，这可以进一步简化。例如：data-clickable

默认情况下，A-Frame的raycaster在实体和attributes/components（非classes）为added/removed时自动刷新，所以不需要使用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 单击事件？

How do I disable the raycaster click event on an a-entity in Aframe?

javascript

events

raycasting

webvr

aframe