aframe
Cursor

Einführung

Syntax

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

Parameter

Bemerkungen

Standardcursor

Zum Beispiel können wir einen ringförmigen Cursor erstellen, der in der Mitte des Bildschirms fixiert ist. Um den Cursor so auf dem Bildschirm zu fixieren, dass er immer sichtbar ist, egal wo wir hinschauen, platzieren wir ihn als Kind der aktiven Kameraeinheit. Wir ziehen es vor die Kamera, indem wir es auf der negativen Z-Achse platzieren. Wenn der Cursor auf die Box klickt, können wir das Klickereignis anhören.

<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);
    });
  }
});

Blickbasierte Interaktionen mit der Cursor-Komponente

Wir werden zuerst auf blickbasierte Interaktionen eingehen. Blickbasierte Interaktionen sind darauf angewiesen, dass wir den Kopf drehen und Objekte betrachten, um mit ihnen zu interagieren. Diese Art der Interaktion gilt für Headsets ohne Controller. Selbst bei einem Nur-Rotations-Controller (Daydream, GearVR) ist die Interaktion immer noch ähnlich. Da A-Frame standardmäßig Steuerelemente zum Ziehen per Mauszugriff bietet, kann die Blickrichtung auf dem Desktop verwendet werden, um eine Vorschau der Interaktion durch Ziehen der Kameradrehung anzuzeigen.

Um eine blickbasierte Interaktion hinzuzufügen, müssen Sie eine Komponente hinzufügen oder implementieren. A-Frame wird mit einer Cursor-Komponente geliefert, die eine blickbasierte Interaktion ermöglicht, wenn sie mit der Kamera verbunden ist:

1. Entität explizit definieren. Zuvor hatte A-Frame die Standardkamera bereitgestellt.
2. Fügen Sie unter dem Kameraobjekt a-cursor Element als untergeordnetes Element hinzu.
3. Konfigurieren Sie optional den vom Cursor verwendeten Raycaster.

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

ein Cursor-Primitiv

Das Cursor-Grundelement ist ein Fadenkreuz, das das Klicken und grundlegende Interaktivität mit einer Szene auf Geräten ohne Handcontroller ermöglicht. Das Standardaussehen ist eine Ringgeometrie. Der Cursor wird normalerweise als untergeordnetes Element der Kamera platziert.

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

Sicherungsbasierter Cursor

Wird auch als blickbasierter Cursor bezeichnet. Wenn wir den Cursor auf fuse-basiert setzen, löst der Cursor einen Klick aus, wenn der Benutzer eine bestimmte Zeit lang auf eine Entität blickt. Stellen Sie sich einen Laser vor, der am Kopf des Benutzers befestigt ist, und der Laser ragt in die Szene hinein. Wenn der Benutzer lange genug auf eine Entität starrt (z. B. fuseTimeout), wird der Cursor einen Klick auslösen.

Der Vorteil der auf Sicherungen basierenden Interaktionen für VR besteht darin, dass keine zusätzlichen Eingabegeräte außer dem Headset erforderlich sind. Der fuse-basierte Cursor ist hauptsächlich für Google Cardboard-Anwendungen gedacht. Der Nachteil von auf Sicherungen basierenden Interaktionen besteht darin, dass der Benutzer den Kopf viel drehen muss.

Konfigurieren des Cursors über die Raycaster-Komponente

Der Cursor baut auf der Raycaster-Komponente auf und ist davon abhängig. Wenn Sie die Raycasting-Teile des Cursors anpassen möchten, können Sie die Eigenschaften der Raycaster-Komponente ändern. Angenommen, wir möchten eine maximale Entfernung festlegen, weniger häufig nach Schnittpunkten suchen und festlegen, welche Objekte anklickbar sind:

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

Visuelles Feedback hinzufügen

Um dem Cursor visuelles Feedback hinzuzufügen, um anzuzeigen, wenn der Cursor klickt oder verschmilzt, können wir das Animationssystem verwenden. Wenn der Cursor die Entität schneidet, wird ein Ereignis ausgegeben und das Animationssystem nimmt das Ereignis mit dem begin-Attribut auf:

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

Mauszeiger

Hinweis: Für dieses Beispiel müssen Sie ein externes npm-Paket hinzufügen.

Wenn Sie einen Mauszeiger Ihres Computers verwenden möchten, müssen Sie eine aframe-mouse-cursor-component hinzufügen. Danach müssen Sie das Skript mit diesem Code einschließen:

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

// or this 

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

Auf Ihrer Kamera müssen Sie die mouse-cursor Komponente hinzufügen.

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