aframe
cursores

Introducción

Sintaxis

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

Parámetros

Observaciones

Cursor predeterminado

Por ejemplo, podemos crear un cursor en forma de anillo fijo al centro de la pantalla. Para fijar el cursor en la pantalla para que el cursor esté siempre presente, sin importar dónde miremos, lo colocamos como un elemento secundario de la entidad de cámara activa. Lo colocamos frente a la cámara colocándolo en el eje Z negativo. Cuando el cursor hace clic en el cuadro, podemos escuchar el evento clic.

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

Interacciones basadas en la mirada con el cursor Componente

Primero repasaremos las interacciones basadas en la mirada. Las interacciones basadas en la mirada se basan en girar la cabeza y mirar los objetos para interactuar con ellos. Este tipo de interacción es para auriculares sin controlador. Incluso con un controlador de solo rotación (Daydream, GearVR), la interacción sigue siendo similar. Debido a que A-Frame proporciona controles de arrastre con el mouse de manera predeterminada, se puede usar la función basada en la mirada en el escritorio para previsualizar la interacción arrastrando la rotación de la cámara.

Para agregar una interacción basada en la mirada, necesitamos agregar o implementar un componente. A-Frame viene con un componente de cursor que proporciona interacción basada en la mirada si está conectado a la cámara:

1. Defina explícitamente la entidad. Anteriormente, A-Frame proporcionaba la cámara predeterminada.
2. Agregue a-cursor entidad de a-cursor como un elemento secundario debajo de la entidad de cámara.
3. Opcionalmente, configure el raycaster usado por el cursor.

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

primitiva de un cursor

El cursor primitivo es una retícula que permite hacer clic e interactividad básica con una escena en dispositivos que no tienen un controlador manual. El aspecto predeterminado es una geometría de anillo. El cursor suele colocarse como un hijo de la cámara.

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

Cursor basado en fusible

También conocido como cursor basado en la mirada. Si configuramos el cursor para que esté basado en fusibles, el cursor activará un clic si el usuario observa una entidad durante un período de tiempo determinado. Imagine un láser atado a la cabeza del usuario, y el láser se extiende hacia la escena. Si el usuario mira a una entidad el tiempo suficiente (es decir, fuseTimeout), entonces el cursor activará un clic.

La ventaja de las interacciones basadas en fusibles para la realidad virtual es que no requiere dispositivos de entrada adicionales que no sean los auriculares. El cursor basado en fusible está destinado principalmente a las aplicaciones de Google Cardboard. La desventaja de las interacciones basadas en fusibles es que requiere que el usuario gire mucho la cabeza.

Configurando el cursor a través del componente Raycaster

El cursor se construye sobre y depende del componente raycaster. Si queremos personalizar las partes de raycasting del cursor, podemos hacerlo cambiando las propiedades del componente raycaster. Digamos que queremos establecer una distancia máxima, verificar las intersecciones con menos frecuencia y establecer qué objetos se pueden hacer clic:

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

Añadiendo comentarios visuales

Para agregar información visual al cursor para mostrar cuando el cursor está haciendo clic o fusionándose, podemos usar el sistema de animación. Cuando el cursor se cruza con la entidad, emitirá un evento, y el sistema de animación recogerá el evento con el atributo de inicio:

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

Cursor del ratón

Nota: para este ejemplo, debe agregar un paquete npm externo.

Si desea utilizar el cursor del mouse de su computadora, debe agregar un aframe-mouse-cursor-component . Después si debes incluir el script usando este código:

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

// or this 

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

Y en tu cámara necesitas agregar el componente del mouse-cursor del mouse-cursor .

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