aframe
курсоры

Вступление

Синтаксис

• <a-entity cursor = ""> </ a-cursor>
• <А-курсор> </ а-курсор>

параметры

замечания

Курсор по умолчанию

Например, мы можем создать кольцевой курсор, прикрепленный к центру экрана. Чтобы зафиксировать курсор на экране, чтобы курсор всегда присутствовал независимо от того, где мы смотрим, мы помещаем его как дочерний элемент активного объекта камеры. Мы вытаскиваем его перед камерой, помещая его на отрицательную ось Z. Когда курсор нажимает на поле, мы можем прослушивать событие 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);
    });
  }
});

Взаимодействие на основе Gaze с компонентом курсора

Сначала мы рассмотрим взаимодействие на основе взглядов. Взаимодействия на основе Gaze основаны на повороте наших голов и поиске объектов для взаимодействия с ними. Этот тип взаимодействия предназначен для гарнитур без контроллера. Даже с контроллером вращения (Daydream, GearVR) взаимодействие по-прежнему схоже. Поскольку A-Frame обеспечивает управление мышью по умолчанию, на основе взгляда можно использовать на рабочем столе, чтобы предварительно просмотреть взаимодействие, перетащив вращение камеры.

Чтобы добавить взаимодействие на основе взгляда, нам нужно добавить или реализовать компонент. A-Frame поставляется с компонентом курсора, который обеспечивает взаимодействие на основе взгляда, если он подключен к камере:

1. Явно определить объект. Ранее A-Frame предоставлял камеру по умолчанию.
2. Добавить a-cursor в качестве дочернего элемента под объектом камеры.
3. При желании, настройте raycaster, используемый курсором.

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

примитив a-cursor

Примером курсора является сетка, которая позволяет щелкнуть и базовую интерактивность со сценой на устройствах, у которых нет ручного контроллера. По умолчанию внешний вид представляет собой кольцевую геометрию. Курсор обычно помещается как дочерний элемент камеры.

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

Курсор на основе плавких предохранителей

Также известен как курсор на основе взгляда. Если мы установим курсор на основе плавких предохранителей, курсор вызовет щелчок, если пользователь будет смотреть на объект в течение определенного времени. Представьте себе лазер, привязанный к голове пользователя, и лазер выходит на сцену. Если пользователь смотрит на объект достаточно долго (т. Е. FuseTimeout), тогда курсор вызовет щелчок.

Преимущество взаимодействий на основе плавких предохранителей для VR заключается в том, что он не требует дополнительных устройств ввода, кроме гарнитуры. Курсор на основе плавких предохранителей в первую очередь предназначен для приложений Google Cardboard. Недостатком взаимодействий на основе плавких предохранителей является то, что он требует от пользователя поворота головы.

Настройка курсора через компонент Raycaster

Курсор строится сверху и зависит от компонента raycaster. Если мы хотим настроить куски курсора, мы можем сделать это, изменив свойства компонента raycaster. Предположим, мы хотим установить максимальное расстояние, проверить пересечения реже и установить, какие объекты можно кликать:

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

Добавление визуальной обратной связи

Чтобы добавить визуальную обратную связь к курсору, чтобы показывать, когда курсор нажимает или плавится, мы можем использовать систему анимации. Когда курсор пересекает сущность, он выдает событие, а система анимации будет принимать событие с атрибутом 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>

Курсор мыши

Примечание. Для этого примера вам нужно добавить внешний пакет npm.

Если вы хотите использовать указатель мыши на своем компьютере, вам нужно добавить aframe-mouse-cursor-component . После этого, если вы должны включить скрипт, используя этот код:

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

// or this 

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

И на вашей камере вам нужно добавить компонент mouse-cursor .

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