Interaction

A-Frame propose un système d'événements afin de réagir aux actions de l'utilisateur à l'aide

Pour cela, il faut inclure le composant aframe-event-set en ajoutant le code ci-dessous dans l'entête du fichier HTML. 

<!-- A-Frame event system -->
<script src="https://unpkg.com/aframe-event-set-component@3.0.3/dist/aframe-event-set-component.min.js"></script>
Évènement Description
click émis lors d'un clic souris ou d'une pression sur la gachette
mouseenter émis lorsque le curseur ou le laser survole l'objet
mouseleave émis lorsque le curseur ou le laser quitte la surface de l'objet

Exemple d'interaction curseur

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="description" content="a stack of geometric primitives">
    <meta name="keywords" content="Virtual Reality, A-Frame">
    <meta name="author" content="Olivier Nocent">
    <title>A-Frame: primitive stack</title>
    <!-- A-Frame JavaScript library -->
    <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
    <script src="https://unpkg.com/aframe-event-set-component@3.0.3/dist/aframe-event-set-component.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-box id="box" position="0 0.5 -4" rotation="0 45 0" color="#4CC3D9" visible="true"></a-box>
      <a-sphere id="sphere" position="0 1.5 -4" radius="0.5" color="#EF2D5E"></a-sphere>
      <a-cylinder
        position="0 2.5 -4" rotation="0 -60 90"
        radius="0.5" height="1.5"
        color="#FFC65D"
        event-set__click="_event: click; _target: #sphere; color: green"
        event-set__enter="_event: mouseenter; _target: #box; visible: false"
        event-set__leave="_event: mouseleave; _target: #box; visible: true"
      ></a-cylinder>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
      <a-sky color="#ECECEC"></a-sky>
      <a-camera>
        <!-- Ajout d'un curseur attaché à la caméra -->
        <a-cursor color="red"></a-cursor>
      </a-camera>
    </a-scene>
  </body>
</html>

Démo

Exemple d'interaction laser

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Laser</title>
  <!-- A-Frame JavaScript library -->
  <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
  <script src="https://unpkg.com/aframe-event-set-component@3.0.3/dist/aframe-event-set-component.min.js"></script>
</head>
<body>
  <a-scene>
    <a-entity laser-controls="hand: left;" raycaster="objects: .obstacle; lineColor: red; lineOpacity: 0.5">
    </a-entity>

    <a-sphere class="obstacle" radius="0.25" position="-4 1 -3" color="yellow"
      event-set__click="_event: click; visible: false" event-set__enter="_event: mouseenter; color: red"
      event-set__leave="_event: mouseleave; color: yellow"></a-sphere>

    <a-camera></a-camera>
  </a-scene>
</body>
</html>

Exemple d'interaction de type attraper/lancer

Enfin, il est possible d'interagir avec des objets dynamiques, gérés par le moteur physique, à l'aide des manettes grâce au composant grab. 

<!-- Left hand -->
<a-entity id="leftController" static-body="shape: sphere; sphereRadius: 0.02;"
    oculus-touch-controls="hand: left" sphere-collider="objects: .throwable" grab>
</a-entity>

<!-- Right hand -->
<a-entity id="rightController" static-body="shape: sphere; sphereRadius: 0.02;"
    oculus-touch-controls="hand: right" sphere-collider="objects: .throwable" grab>
</a-entity>

Ainsi, toutes les entités disposant de la classe throwable pourront être manipulées. 

<!-- A throwable entity -->
<a-sphere class="throwable" dynamic-body></a-sphere>

Démo