Domina la Realidad Aumentada: Crea un botón de examinar para cargar tus modelos 3D a tu aplicación WebAR (Augmented Reality)
¿Quieres aprender a hacer aplicaciones de realidad aumentada? ¡Amigo aumentado! Estas en el lugar correcto.
En este artículo, te daremos un tutorial de cómo hacer realidad aumentada utilizando las potentes librerías MindAR y A-Frame, y te mostraremos cómo crear aplicaciones de realidad aumentada personalizables que te permitan cargar tus propios modelos 3D.
Este es un proyecto que te puede servir para varias situaciones, te expongo algunas:
- Hacer una página web donde tus usuarios (clientes) puedan cargar a tu servidor cualquier modelo 3D y visualizarlo en Realidad Aumentada.
- Puedes hacer pruebas de tus modelos 3D en realidad aumentada sin la necesidad de crear varias aplicaciones para cada prueba y error.
- Mostrarle al cliente diferentes tipos de interacciones y modelados en una sola aplicación WebAR sin necesidad de cambiar de aplicativo, navegador o URL.
- Puedes darle el uso que quieras al botón de examinar desde cambiar el marcador (targets – image targets compiler de MindAR) de tu app, cambiar tu modelo 3D, agregar videos o cualquier tipo de contenido para verlo en realidad aumentada.
¿Por Qué Aprender a Hacer Aplicaciones de Realidad Aumentada Ahora?
La Realidad Aumentada o en ingles Augmented Reality no es solo una moda; es una tecnología que está redefiniendo sectores empresariales enteros. Empresas de retail la usan para que pruebes ropa virtualmente, la educación la implementa para crear lecciones interactivas, y el entretenimiento ofrece experiencias de juego sin precedentes.
Saber cómo hacer realidad aumentada te posiciona a la vanguardia de la innovación digital, abriendo un mundo de oportunidades profesionales y creativas. Con herramientas de bajo código y librerías de JavaScript como MindAR y A-Frame, el proceso es más accesible que nunca.
Aqui en Realidad Aumentada Empezando desde cero te enseño gratis como hacer aplicaciones de realidad aumentada.
Síguenos en Facebook en el Fan Page: Facebook
Síguenos en la Comunidad de WhatsApp: WhatsApp
La inclusión de un botón «Examinar» o de cargar un archivo en tu aplicación de realidad aumentada es fundamental para ofrecer una experiencia interactiva y altamente personalizada.
Este simple elemento creado en HTML permite a los usuarios cargar sus propios modelos 3D directamente desde sus dispositivos, ya sea su teléfono móvil (Android o iOS), su tableta (Tablet), computador portátil o de mesa. En lugar de estar limitados a un catálogo predefinido.
los usuarios pueden visualizar sus diseños arquitectónicos, prototipos de productos o creaciones artísticas en el mundo real, transformando una aplicación estática en una herramienta dinámica y adaptable a las necesidades individuales.
Esta capacidad de personalización no solo aumenta la utilidad, sino que también abre un abanico de posibilidades para la creatividad.
Pasemos al codigo HTML y JavaScript:
Para este tutorial descargue desde Sketchfab dos modelos 3D en formato .GLB, te dejo los links de cada uno:
Utilice como marcador para la aplicación la tarjeta de la librería publica de New York en una edición especial de Spiderman.
Este es el código HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Cargador de Modelos 3D con MindAR</title>
<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mind-ar@1.2.2/dist/mindar-image-aframe.prod.js"></script>
<style>
body { margin: 0; overflow: hidden; }
.controls {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 100;
}
input[type="file"] {
display: none; /* Oculta el input por defecto */
}
.file-upload-button {
background-color: #4CAF50; /* Color de fondo */
color: white; /* Color del texto */
padding: 10px 20px; /* Relleno */
border: none; /* Sin borde */
border-radius: 5px; /* Bordes redondeados */
cursor: pointer; /* Cursor de puntero */
font-size: 16px; /* Tamaño de fuente */
box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* Sombra */
}
.file-upload-button:hover {
background-color: #45a049; /* Color al pasar el ratón */
}
</style>
</head>
<body>
<a-scene mindar-image="imageTargetSrc: ./targets.mind;"
color-space="sRGB"
renderer="colorManagement: true, physicallyCorrectLights: true"
vr-mode-ui="enabled: false"
device-orientation-permission-ui="enabled: false">
<a-assets>
</a-assets>
<a-camera position="0 0 0" look-controls="enabled: false"></a-camera>
<a-entity mindar-image-target="targetIndex: 0">
<a-entity id="dynamic-model-container"></a-entity>
<a-text id="no-model-message"
value="No hay un modelo 3D cargado."
color="red"
align="center"
width="2"
position="0 0.5 0"
visible="false"></a-text>
</a-entity>
</a-scene>
<div class="controls">
<label for="model-input" class="file-upload-button">Examinar Modelo 3D</label>
<input type="file" id="model-input" accept=".gltf, .glb, .obj">
</div>
</body>
</html>
Desglosando el Código HTML y CSS:
HTML Básico: Configura la estructura de tu página web, incluyendo el área para la realidad aumentada (a-scene) y un botón para cargar tus modelos 3D (input type=»file»).
MindAR y A-Frame: Estos scripts (<script src=»…»>) son la magia detrás de la RA. MindAR se encarga de reconocer tu marcador de imagen (./targets.mind), mientras que A-Frame facilita la colocación y manipulación de objetos 3D en la escena.
Controles de Carga (<div class=»controls»>): El botón «Examinar Modelo 3D» no es más que una etiqueta (<label>) estilizada que activa un campo de entrada de archivo oculto (<input type=»file»>). Esto permite al usuario seleccionar un archivo GLTF, GLB o OBJ directamente desde su escritorio.
Contenedor del Modelo (<a-entity id=»dynamic-model-container»>): Este es el «escenario» virtual donde aparecerá tu modelo 3D una vez que el marcador sea detectado.
Mensaje de Retroalimentación (<a-text id=»no-model-message»>): Una mejora crucial. Este texto («No hay un modelo 3D cargado.») aparece sobre el marcador si este es detectado y aún no has seleccionado un modelo 3D, guiando al usuario. Desaparece automáticamente cuando cargas un modelo o cuando el marcador ya no está a la vista.
Ahora pasemos al JavaScript, pero antes te recomiendo este post sobre iluminación en tus aplicaciones de realidad aumentada: https://blog.realidad-aumentada.com.co/controla-la-iluminacion-de-modelos-3d-en-realidad-aumentada/
<script>
document.addEventListener('DOMContentLoaded', () => {
const modelInput = document.getElementById('model-input');
const dynamicModelContainer = document.getElementById('dynamic-model-container');
const noModelMessage = document.getElementById('no-model-message');
let modelLoaded = false;
modelInput.addEventListener('change', (event) => {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = (e) => {
const modelUrl = e.target.result;
loadModel(modelUrl, file.name);
};
reader.readAsDataURL(file);
}
});
function loadModel(modelUrl, fileName) {
// Elimina cualquier modelo previamente cargado
while (dynamicModelContainer.firstChild) {
dynamicModelContainer.removeChild(dynamicModelContainer.firstChild);
}
let modelComponent = '';
if (fileName.toLowerCase().endsWith('.gltf') || fileName.toLowerCase().endsWith('.glb')) {
modelComponent = 'gltf-model';
} else if (fileName.toLowerCase().endsWith('.obj')) {
modelComponent = 'obj-model';
} else {
alert('Formato de modelo 3D no compatible. Por favor, sube un .gltf, .glb o .obj.');
modelLoaded = false;
// **Importante:** Si hay un error, el mensaje debe seguir siendo visible si el marcador está activo.
// NoModelMessage.setAttribute('visible', 'true'); // Opcional: para que el mensaje reaparezca si hubo error
return;
}
const modelEntity = document.createElement('a-entity');
modelEntity.setAttribute(modelComponent, `src: url(${modelUrl});`);
modelEntity.setAttribute('scale', '0.190 0.190 0.190');
modelEntity.setAttribute('position', '0 0 0');
modelEntity.setAttribute('rotation', '90 0 0');
dynamicModelContainer.appendChild(modelEntity);
console.log(`Modelo 3D "${fileName}" cargado exitosamente.`);
modelLoaded = true;
// **¡Nuevo!** Oculta el mensaje inmediatamente después de cargar un modelo
noModelMessage.setAttribute('visible', 'false');
}
const sceneEl = document.querySelector('a-scene');
const targetEl = document.querySelector('a-entity[mindar-image-target]');
targetEl.addEventListener('targetFound', () => {
// Solo muestra el mensaje si NO hay un modelo cargado
if (!modelLoaded) {
noModelMessage.setAttribute('visible', 'true');
}
});
targetEl.addEventListener('targetLost', () => {
// Siempre oculta el mensaje cuando el marcador se pierde
noModelMessage.setAttribute('visible', 'false');
});
sceneEl.addEventListener('loaded', () => {
// Asegura que el mensaje esté oculto al inicio, antes de que se detecte el marcador
noModelMessage.setAttribute('visible', 'false');
});
});
</script>
FileReader: Es la clave para leer los archivos 3D seleccionados localmente por el usuario y convertirlos en URLs de datos que A-Frame puede entender.
loadModel(): Esta función dinámica elimina cualquier modelo anterior y carga el nuevo modelo 3D en el dynamic-model-container. Soporta formatos populares como GLTF/GLB (muy recomendados por su auto-contención de texturas) y OBJ.
Eventos de Marcador: Los oyentes de eventos targetFound y targetLost de MindAR son esenciales. Controlan la visibilidad del mensaje y aseguran que tu experiencia de RA sea interactiva y útil.
así deberíamos de ver nuestra aplicación de realidad aumentada con los dos modelos que estamos cargando.
Aquí les dejo el short de YouTube para que puedan ver el resultado en video.