Integra botones de redes sociales en tus apps de realidad aumentada
Cuantos más videos veo de realidad aumentada en redes sociales más me encuentro con este tipo de proyecto que les encanta a los programadores y clientes de realidad aumentada.
Nos encontramos con todo tipo de combinaciones en este proyecto, te doy tres ejemplos:
- Tarjeta de presentación como marcador mostrando en realidad aumentada un video demostrativo de los servicios ofrecidos y dos o tres botones a redes sociales.
- Tarjeta de CV como marcador agregando un video explicando tus capacidades como profesional y botones a redes sociales y link a tu CV.
- Imagen como marcador agregando en pantalla un modelo 3D y agregando botones que inicien diferente tipo de animación para el modelo 3D.
Podría darte muchos más ejemplos de este proyecto basta con buscar realidad aumentada en youtube y tendrás como resultado cientos de estos ejemplos.
Hoy voy a enseñarte como hacerlo de forma rápida y práctica.
Hace unos días publique un tutorial de como agregar un botón a nuestra aplicación de realidad aumentada. Aquí te dejo el link del post: Como hacer un botón en realidad aumentada y MindAR
¿Quieres crear tu propio marcador para tu aplicación? Aquí te dejo el link: Image Targets Compiler
Les dejo el video del videotutorial
Ahora les dejo el video de la aplicación funcionando en un teléfono móvil.
Descarga los archivos de este tutorial desde la comunidad WhatsApp de realidad aumentada empezando desde cero: Ingresa Aquí
Un resumen general del código utilizando en esta aplicación de realidad aumentada. Si quieres el codigo completo su explicacion, puedes verlo en el video y en los archivos de descarga.
- LLamado a MindAR desde el script
<script src="https://aframe.io/releases/1.4.2/aframe.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/mind-ar@1.2.2/dist/mindar-image-aframe.prod.js"></script>
- creacion de <a-scene> diciendole a nuestra app que marcador vamos a utilizar. Desactivando la opcion de vr-mode y permisos de orientacion.
<a-scene mindar-image="imageTargetSrc: ./targets.mind;" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">
- los botones, te dejo un ejemplo de uno:
<a-assets><img id="icon-logo" src="./logotipo.jpg" /></a-assets>
- Hacemos los planos donde van nuestras imagenes de redes sociales, posicion, escalado y rotacion de los elementos.
<a-plane id="logotipo" src="#icon-logo"color="white" opacity="1" position="0 0.8 0" scale="1 1 1" rotation="0 0 0"></a-plane>
- Finalizamos con el script
const logo = document.querySelector('#logotipo');