首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >具有多个对象的A帧记分计数器

具有多个对象的A帧记分计数器
EN

Stack Overflow用户
提问于 2018-06-30 03:23:35
回答 1查看 253关注 0票数 0

我看过这个答案:Implementing a score counter in A-Frame

..。但是不知道如何编写一个类似的函数来处理多个对象,因为querySelector只找到第一个元素。

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

EN

回答 1

Stack Overflow用户

发布于 2018-06-30 04:04:57

使用querySelectorAll:

代码语言:javascript
运行
复制
var targets = querySelectorAll('a-box')`
for (var i = 0; i < targets.length; i++) {  // Add event listeners... }

但是对于更好的,使用一个监听冒泡的点击事件的容器实体。

代码语言:javascript
运行
复制
<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>

组件:

代码语言:javascript
运行
复制
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

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51108202

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档