Aframe: eventos

0
2694

Manejo de eventos en aframe.

Índice de contenidos

1. Introducción

Hola a todos, seguimos con la saga Aframe, en este capítulo veremos los eventos. Primero veremos como declararlos dentro de un componente, programaremos acciones a realizar cuando se cumplan ciertos eventos y finalmente los asociaremos a una entidad.

2. Entorno

El tutorial está escrito usando el siguiente entorno:

  • Hardware: MacBook Pro 2,5 GHz Intel Core i7. 16gb DDR3
  • Sistema Operativo: Mac OS Sierra 10.12
  • Entorno de desarrollo: Visual studio Code
  • node 8.0.0
  • npm 5.0.3

3. Eventos

Al igual que en la web en 2D, tenemos eventos. Los componentes usan los eventos para comunicarse, pueden lanzar eventos o estar a la escucha.

4. Proyecto de Ejemplo

Generamos un nuevo proyecto. Con un index.html, añadimos la librería de aframe y dibujamos una caja.

index.html

4.1. Componente con eventos

Ahora crearemos un componente donde añadiremos eventos. Este componente lo podremos añadir a entidades para que usen sus eventos. Generamos un fichero llamado handleEvents.js. Y añadimos el siguiente código:

Aquí podemos ver como la entidad que use este componente estará a la escucha de tres eventos: mouseenter, mouseleave y click. Para cada evento hemos programado un cambio en una de las propiedades de la entidad.

Cuando nos situemos encima de la entidad el atributo color se actualizará a rojo y la entidad reflejará este cambio. Al dejar la entidad su color pasará a coger el valor ‘gris’. Y si hacemos click sobre ella aumentará su tamaño aleatoriamente.

4.2. Asociar eventos a entidades

Para asociar este componente de eventos a una entidad solo tendremos que declararlo en la etiqueta de la entidad.

Añadimos el fichero handleEvents.js al fichero index.html y modificamos la entidad a-box para añadirle los eventos.

5. Conclusiones

Después de este tutorial, espero que vayáis viendo las posibilidades que se nos van presentando. En el siguiente tutorial veremos las animaciones.

No me faltéis.

Saludos.

6. Referencias

Dejar respuesta

Please enter your comment!
Please enter your name here