aframe
cursori

introduzione

Sintassi

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

Parametri

Osservazioni

Cursore predefinito

Ad esempio, possiamo creare un cursore a forma di anello fissato al centro dello schermo. Per fissare il cursore sullo schermo in modo che il cursore sia sempre presente, non importa dove guardiamo, lo posizioniamo come un figlio dell'entità della telecamera attiva. Lo tiriamo di fronte alla telecamera posizionandolo sull'asse Z negativo. Quando il cursore fa clic sulla casella, possiamo ascoltare l'evento 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);
    });
  }
});

Interazioni basate sullo sguardo con il componente del cursore

Andremo per la prima volta sulle interazioni basate sullo sguardo. Le interazioni basate sullo sguardo si basano sul ruotare le nostre teste e guardare gli oggetti per interagire con loro. Questo tipo di interazione è per cuffie senza controller. Anche con un controller solo rotazione (Daydream, GearVR), l'interazione è ancora simile. Poiché A-Frame fornisce i controlli del trascinamento del mouse per impostazione predefinita, è possibile utilizzare i gazebo sul desktop per visualizzare l'anteprima dell'interazione trascinando la rotazione della telecamera.

Per aggiungere l'interazione basata sullo sguardo, dobbiamo aggiungere o implementare un componente. A-Frame viene fornito con un componente del cursore che fornisce l'interazione basata sullo sguardo se collegato alla fotocamera:

1. Definisci esplicitamente un'entità. In precedenza, A-Frame forniva la fotocamera predefinita.
2. Aggiungi un'entità a-cursor a forma di elemento figlio al di sotto dell'entità videocamera.
3. Facoltativamente, configurare il raycaster utilizzato dal cursore.

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

a-cursore primitivo

Il cursore primitivo è un reticolo che consente il clic e l'interattività di base con una scena su dispositivi che non dispongono di un controller a mano. L'aspetto predefinito è una geometria ad anello. Il cursore viene solitamente posizionato come un bambino della fotocamera.

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

Cursore basato su fusibile

Conosciuto anche come cursore basato sullo sguardo. Se impostiamo il cursore come basato sul fusibile, il cursore attiverà un clic se l'utente osserva un'entità per un determinato periodo di tempo. Immagina un laser legato alla testa dell'utente e il laser si estende nella scena. Se l'utente fissa un'entità abbastanza a lungo (cioè il fuseTimeout), il cursore attiverà un clic.

Il vantaggio delle interazioni basate su fusibili per la realtà virtuale è che non richiede dispositivi di input aggiuntivi oltre all'auricolare. Il cursore basato su fusibile è destinato principalmente alle applicazioni Google Cardboard. Lo svantaggio delle interazioni basate su fusibili è che richiede all'utente di girare la testa molto.

Configurazione del cursore tramite il componente Raycaster

Il cursore si basa sulla parte superiore e dipende dal componente raycaster. Se vogliamo personalizzare le parti di raycast del cursore, possiamo farlo modificando le proprietà del componente raycaster. Diciamo che vogliamo impostare una distanza massima, controllare le intersezioni meno frequentemente e impostare quali oggetti sono cliccabili:

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

Aggiungere commenti visivi

Per aggiungere un feedback visivo al cursore per mostrare quando il cursore fa clic o si fonde, possiamo usare il sistema di animazione. Quando il cursore interseca l'entità, emetterà un evento e il sistema di animazione prenderà l'evento con l'attributo 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>

Cursore del mouse

Nota: per questo esempio è necessario aggiungere un pacchetto npm esterno.

Se si desidera utilizzare il cursore del mouse del computer, è necessario aggiungere il componente aframe-mouse-cursor-component . Dopo se devi includere lo script usando questo codice:

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

// or this 

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

E sulla tua macchina fotografica devi aggiungere il componente del mouse-cursor del mouse-cursor .

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