Acciones táctiles en apps de realidad aumentada WebAR: cómo activar eventos

Una aplicación de realidad aumentada WebAR puede hacer mucho más que mostrar una imagen, un video o un modelo 3D sobre un marcador.

También podemos hacer que responda cuando el usuario toca la pantalla.

Estas acciones táctiles en realidad aumentada WebAR permiten utilizar un toque como disparador para ejecutar funciones mediante JavaScript: cambiar una imagen, reproducir contenido, activar una animación o modificar algún elemento de la experiencia.

En este tutorial vamos a ver un ejemplo sencillo: una habitación gamer donde podremos encender y apagar un bombillo tocando la pantalla del teléfono o haciendo clic desde un computador.

Para desarrollarlo utilizaremos:

• MindAR para reconocer la imagen.
• A-Frame para crear la escena WebAR.
• JavaScript para controlar la interacción.
• dos imágenes para representar la luz apagada y encendida.

El código completo del proyecto estará disponible para descargar desde Patreon, mientras que aquí nos concentraremos en entender cómo funciona.

¿Qué son las acciones táctiles en WebAR?

Una acción táctil permite ejecutar una función cuando el usuario toca la pantalla.

La idea puede representarse de una forma muy sencilla:

Usuario toca la pantalla – JavaScript detecta el evento – Se ejecuta una acción – Cambia la experiencia WebAR

Por ejemplo, un toque podría utilizarse para iniciar una animación, reproducir un video, cambiar el color de un producto o mostrar contenido diferente.

En nuestro proyecto utilizaremos esta interacción para cambiar entre dos imágenes.

Ejemplo: encender y apagar una luz en realidad aumentada

Tenemos dos versiones de la misma habitación gamer.

La primera muestra el bombillo apagado.

La segunda muestra el bombillo encendido y la habitación iluminada.

Las colocamos exactamente en la misma posición dentro de nuestra escena de realidad aumentada.

Inicialmente mostramos solamente la primera:

<a-image id="img-off" src="#luz-apagada" height="1" width="1.77" visible="true"> </a-image> 
<a-image id="img-on" src="#luz-encendida" height="1" width="1.77" visible="false"> </a-image>

El resultado inicial es:

Luz apagada – TOQUE – Luz encendida – TOQUE – Luz apagada

Aunque visualmente parece que estamos encendiendo un bombillo, realmente JavaScript está alternando cuál de las dos imágenes debe mostrarse.

Cómo activar una acción al tocar la pantalla en realidad aumentada WebAR

La parte más importante del proyecto es convertir el toque del usuario en una acción.

Para nuestro interruptor utilizamos una función llamada:

alternarLuces()

Su trabajo consiste en cambiar entre los dos estados:

const alternarLuces = () => { 
     estadoLuzEncendida = !estadoLuzEncendida; 

imgOff.setAttribute( 
'visible', 
!estadoLuzEncendida 
); 

imgOn.setAttribute( 
'visible', 
estadoLuzEncendida 
); 
};

Cuando la luz está apagada:

img-off → visible 
img-on → oculto

Después del toque:

img-off → oculto 
img-on → visible

Y al tocar nuevamente volvemos al estado anterior.

Esta pequeña función es realmente el centro de toda la experiencia.

Detectar el toque o clic con JavaScript

Ahora necesitamos ejecutar alternarLuces() cuando el usuario interactúe.

Podemos hacerlo mediante un Pointer Event de JavaScript:

overlay.addEventListener(
    'pointerup',
    alternarLuces
);

pointerup resulta útil porque nos permite trabajar con diferentes métodos de entrada mediante una misma lógica, incluyendo pantallas táctiles y ratón.

Nuestro flujo completo queda así:

• MindAR reconoce la imagen que tenemos como marcador – Puedes crear tus marcadores en: Compilador de Marcadores AR | Crea Realidad Aumentada Gratis
• Aparece la experiencia de realidad aumentada WebAR con javascript.
• Usuario toca la pantalla del teléfono, tableta o hace clic con el mouse.
• JavaScript detecta pointerup.
• alternarLuces().
• Cambia la imagen.

Eso es lo fundamental que necesitamos comprender.

El código completo incluye el HTML, CSS, configuración de MindAR, eventos de reconocimiento y todos los archivos necesarios para ejecutar el proyecto. PATREON gratis.

Las acciones táctiles en realidad aumentada pueden utilizarse para mucho más

Cambiar entre dos imágenes es solamente una forma sencilla de comprender el concepto.

Un evento táctil también puede utilizarse para controlar otros elementos de una experiencia WebAR.

Por ejemplo:

Animaciones 3D

Si quieres aprender a cambiar y controlar animaciones de un modelo mediante botones, puedes continuar con mi tutorial “Controla Animaciones 3D en apps de realidad aumentada WebAR”.

Video interactivo

También puedes utilizar la interacción táctil para reproducir o pausar videos. Tengo un tutorial dedicado específicamente a “Realidad Aumentada Interactiva Video Táctil MindAR y A-Frame”.

Cambiar colores de productos

Si quieres aplicar interactividad a comercio electrónico, consulta mi proyecto “Crea una app para mostrar zapatillas en Realidad Aumentada”, donde el usuario puede modificar los colores de diferentes partes de un producto.

Sonido

Los eventos generados por el usuario también son importantes para trabajar con audio en navegadores móviles. Puedes continuar con mi tutorial dedicado a sonido y audio en experiencias WebAR.

Aprende como crear realidad aumentada WebAR con estos cursos

Aprender realidad aumentada hoy es toda una ventaja para tu perfil profesional. Ingresa a mis Cursos de realidad aumentada WebAR: aprende MindAR, JavaScript, CSS, GA4 y proyectos comerciales

Si quieres ir directamente a todos los cursos que ofrecemos Academia WebAR con MindAR | Cursos de Realidad Aumentada Web

Descarga el proyecto completo

En este artículo hemos analizado solamente las partes necesarias para comprender cómo funcionan las acciones táctiles en realidad aumentada WebAR.

Si quieres realizar exactamente el ejemplo de la habitación y probarlo en tu teléfono, he preparado el proyecto completo con:

• Archivo HTML.
• JavaScript.
• Configuración de MindAR.
• Imágenes utilizadas en el ejemplo.
• Estructura del proyecto.
• Código listo para modificar.

Puedes utilizarlo como punto de partida y reemplazar las imágenes por tus propios diseños.

Preguntas frecuentes

¿Cómo activar acciones al tocar la pantalla en WebAR?

Puedes detectar la interacción mediante eventos JavaScript como pointerup y llamar una función que modifique algún elemento de tu experiencia.

¿Puedo cambiar una imagen al tocar la pantalla?

Sí. En este ejemplo utilizamos dos elementos y alternamos su propiedad visible mediante JavaScript.

¿Necesito un modelo 3D?

No. Una aplicación de realidad aumentada WebAR también puede utilizar imágenes, videos, audio y elementos HTML. Nuestro ejemplo funciona utilizando solamente dos imágenes.

¿Las acciones táctiles funcionan en móviles?

Sí. Pointer Events permiten trabajar con diferentes dispositivos de entrada. En este proyecto la misma lógica puede utilizarse mediante el dedo en un dispositivo táctil o con el ratón desde un computador.