aframe
kursory

Wprowadzenie

Składnia

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

Parametry

Uwagi

Domyślny kursor

Na przykład możemy utworzyć kursor w kształcie pierścienia przymocowany do środka ekranu. Aby naprawić kursor na ekranie, aby kursor był zawsze obecny, bez względu na to, gdzie spojrzymy, umieszczamy go jako element podrzędny aktywnego elementu kamery. Wyciągamy go przed kamerę, umieszczając go na ujemnej osi Z. Kiedy kursor kliknie na pole, możemy odsłuchać zdarzenie 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);
    });
  }
});

Interakcje oparte na spojrzeniu z komponentem kursora

Najpierw omówimy interakcje oparte na spojrzeniu. Interakcje oparte na spojrzeniach polegają na obracaniu głowami i patrzeniu na obiekty, które wchodzą w interakcje z nimi. Ten rodzaj interakcji dotyczy zestawów słuchawkowych bez kontrolera. Nawet w przypadku kontrolera z obrotem (Daydream, GearVR) interakcja jest nadal podobna. Ponieważ A-Frame domyślnie zapewnia kontrolę przeciągania myszą, można na podstawie podglądu zastosować na pulpicie podgląd interakcji, przeciągając obrót kamery.

Aby dodać interakcję opartą na spojrzeniu, musimy dodać lub wdrożyć komponent. A-Frame jest wyposażony w element kursora, który zapewnia interakcję ze wzrokiem, jeśli jest podłączony do kamery:

1. Jawnie zdefiniuj encję. Wcześniej A-Frame dostarczał domyślną kamerę.
2. Dodaj a-cursor jako element podrzędny pod elementem kamery.
3. Opcjonalnie skonfiguruj radioodtwarzacz używany przez kursor.

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

prymityw kursora a

Prymityw kursora to siatka umożliwiająca klikanie i podstawową interaktywność ze sceną na urządzeniach, które nie mają kontrolera ręcznego. Domyślny wygląd to geometria pierścienia. Kursor jest zwykle umieszczany jako dziecko kamery.

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

Kursor oparty na bezpiecznikach

Znany również jako kursor oparty na spojrzeniu. Jeśli ustawimy kursor na bezpiecznik, kursor uruchomi kliknięcie, jeśli użytkownik patrzy na obiekt przez określony czas. Wyobraź sobie laser przymocowany do głowy użytkownika, a laser rozciąga się na scenę. Jeśli użytkownik wpatruje się w byt wystarczająco długo (tj. FuseTimeout), wówczas kursor wywoła kliknięcie.

Zaletą interakcji opartych na bezpiecznikach dla VR jest to, że nie wymaga dodatkowych urządzeń wejściowych innych niż zestaw słuchawkowy. Kursor oparty na bezpiecznikach jest przeznaczony głównie do aplikacji Google Cardboard. Wadą interakcji opartych na bezpiecznikach jest to, że wymaga to od użytkownika dużego odwrócenia głowy.

Konfigurowanie kursora za pomocą komponentu Raycaster

Kursor buduje się na nim i zależy od komponentu raycaster. Jeśli chcemy dostosować fragmenty kursora do raycastingu, możemy to zrobić, zmieniając właściwości komponentu raycastera. Powiedzmy, że chcemy ustawić maksymalną odległość, rzadziej sprawdzać skrzyżowania i określić, które obiekty można klikać:

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

Dodawanie wizualnej informacji zwrotnej

Aby dodać wizualną informację zwrotną do kursora, aby pokazać, kiedy kursor się klika lub łączy, możemy użyć systemu animacji. Gdy kursor przecina jednostkę, wyemituje zdarzenie, a system animacji wybierze zdarzenie z atrybutem 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>

Kursor myszki

Uwaga: W tym przykładzie musisz dodać zewnętrzny pakiet npm.

Jeśli chcesz użyć kursora myszy na swoim komputerze, musisz dodać aframe-mouse-cursor-component . Po, jeśli musisz dołączyć skrypt za pomocą tego kodu:

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

// or this 

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

W aparacie musisz dodać element mouse-cursor .

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