Question

我仍然是A-frame的新手，这个问题可能听起来有些蹩脚。我试图查找它，但我不完全理解有关组件的文档。我只想计算点击次数，它只是一个测试，用于重要的操作。这就是我的组件现在的样子：

        AFRAME.registerComponent('event-test', {
        init: function() {
            var el1=document.querySelector('a-scene');
            var x = 0;
            el1.addEventListener('click', function () {
                this.x = this.x + 1;
                console.log("number of clicks :" + this.x);
            })
        }
    })

Answer 1

你的代码非常接近预期的结果。 A-Frame有几点需要考虑，与常规HTML元素有点不同。

首先，点击事件（特别是鼠标事件）需要光标组件以及设置的rayOrigin属性：rayOrigin: mouse

您可以查看此gltich了解更多详情： https://glitch.com/edit/#!/a-frame-mouse-click-example

另外需要注意的是，您无法在场景中“点击”。你可以做两件事：

一个是文档上的普通点击事件，或者如果要单击场景中的特定对象，请将事件侦听器添加到该对象：

https://glitch.com/edit/#!/a-frame-basic-click

AFRAME.registerComponent('click-test', {
  init: function () {
    const sphere = document.querySelector('#sphere')
    this.x = 0;
    document.addEventListener('click', () => {
        // console.log('document click');
        // console.log(this.x++)
    })
    sphere.addEventListener('click', () => {
        console.log('sphere click');
        console.log(this.x++)
    })
  }
});

计算点击次数

1 个答案: