aframe
des curseurs

Introduction

Syntaxe

• <a-entity cursor = ""> </ a-cursor>
• <a-cursor> </ a-cursor>

Paramètres

Remarques

Curseur par défaut

Par exemple, nous pouvons créer un curseur en forme d'anneau fixé au centre de l'écran. Pour fixer le curseur sur l'écran afin que le curseur soit toujours présent, peu importe où nous regardons, nous le plaçons comme un enfant de l'entité caméra active. Nous la tirons devant la caméra en la plaçant sur l'axe Z négatif. Lorsque le curseur clique sur la boîte, nous pouvons écouter l'événement click.

<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-entity id="box" cursor-listener geometry="primitive: box" material="color: blue">
</a-entity>

// Component to change to random color on click.
AFRAME.registerComponent('cursor-listener', {
  init: function () {
    var COLORS = ['red', 'green', 'blue'];
    this.el.addEventListener('click', function (evt) {
      var randomIndex = Math.floor(Math.random() * COLORS.length);
      this.setAttribute('material', 'color', COLORS[randomIndex]);
      console.log('I was clicked at: ', evt.detail.intersection.point);
    });
  }
});

Interactions basées sur le regard avec un composant curseur

Nous allons d'abord passer en revue les interactions basées sur le regard. Les interactions basées sur le regard reposent sur la rotation de nos têtes et la recherche d'objets pour interagir avec elles. Ce type d'interaction concerne les casques sans contrôleur. Même avec un contrôleur de rotation seule (Daydream, GearVR), l'interaction est toujours similaire. Étant donné qu'A-Frame fournit par défaut des commandes de glissement de la souris, une approche basée sur le regard peut être utilisée sur le bureau pour prévisualiser l'interaction en faisant glisser la rotation de la caméra.

Pour ajouter une interaction basée sur le regard, nous devons ajouter ou implémenter un composant. A-Frame est livré avec un composant curseur qui fournit une interaction basée sur le regard s'il est attaché à la caméra:

1. Définir explicitement l'entité. Auparavant, A-Frame fournissait la caméra par défaut.
2. Ajouter a-cursor entité de a-cursor tant qu’élément enfant sous l’entité caméra.
3. Configurez éventuellement le raycaster utilisé par le curseur.

<a-scene>
  <a-camera>
    <a-cursor></a-cursor>
    <!-- Or <a-entity cursor></a-entity> -->
  </a-camera>
</a-scene>

une primitive de curseur

La primitive de curseur est un réticule qui permet de cliquer et d'interagir avec une scène sur des appareils ne disposant pas de contrôleur manuel. L'aspect par défaut est une géométrie en anneau. Le curseur est généralement placé en tant qu'enfant de la caméra.

<a-scene>
  <a-camera>
    <a-cursor></a-cursor>
  </a-camera>
  <a-box></a-box>
</a-scene>

Curseur à fusible

Aussi appelé curseur basé sur le regard. Si vous définissez le curseur comme étant basé sur un fusible, le curseur déclenchera un clic si l'utilisateur regarde une entité pendant une durée définie. Imaginez un laser attaché à la tête de l'utilisateur et le laser s'étend dans la scène. Si l'utilisateur regarde une entité suffisamment longue (par exemple, le fuseTimeout), le curseur déclenche un clic.

L'avantage des interactions basées sur les fusibles pour la réalité virtuelle réside dans le fait qu'il ne nécessite pas de périphériques d'entrée supplémentaires autres que le casque. Le curseur basé sur les fusibles est principalement destiné aux applications Google Cardboard. L'inconvénient des interactions basées sur les fusibles est que l'utilisateur doit beaucoup tourner la tête.

Configuration du curseur via le composant Raycaster

Le curseur repose sur et dépend du composant raycaster. Si nous voulons personnaliser les éléments de diffusion du curseur, nous pouvons le faire en modifiant les propriétés du composant raycaster. Disons que nous voulons définir une distance maximale, vérifier les intersections moins fréquemment et définir quels objets sont cliquables:

<a-entity cursor raycaster="far: 20; interval: 1000; objects: .clickable"></a-entity>

Ajout de commentaires visuels

Pour ajouter un retour visuel au curseur pour indiquer que le curseur clique ou fusionne, nous pouvons utiliser le système d'animation. Lorsque le curseur croise l'entité, il émet un événement et le système d'animation prend l'événement avec l'attribut begin:

<a-entity cursor="fuse: true; fuseTimeout: 500"
          position="0 0 -1"
          geometry="primitive: ring"
          material="color: black; shader: flat">
  <a-animation begin="click" easing="ease-in" attribute="scale"
               fill="backwards" from="0.1 0.1 0.1" to="1 1 1"></a-animation>
  <a-animation begin="cursor-fusing" easing="ease-in" attribute="scale"
               fill="forwards" from="1 1 1" to="0.1 0.1 0.1"></a-animation>
</a-entity>

Curseur de la souris

Remarque: Pour cet exemple, vous devez ajouter un package npm externe.

Si vous souhaitez utiliser un curseur de souris sur votre ordinateur, vous devez ajouter un aframe-mouse-cursor-component . Après si vous devez inclure le script en utilisant ce code:

import 'aframe';
import 'aframe-mouse-cursor-component';

// or this 

require('aframe');
require('aframe-mouse-cursor-component');

Et sur votre appareil photo, vous devez ajouter le composant mouse-cursor la mouse-cursor .

<a-scene>
  <a-entity camera look-controls mouse-cursor>
</a-scene>