Creando un botón con link en realidad aumentada utilizando MindAR
Hacer una aplicación de realidad aumentada utilizando MindAR es muy fácil, su documentación nos permite hacer Augmented Reality en minutos.
Pero qué pasa cuando nuestro cliente nos pide ir un poco más allá que mostrar un modelo 3D o un video.
La primera petición del cliente es:
- ¿Se pueden poner redes sociales?
- ¿Podemos poner un link a nuestra página web?
- ¿Cuántos botones podemos tener en nuestra aplicación?
Hoy te quiero enseñar como hacer botones con links a redes sociales o cualquier página web
Pero antes de comenzar, una pregunta. ¿Como le dices tu a este tipo de botón (Botón Clic, Botón Click, Botón Cliqueable, Boton Clickable)?
Comencemos
¿Que necesitamos para este proyecto?
- Seleccionar la librería JavaScript para nuestro proyecto: A-Frame vs. Three.js – Cual elegir para Realidad Aumentada
- Un editor de código, en mi caso yo utilizo Visual Studio Code o más conocido como VSCode.
- Imágenes para tus botones o links. Yo voy a utilizar una imagen del logo de facebook en formato .png
Te dejo aquí la imagen que estoy utilizando para este ejercicio práctico.
- El formato utilizado por MindAR para sus marcadores es .mind, Esta es la imagen que estoy utilizando como marcador para este ejemplo (Tarjeta de la biblioteca pública de la ciudad de New York).
Utilizaremos esta línea de código para hacer que nuestros objetos puedan tener la característica de clickable en nuestra aplicación
- cursor=»fuse: false; rayOrigin: mouse;» raycaster=»far: ${customFields.libVersion}; objects: .clickable»
Te preguntaras como utilizar este fragmento de código. Tranquilo al final te dejare todos los archivos para que puedas descargarlo desde la comunidad WhatsApp de Realidad Aumentada Empezando Desde Cero
Debemos de tener en cuenta que estamos creando un <a-assets> tipo imagen, entonces se verá algo así:
- <img id=»icon-fb» src=»URL» /> – – Es muy importante la URL de la imagen, te dejo dos ejemplos.
- <img id=»icon-fb» src=»./fb.png» />
- <img id=»icon-fb» src=»./redes/media/fb.png» />
Después debemos agregar al <body> de nuestro index.html la sección de <a-image> que se verá algo así:
<a-image id=»web-fb» class=»clickable» src=»#icon-fb» alpha-test=»0.5″ position=»0 0 0″ rotation=»0 0 0″ scale=»2 2 2″></a-image>
Desglosemos un poco esta línea de código para que no se vea tan intimidante:
<a-image id=»web-fb» – – – Creamos un id para identificar nuestro elemento.
.class=»clickable» – – – Le decimos que hace parte de un elemento clickable.
src=»#icon-fb» – – – Utilizamos el id del img para ubicar la imagen o textura de nuestro elemento y lo llamamos utilizando src y #
alpha-test=»0.5″ – – – Se utiliza para controlar cómo se renderizan las partes transparentes de una textura o imagen en 3D
position=»0 0 0″ – – – La posición en donde vamos a ubicar nuestro botón con relación a los ejes X, Y y Z de nuestro marcador y espacio 3D.
rotation=»0 0 0″ – – – La rotación en donde vamos a ubicar nuestro botón con relación a los ejes X, Y y Z de nuestro marcador y espacio 3D.
scale=»2 2 2″></a-image> – – – Indicamos cuanto queremos aumentar de tamaño nuestro elemento con relacion a los ejes X, Y y Z de nuestro marcador y espacio 3D y para finalizar cerramos nuestra etiqueta </a-image>
Estamos llegando al final de nuestra aplicación de realidad aumentada, ya solo falta agregar un <script>.
<script>
const planefb = document.querySelector('#web-fb');
planefb.addEventListener("click", event => {
window.open("https://www.facebook.com/realidadaumentadaempezandodesdecero", "_blank");
});
</script>
La funcion de este script es seleccionar nuestro elemento #web-fb y darle un evento «click». Esto se verá reflejado en una nueva ventana en el navegador web que nos llevará al link https://www.facebook.com/realidadaumentadaempezandodesdecero
Este es el resultado de nuestra aplicacion:
En los próximos días estaré subiendo un nuevo videotutorial de como agregar varios botones funcionales a nuestra aplicación de realidad aumentada.
- Link de descarga de los archivos de este tutorial
- visita la sección de tutoriales y video tutoriales dentro de la comunidad para encontrar estos archivos.