带有事件侦听器的Aframe单击按钮

Question

我尝试在用户按下按钮时执行操作（因为https://webkit.org/blog/6784/new-video-policies-for-ios/，所以需要一个事件侦听器），但是我想我有一些语法/逻辑错误。一些帮助会很好：D。

代码如下：

HTML：

   <a-image id="playbutton_1" position="-5 0 0" width="2" height="2" rotation="0 -90 0" ></a-image>

JS：

var playthisvid_1 = document.querySelector('#playbutton_1');

    playthisvid_1.addEventListener('click', () => { console.log("it clicks");  })

Answer 1

我认为问题出在框架上。 javascript代码运行正常。我只是用一个普通按钮替换了aframe元素，并且该功能正常工作。

var playthisvid_1 = document.querySelector('#playbutton_1');

    playthisvid_1.addEventListener('click', () => { console.log("it clicks");  })

<a id="playbutton_1" href="#">Test</a>

也许这可以解决您的问题？ AFrame: how to add a touch event listener to an entity

Answer 2

Aframe元素不会简单地对触摸/鼠标事件做出反应。您需要一个基于ray的游标。

模拟鼠标的一种好方法是使用cursor s属性：

<a-scene cursor="rayOrigin: mouse>

它还应该与移动设备上的触摸事件一起使用。

签出here。

---

否则，请使用a帧光标。

<a-cursor></a-cursor>

Answer 3

请查看完整示例：

https://curious-electric.com/w/experiments/aframe/audiosprite/

这是一个音频示例，但是相同的技术也适用于视频（例如，首先让用户单击按钮）。

最佳，德克