AFrame: how to add a touch event listener to an entity

问题

In mobile browser, I want to do something when user touches an image, but I don't know how to use touch listeners. Is there some components that I can use? Or give me some idea how to do it on my own.

回答1:

A-Frame supports DOM events very similarly to web normal pages. Example:

<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>

And then in JavaScript:

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

See A-Frame's cursor component documentation for more details.

来源：https://stackoverflow.com/questions/43154929/aframe-how-to-add-a-touch-event-listener-to-an-entity