AFrame：如何向实体添加触摸事件侦听器

Question

在移动浏览器中，我想在用户触摸图像时执行某些操作，但我不知道如何使用触控侦听器。我可以使用一些组件吗？或者让我知道如何自己做。

Answer 1

A-Frame支持DOM事件，与Web普通页面非常相似。例如：

<a-scene>
  <!-- Target -->
  <a-box id="target" material="color: green"></a-box>

  <!-- Camera + Cursor -->
  <a-entity camera>
    <a-entity cursor="fuse: true; fuseTimeout: 500"
            position="0 0 -1"
            geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
            material="color: black; shader: flat">
    </a-entity>
  </a-entity>
</a-scene>

然后在JavaScript中：

var targetEl = document.querySelector('#target');
targetEl.addEventListener('click', function() {
  targetEl.setAttribute('material', {color: 'red'});
});

有关详细信息，请参阅A-Frame的cursor component documentation。

Answer 2

我只是在寻找同样的东西。我找到了另一个解决方案，aframe-mouse-cursor-component。

https://github.com/mayognaise/aframe-mouse-cursor-component