MindAR es una biblioteca de realidad aumentada programada en JavaScript. Es de código abierto. Permite el seguimiento y reconocimiento de marcadores a color, y también ofrece reconocimiento facial.
Gran parte de su documentación se enfoca en AFRAME. Sin embargo, también puedes crear aplicaciones de realidad aumentada con Three.js y otras herramientas JavaScript.
Como MindAR funciona con JavaScript, puedes crear aplicaciones de realidad aumentada para navegadores móviles Android, IOS y escritorio.
La implementación del código es fácil y se integra perfectamente con HTML y CSS.
la documentación oficial la encuentras en el siguiente link.
MindAR
Vamos a hacer un ejemplo sencillo.
Para crear nuestra aplicación, necesitamos tres elementos clave:
- Modelo 3D: Utilizaremos un modelo en formato GLTF. puedes descargarlo directamente desde sketchfab, su sitio web oficial.
- Marcador: En MindAR, los marcadores se conocen como «targets» y tienen la extensión .mind (por ejemplo, targets.mind). Cabe destacar que puedes nombrar tus marcadores como prefieras. Además, tienes un enlace disponible para crear tus propios marcadores:Image Targets Compiler
Esta fue la imagen que utilice como marcador para crear esta aplicación.
- Código en JavaScript: Finalmente, el código de la aplicación está escrito en HTML y se encuentra en un archivo llamado index.html.
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/mind-ar@1.2.5/dist/mindar-image-aframe.prod.js"></script> </head> <body> <a-scene mindar-image="imageTargetSrc: ./targets.mind;" color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false"> <a-assets> <a-asset-item id="avatarModel" src="Models/scene.gltf"></a-asset-item> </a-assets> <a-camera position="0 0 0" look-controls="enabled: false"></a-camera> <a-entity mindar-image-target="targetIndex: 0"> <a-gltf-model rotation="0 0 0 " position="0 -1 0" src="#avatarModel"></a-gltf-model> </a-entity> </a-scene> </body> </html>
Usé Visual Studio Code como mi compilador, y me apoyé en su extensión de Live Server. Como resultado, esto es lo que obtuve:
Crea tu Propia Aplicación de Realidad Aumentada
¿Te gustaría crear y probar tu propia aplicación de realidad aumentada? ¡Es más fácil de lo que crees! De hecho, te guiare paso a paso.
Para empezar, primero visita la web de Visual Studio Code y descarga el mismo editor de código que yo utilizo. Luego, una vez que lo tengas, agrega los archivos del proyecto a un espacio de trabajo en tu editor.
A continuación, descarga e instala la extensión Live Server desde el mismo editor. Finalmente, ¡es hora de jugar con el código HTML! Puedes hacer cambios, agregar nuevos modelos o experimentar como quieras.
¿Te interesa explorar otras librerías JavaScript para desarrollar Realidad Aumentada?
Realidad Aumentada con javascript – librerias
Por último, si tienes alguna pregunta o encuentras problemas al intentar ejecutar este ejemplo de realidad aumentada con MindAR, no dudes en escribirme. Puedes contactarme directamente a través de la Fan Page oficial de Realidad Aumentada Empezando Desde Cero.