¿Te imaginas poder cambiar el color de unas zapatillas mientras las ves flotando en tu escritorio? Ya no es ciencia ficción. Las grandes marcas lo están usando para aumentar sus conversiones, y hoy tú aprenderás a construir esta tecnología desde cero utilizando herramientas web gratuitas y accesibles.
En este tutorial, crearemos un Configurador de Productos en Realidad Aumentada (WebAR). No solo visualizaremos un modelo 3D, sino que interactuaremos con él, permitiendo al usuario diseñar su propio estilo cambiando los colores de la suela y el cuerpo de forma independiente.
¿Ya probaste la herramienta gratuita para hacer realidad aumentada? Te dejo aquí el link: Editor AR Online: Modelos 3D (GLB, GLTF) y Video (MP4)
¿Qué vamos a construir?
Desarrollaremos una aplicación web que:
- Detecta un marcador (Image Tracking) con la cámara del celular.
- Superpone un modelo 3D de una zapatilla de alta calidad.
- Muestra una interfaz gráfica (UI) con botones y selectores de color.
- Permite pintar partes específicas del modelo (Cuerpo y Suela) en tiempo real sin recargar la página.
Tecnologías Utilizadas
- MindAR (v1.2.5): El motor de rastreo de imágenes que se ejecuta en el navegador. Es ligero, rápido y no requiere instalar apps.
- A-Frame (v1.4.2 – 1.5.0): Nuestro framework para crear la escena 3D. Usamos esta versión específica por su estabilidad en el manejo de materiales y luces.
- HTML5/CSS3: Para crear la interfaz de usuario flotante (botones y sliders) que se superpone a la cámara.
La Lógica: ¿Cómo funciona el cambio de color?
El desafío principal en estos proyectos es que un modelo 3D suele ser un solo bloque. Para poder pintar la suela de un color y el cuerpo de otro, necesitamos una estrategia inteligente:
- Nomenclatura en el Modelo 3D: El secreto está en el archivo .glb. Idealmente, las mallas deben tener nombres específicos como suela_mesh, cuerpo_mesh, detalles_mesh, etc. Espero entiendas la idea.
- El Componente color-changer: Hice un script personalizado en A-Frame que actúa como un «pintor inteligente».
Este componente nos permite:
- Escucha los eventos de la interfaz.
- Recorre (traverse) toda la estructura interna del modelo 3D.
- Busca las piezas que coincidan con los nombres clave (o nombres genéricos como ‘sole’ como respaldo – Para modelos descargados de internet).
- Clona el material (para no afectar otras piezas) y le aplica el nuevo color hexadecimal manteniendo las sombras y texturas originales.
Iluminación de Estudio
Para que los colores se vean vibrantes y no oscuros (un problema común en AR), hemos configurado un esquema de iluminación de tres puntos: una luz ambiental base fuerte, una luz principal direccional y una luz de relleno suave.
Ahora si comencemos con el código fuente de este tutorial.
Para este ejemplo utilice este modelo 3D: https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/MaterialsVariantsShoe/glTF-Binary/MaterialsVariantsShoe.glb
COMENCEMOS CON EL CODIGO DEL TUTORIAL WebAR
Iniciemos con el Javascript.
Recuerda que si quieres descargar estos proyectos estructurados y con cada línea de código comentada y explicada para mejorar tu aprendizaje, lo puedes encontrar en mi PATREON.
<script>
document.addEventListener("DOMContentLoaded", function() {
const sneakerEntity = document.querySelector('#zapatilla-entity');
const asignarColor = (id, codigoHex, nombre) => {
const boton = document.getElementById(id);
if (boton) {
boton.addEventListener("click", () => {
console.log("Clic en " + nombre);
sneakerEntity.emit('cambiarColor', {color: codigoHex});
});
}
};
asignarColor("btn-original", "#FFFFFF", "Original");
asignarColor("btn-rojo", "#FF0000", "Rojo");
asignarColor("btn-azul", "#0055FF", "Azul");
asignarColor("btn-negro", "#111111", "Negro");
asignarColor("btn-amarillo", "#FFD700", "Amarillo");
asignarColor("btn-verde", "#32CD32", "Verde Lima");
asignarColor("btn-morado", "#800080", "Morado");
});
AFRAME.registerComponent('color-changer', {
init: function() {
this.el.addEventListener('cambiarColor', (evento) => {
const nuevoColor = evento.detail.color;
const mesh = this.el.object3D;
if (!mesh) return;
console.log("Cambiando color a:", nuevoColor);
mesh.traverse((node) => {
if (node.isMesh) {
if (!node.material.isCloned) {
node.material = node.material.clone();
node.material.isCloned = true;
}
node.material.color.set(nuevoColor);
}});});}});
</script>Ahora pasemos a los estilos CSS que nos ayudan a que nuestra App de realidad aumentada se vea profesional.
<style>
body { margin: 0; overflow: hidden; font-family: 'Arial', sans-serif; }
.ui-container {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 20px;
box-sizing: border-box;
display: flex;
justify-content: center;
gap: 10px; /* Reducimos un poco el espacio para que quepan todos */
flex-wrap: wrap; /* Permite que bajen a otra línea si no caben en pantalla */
z-index: 10;
background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
}
.color-btn {
width: 45px; /* Un poco más pequeños para que quepan mejor */
height: 45px;
border-radius: 50%;
border: 2px solid white;
box-shadow: 0 4px 10px rgba(0,0,0,0.5);
cursor: pointer;
transition: transform 0.2s;
}
.color-btn:active { transform: scale(0.9); }
#btn-original {
background-color: #FFFFFF;
background-image: url('https://cdn-icons-png.flaticon.com/512/1828/1828919.png');
background-size: 60%;
background-repeat: no-repeat;
background-position: center;
}
#btn-rojo { background-color: #FF0000; }
#btn-azul { background-color: #0055FF; }
#btn-negro { background-color: #111111; }
#btn-amarillo { background-color: #FFD700; }
#btn-verde { background-color: #32CD32; }
#btn-morado { background-color: #800080; }
.header-ui {
position: absolute;
top: 20px;
left: 0;
width: 100%;
text-align: center;
color: white;
text-shadow: 0 2px 4px rgba(0,0,0,0.8);
z-index: 10;
pointer-events: none;
}
.header-ui h1 { margin: 0; font-size: 24px; letter-spacing: 1px; }
.header-ui p { margin: 5px 0 0; font-size: 14px; opacity: 0.8; }
</style>Ya para finalizar solo queda agregar el HTML y las etiquetas que nos permiten que todo se pueda visualizar en realidad aumentada. Aquí es donde MindAR hace su magia.
<body> <div class="header-ui"> <h1>Elige tu estilo</h1> </div> <div class="ui-container"> <div id="btn-original" class="color-btn" title="Original"></div> <div id="btn-rojo" class="color-btn" title="Rojo"></div> <div id="btn-azul" class="color-btn" title="Azul"></div> <div id="btn-negro" class="color-btn" title="Negro"></div> <div id="btn-amarillo" class="color-btn" title="Amarillo"></div> <div id="btn-verde" class="color-btn" title="Verde"></div> <div id="btn-morado" class="color-btn" title="Morado"></div> </div> <a-scene mindar-image="imageTargetSrc: ./targets.mind; maxTrack: 2; filterMinCF:1; filterBeta:10000; warmupTolerance:0.5; missTolerance:0.5;" color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false"> <a-assets> <a-asset-item id="zapatilla-glb" src="AQUI LA DIRECCION DE TU MODELO.GLB"></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-entity id="zapatilla-entity" gltf-model="#zapatilla-glb" rotation="0 -90 0" position="0 0 0" scale="5 5 5" color-changer animation="property: rotation; to: 0 270 0; loop: true; dur: 15000; easing: linear"> </a-entity> <a-circle color="#000" opacity="0.4" radius="0.6" rotation="-90 0 0" position="0 -0.1 0" material="shader: flat; transparent: true"> </a-circle> <a-light type="directional" position="2 4 1" intensity="1.5"></a-light> <a-light type="ambient" intensity="0.8"></a-light> </a-entity> </a-scene> </body>
Al finalizar tu aplicación se verá así:
🚀 Lleva este proyecto AR al Siguiente Nivel
¿Te ha gustado este tutorial? ¡Esto es solo la punta del iceberg!
Si quieres descargar el modelo 3D optimizado (con las mallas separadas listas para usar), o acceder al código avanzado con cada linea comentada que incluye funciones de slide y selector de colores, te invito a unirte a nuestra comunidad exclusiva.
En Patreon encontrarás:
- Archivos fuente completos con cada línea de código comentada para mejorar tu aprendizaje.
- Modelos 3D preparado para AR.
- Soporte directo para tus dudas.
- Tutoriales avanzados que no publico aquí.
¡Únete y conviértete en un experto de la Realidad Aumentada Web!
Así se podría ver tu app con el código de Patreon.
Link directo a mi patreon: Realidad Aumentada Empezando Desde Cero – Ingcarlosreina | Tutoriales de Realidad Aumentada – Augmented Reality Tutorials | Patreon