具有多个物体的A帧计分器 [英] A-frame score counter with multiple objects

问题描述

我已经看过以下答案：在A-中实现得分计数器框架

I've looked at this answer: Implementing a score counter in A-Frame

...，但无法弄清楚如何编写适用于多个对象的类似函数，因为querySelector仅找到第一个元素。

... but cannot figure out how to write a similar function that would work for multiple objects, since querySelector only finds the first element.

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

I'm trying to create a scene with 5-8 objects, and each one can only be clicked once. When an object is clicked, the counter will increment by 1.

推荐答案

要么使用querySelectorAll：

Either use 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

As a side note, state component is a great place to store your score. https://www.npmjs.com/package/aframe-state-component

这篇关于具有多个物体的A帧计分器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！