AFrame: comment ajouter un écouteur d'événement tactile à une entité

Question

Dans un navigateur mobile, je souhaite faire quelque chose lorsque l'utilisateur touche une image, mais je ne sais pas comment utiliser les écouteurs tactiles. Y a-t-il des composants que je peux utiliser? Ou donnez-moi une idée de comment le faire moi-même. A-Frame prend en charge les événements DOM de manière très similaire aux pages Web normales.

Answer 1

Exemple:

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

Et puis en JavaScript:

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

Voir cursor component documentation de A-Frame pour plus de détails.