Question

我已经看过以下答案：Implementing a score counter in A-Frame

...但由于使用selectSelect只能找到第一个元素，因此无法弄清楚如何编写适用于多个对象的类似函数。

我正在尝试创建一个包含5-8个对象的场景，每个场景只能被单击一次。单击对象时，计数器将增加1。

Answer 1

使用querySelectorAll：

var targets = querySelectorAll('a-box')`
for (var i = 0; i < targets.length; i++) {  // Add event listeners... }

但是更好，请使用一个容器实体来侦听冒泡的点击事件。

<a-entity listener>
  <a-box data-raycastable></a-box>
  <a-box data-raycastable></a-box>
</a-entity>
<a-entity cursor="rayOrigin: mouse" raycaster="objects: [data-raycastable]"></a-entity>

组件：

AFRAME.registerComponent('listener', {
  init: function () {
    this.el.addEventListener('click', evt => {
      if (evt.target.dataset.wasClicked) { return; }
      // evt.target tells you which was clicked.
      evt.target.dataset.wasClicked = true;
      // Score up.
    });
  }
});

请注意，状态部分是存储您的分数的好地方。 https://www.npmjs.com/package/aframe-state-component

具有多个物体的A帧计分器

1 个答案: