aframe
markörer

Introduktion

Syntax

• <a-enhet cursor = ""> </a-cursor>
• <A-markören> </ a-markören>

parametrar

Anmärkningar

Standardmarkör

Vi kan till exempel skapa en ringformad markör fixerad i mitten av skärmen. För att fixera markören på skärmen så att markören alltid är närvarande oavsett var vi tittar, placerar vi den som ett barn till den aktiva kamerainenheten. Vi drar den framför kameran genom att placera den på den negativa Z-axeln. När markören klickar på rutan kan vi lyssna på klickhändelsen.

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

Blickbaserade interaktioner med markörkomponenten

Vi går först över blickbaserade interaktioner. Blickbaserade interaktioner förlitar sig på att rotera våra huvuden och titta på föremål för att interagera med dem. Den här typen av interaktion är för headset utan styrenhet. Även med en enda rotationskontroll (Daydream, GearVR) är interaktionen fortfarande lik. Eftersom A-Frame tillhandahåller mus-dra-kontroller som standard, kan blicken-baserade sorteras som används på skrivbordet för att förhandsgranska interaktionen genom att dra kamerarotationen.

För att lägga till blickbaserad interaktion måste vi lägga till eller implementera en komponent. A-Frame levereras med en markörkomponent som ger blickbaserad interaktion om den är ansluten till kameran:

1. Definiera entitet. Tidigare tillhandahöll A-Frame standardkameran.
2. Lägg till a-cursor som ett barnelement under kamerainenheten.
3. Konfigurera valfritt den strålkastare som används av markören.

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

a-markör primitiv

Markörens primitiva är ett nätverk som möjliggör klickning och grundläggande interaktivitet med en scen på enheter som inte har en handkontroll. Standardutseendet är en ringgeometri. Markören placeras vanligtvis som ett barn på kameran.

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

Säkringsbaserad markör

Även känd som blickbaserad markör. Om vi ställer in markören till säkringsbaserad utlöser markören ett klick om användaren tittar på en enhet under en viss tidsperiod. Föreställ dig en laser som är fastspänd på användarens huvud och lasern sträcker sig ut i scenen. Om användaren stirrar på en enhet tillräckligt länge (dvs fuseTimeout), kommer markören att utlösa ett klick.

Fördelen med säkringsbaserade interaktioner för VR är att det inte kräver andra inmatningsenheter än headsetet. Den säkringsbaserade markören är främst avsedd för Google Kartong-applikationer. Nackdelen med säkringsbaserade interaktioner är att det kräver att användaren vänder huvudet mycket.

Konfigurera markören via Raycaster-komponenten

Markören bygger ovanpå och beror på raycaster-komponenten. Om vi vill anpassa markörens raycasting-delar kan vi göra det genom att ändra egenskaperna för raycaster-komponenten. Säg att vi vill ställa in ett maxavstånd, kontrollera för korsningar mindre ofta och ställa in vilka objekt som är klickbara:

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

Lägga till visuell feedback

För att lägga till visuell feedback till markören för att visa när markören klickar eller smälter kan vi använda animationssystemet. När markören korsar enheten kommer den att avge en händelse och animationssystemet kommer att plocka upp händelsen med attributet 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>

Muspekaren

Obs: I det här exemplet måste du lägga till ett externt npm-paket.

Om du vill använda en muspekare på din dator måste du lägga till aframe-mouse-cursor-component . Efter om du måste inkludera skriptet med den här koden:

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

// or this 

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

Och på din kamera måste du lägga till mouse-cursor .

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