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

Question

我尝试在用户按下按钮时执行操作（需要事件侦听器，因为 https://webkit.org/blog/6784/new-video-policies-for-ios/），但我想，我有一些 syntax/logic 错误。一些帮助会很好 :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

查看完整示例：

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

最好的，德克

Answer 3

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

模拟鼠标的一个好方法是使用 cursors 属性：

<a-scene cursor="rayOrigin: mouse">

它应该也适用于移动设备上的触摸事件。

看看here。

否则使用a-frame光标。

<a-cursor></a-cursor>

Aframe click button with eventlistener