我看过这个答案:Implementing a score counter in A-Frame
..。但是不知道如何编写一个类似的函数来处理多个对象,因为querySelector只找到第一个元素。
我正在尝试创建一个包含5-8个对象的场景,每个对象只能单击一次。当一个对象被点击时,计数器将递增1。
发布于 2018-06-30 04:04:57
使用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
https://stackoverflow.com/questions/51108202
复制相似问题