aframe
cursors

Invoering

Syntaxis

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

parameters

Opmerkingen

Standaard cursor

We kunnen bijvoorbeeld een ringvormige cursor maken die in het midden van het scherm is bevestigd. Om de cursor op het scherm te plaatsen, zodat de cursor altijd aanwezig is, ongeacht waar we kijken, plaatsen we deze als een kind van de actieve camera-entiteit. We trekken hem voor de camera door hem op de negatieve Z-as te plaatsen. Wanneer de cursor op het vak klikt, kunnen we naar de gebeurtenis click luisteren.

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

Op blik gebaseerde interacties met cursorcomponent

We gaan eerst over op blik gebaseerde interacties. Op blik gebaseerde interacties zijn afhankelijk van het draaien van onze hoofden en het kijken naar objecten om ermee te communiceren. Dit type interactie is voor headsets zonder controller. Zelfs met een controller voor alleen rotatie (Daydream, GearVR) is de interactie nog steeds vergelijkbaar. Omdat A-Frame standaard muis-sleepbesturing biedt, kan op blik gebaseerde soort worden gebruikt op het bureaublad om een voorbeeld van de interactie te bekijken door de camerarotatie te slepen.

Om op blik gebaseerde interactie toe te voegen, moeten we een component toevoegen of implementeren. A-Frame wordt geleverd met een cursorcomponent die op blik gebaseerde interactie biedt indien bevestigd aan de camera:

1. Definieer expliciet entiteit. Eerder leverde A-Frame de standaardcamera.
2. Voeg a-cursor entiteit toe als een onderliggend element onder de camera-entiteit.
3. Configureer desgewenst de raycaster die door de cursor wordt gebruikt.

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

een cursor primitief

De cursor primitief is een dradenkruis waarmee klikken en basisinteractie met een scène op apparaten zonder handcontroller mogelijk is. Het standaard uiterlijk is een ringgeometrie. De cursor wordt meestal geplaatst als een kind van de camera.

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

Op zekering gebaseerde cursor

Ook bekend als op blik gebaseerde cursor. Als we instellen dat de cursor op lont is gebaseerd, zal de cursor een klik activeren als de gebruiker een bepaalde tijd naar een entiteit staart. Stel je een laser voor die vastzit aan het hoofd van de gebruiker, en de laser steekt uit in de scène. Als de gebruiker lang genoeg naar een entiteit staart (dwz de fuseTimeout), zal de cursor een klik activeren.

Het voordeel van op zekering gebaseerde interacties voor VR is dat er geen extra invoerapparaten nodig zijn, behalve de headset. De op zekering gebaseerde cursor is voornamelijk bedoeld voor Google Cardboard-toepassingen. Het nadeel van op lont gebaseerde interacties is dat de gebruiker veel moet draaien.

De cursor configureren via de Raycaster-component

De cursor bouwt bovenop en is afhankelijk van de raycaster-component. Als we de raycasting-stukken van de cursor willen aanpassen, kunnen we dat doen door de eigenschappen van de raycaster-componenten te wijzigen. Stel dat we een maximale afstand willen instellen, minder vaak op kruispunten moeten controleren en instellen welke objecten klikbaar zijn:

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

Visuele feedback toevoegen

Om visuele feedback aan de cursor toe te voegen om te laten zien wanneer de cursor klikt of fuseert, kunnen we het animatiesysteem gebruiken. Wanneer de cursor de entiteit kruist, zal deze een gebeurtenis uitzenden en zal het animatiesysteem gebeurtenis oppikken met het kenmerk start:

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

Muis cursor

Opmerking: voor dit voorbeeld moet u een extern npm-pakket toevoegen.

Als u een muiscursor van uw computer wilt gebruiken, moet u een aframe-mouse-cursor-component . Nadat u het script met deze code moet opnemen:

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

// or this 

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

En op uw camera moet u de mouse-cursor toevoegen.

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