La Realidad Aumentada (AR) en la web ha abierto un mundo de posibilidades, permitiéndonos superponer información digital sobre el mundo real con solo un navegador. MindAR y A-Frame son herramientas fantásticas para esto, pero muchos demos se quedan en lo estático: siempre muestran el mismo modelo 3D o la misma imagen.
¿Y si quisiéramos que el usuario personalizara la experiencia?
Crea realidad aumentada en minutos y fácilmente sin código con esta herramienta free online: Editor AR Online: Modelos 3D (GLB, GLTF) y Video (MP4)
Hoy vamos a romper esa barrera. En este tutorial, crearemos una aplicación de Realidad Aumentada que permite a los usuarios escribir su propio texto, cargar su propia imagen (JPG/PNG) y verlos instantáneamente en AR.
Pero no nos detendremos ahí. También añadiremos controles en tiempo real para cambiar el tamaño y el color del texto usando un slider y un selector de color.
Menos charla y más código. ¡Manos a la obra!
¿Qué Necesitarás?
Antes de empezar, asegúrate de tener estas tres cosas:
- Un Marcador de MindAR: Necesitas un marcador compilado (un archivo .mind). Si no tienes uno, puedes compilar tu propia imagen de objetivo en el compilador de imágenes .mind oficial de Realidad Aumentada Empezando Desde Cero: Compilador de Marcadores AR | Crea Realidad Aumentada Gratis
- Un Editor de Código: Recomiendo Visual Studio Code, que es gratuito.
- Un Servidor Local: Por razones de seguridad del navegador (CORS), no puedes simplemente abrir el index.html haciendo doble clic. La forma más fácil de solucionarlo es usar la extensión «Live Server» en VS Code (das clic derecho en tu index.html y eliges «Open with Live Server») o puedes utilizar algún complemento para tu navegador.
La Estructura del Proyecto
Para mantener nuestro código limpio y organizado, lo dividiremos en cuatro archivos.
- index.html: El esqueleto de nuestra aplicación. Contendrá la interfaz de usuario (UI) y la escena de A-Frame.
- style.css: La «pintura». Hará que nuestra interfaz de usuario se vea bien y flote sobre la vista de la cámara.
- script.js: El «cerebro». Toda la lógica que conecta nuestra UI con la escena de AR vivirá aquí.
- Archivo marcador en formato .mind
Crea estos cuatro archivos en una misma carpeta, junto con tu archivo targets.mind.
Ya viste como puedes hacer realidad aumentada con tus fotografías. Aprende aquí como hacerlo:
- De Foto a Realidad Aumentada 3D: Magia con A-Frame y MindAR
- Crea realidad aumentada utilizando múltiples fotografías
Vamos a crear este panel para nuestra aplicación de realidad aumentada WebAR utilizando MindAR.
El Esqueleto: index.html
Este archivo es el punto de entrada. Carga todas las librerías necesarias (A-Frame, MindAR), enlaza nuestros archivos CSS y JS, y define la estructura.
La clave aquí es que tenemos dos partes principales en el <body>:
- Un <div id=»uiContainer»>: Contiene nuestros controles HTML (inputs, botones, sliders).
- Un <a-scene>: Contiene nuestros objetos de Realidad Aumentada (la imagen y el texto).
<div id="uiContainer"> <label for="userText">Tu Texto:</label> <input type="text" id="userText" placeholder="Escribe algo..." /> <label for="userImage">Tu Imagen:</label> <input type="file" id="userImage" accept="image/jpeg, image/png" /> <label for="textSize">Tamaño:</label> <input type="range" id="textSize" min="0.5" max="3" step="0.1" value="1" /> <label for="textColor">Color:</label> <input type="color" id="textColor" value="#000000" /> <button id="updateButton">Actualizar Texto/Imagen</button> </div>
La siguiente sección es la encargada de la realidad aumentada.
<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-assets> <a-camera position="0 0 0" look-controls="enabled: false"></a-camera> <a-entity mindar-image-target="targetIndex: 0"> <a-image id="dynamicImage" src="" position="0 0 0" height="1" width="1" ></a-image> <a-text id="dynamicText" value="Tu texto aquí" color="black" align="center" width="2" position="0 0.7 0" scale="1 1 1" ></a-text> </a-entity> </a-scene>
La Pintura: style.css
Este CSS usa position: absolute para sacar la UI del flujo normal y superponerla en la parte superior de la pantalla. Usamos z-index: 10 para asegurarnos de que siempre esté por encima de la vista de la cámara.
El display: grid es un truco moderno de CSS para alinear perfectamente las etiquetas y los campos de entrada en columnas.
#uiContainer {z-index: 10;display: grid;}El Cerebro: script.js
Aquí es donde ocurre la magia. Este script actúa como el «puente» entre nuestro HTML estándar y nuestra escena de A-Frame.
Lo primero que hacemos es esperar al evento DOMContentLoaded para asegurarnos de que todo el HTML está cargado antes de intentar controlarlo.
Dividimos la lógica en tres partes:
- Referencias: Guardamos las entidades de A-Frame (<a-text> y <a-image>) en variables para un acceso rápido.
- Listener del Botón (click): Cuando se presiona el botón «Actualizar», este código se ejecuta. Lee el valor del campo de texto y el archivo de imagen, y los «inyecta» en la escena AR usando .setAttribute().
- Listeners en Tiempo Real (input): Para el slider y el selector de color, usamos el evento input, que se dispara inmediatamente cada vez que el valor cambia. Esto da una increíble sensación de control en vivo, ya que el usuario ve cómo el texto cambia de tamaño y color al instante.
La parte más ingeniosa es cómo manejamos la imagen: usamos un FileReader de JavaScript para convertir el archivo local del usuario en una «Data URL» (una larga cadena de texto Base64). A-Frame es lo suficientemente inteligente como para entender esta cadena de datos como una fuente de imagen (src), ¡todo sin tener que subir el archivo a un servidor!
<script>
document.addEventListener('DOMContentLoaded', () => {
const textEntity = document.getElementById('dynamicText');
const imageEntity = document.getElementById('dynamicImage');
const updateButton = document.getElementById('updateButton');
updateButton.addEventListener('click', () => {
const textInput = document.getElementById('userText');
if (textEntity && textInput.value) {
textEntity.setAttribute('value', textInput.value);
}
const imageInput = document.getElementById('userImage');
if (imageEntity && imageInput.files && imageInput.files[0]) {
const file = imageInput.files[0];
const reader = new FileReader();
reader.onload = (e) => {
imageEntity.setAttribute('src', e.target.result);
};
reader.readAsDataURL(file);
}
});
const sizeSlider = document.getElementById('textSize');
sizeSlider.addEventListener('input', (event) => {
const newSize = event.target.value;
textEntity.setAttribute('scale', `${newSize} ${newSize} ${newSize}`);
});
const colorPicker = document.getElementById('textColor');
colorPicker.addEventListener('input', (event) => {
const newColor = event.target.value;
// El color se controla con 'color'
textEntity.setAttribute('color', newColor);
});
});
</script>¡Y ahí lo tienes! Acabas de construir una aplicación de Realidad Aumentada Web totalmente interactiva. Has aprendido a:
- Separar la UI (HTML) de la escena AR (A-Frame).
- Usar JavaScript como puente para comunicar ambas partes.
- Cargar archivos de imagen locales en una escena AR usando FileReader.
- Manipular atributos de A-Frame (como value, src, scale y color) en tiempo real.
Este proyecto es una base fantástica. Desde aquí, podrías añadir controles para cambiar la posición, la rotación, o incluso permitir al usuario elegir entre diferentes fuentes de texto.
¡Ahora ve y crea!
DESCARGAR TODOS LOS ARCHIVOS DESDE MI PATREON
Código Fuente Completo: App WebAR – Como agregar y editar texto e imágenes en realidad aumentada (HTML, CSS y JS)
Muchísimas gracias por tu increíble apoyo. Es gracias a ti que puedo dedicar tiempo a investigar, crear estos prototipos y compartir el conocimiento más avanzado en WebAR.
Como lo prometí en el artículo del blog, aquí no hay secretos. Tienes acceso al proyecto completo, funcional y con cada línea de código comentada para que entiendas exactamente qué hace y por qué.
Con este código, podrás crear tu propia aplicación de Realidad Aumentada que detecta múltiples marcadores (4 en este caso) y permite al usuario asignar un modelo 3D diferente a cada uno, todo en una sola sesión y desde el navegador.
Da clic en la imagen para ser redireccionado a mi Patreon.
¿Qué incluye esta recompensa?
- Archivo index.html
- Archivo CSS
- Archivo Script.js
- Cada línea de código de los archivos index.html, css y Script.js comentada para que comprendas y aprendas que está haciendo el código fuente.
Recuerda que puedes agregarte a la comunidad desde 1 dólar, 5 dólares y 15 dólares. Tu apoyo es muy importante para mí. Gracias por adelantado.