Experimentos web interactivos en Three.js, WebGL y AR de Juan Ramírez

TRABAJOS SELECCIONADOS

Experimentos

Experimentos en Three.js, WebGL y AR.

Visual intro experiments 1
Three.js
Experiencia Web + AR educativa

Web + AR Educativo

Web + AR Educativo es un prototipo 3D interactivo pensado para explicar el proceso waste-to-energy de Veolia en pasos claros. El experimento busca transformar contenido técnico en un recorrido visual fácil de seguir para públicos no especializados. Desarrollado con Three.js y patrones de interacción web, valida cómo la narrativa espacial y la animación ligera pueden mejorar comprensión y retención de procesos industriales complejos.

Three.js
Bottle Simulation

Bottle Simulation

Bottle Simulation explora render de producto en tiempo real para materiales translúcidos, reflejos y sensación de fluido. El objetivo fue medir calidad visual sin perder rendimiento en navegador. Construido con Three.js, ajustes de iluminación y pruebas de shading, este experimento ayudó a definir decisiones de lookdev para futuras piezas de producto que necesitan acabados premium y movimiento creíble en web.

Three.js / WebXR
Three.js AR tracking cube

Cubo AR Tracking

Cubo AR Tracking es una demo técnica de realidad aumentada con seguimiento por marcador y render en tiempo real. El experimento se enfocó en validar estabilidad de tracking, latencia visual y controles básicos de interacción en WebXR. Desarrollado con Three.js y flujos AR web, funcionó como base para pruebas rápidas de activaciones que requieren despliegue liviano y comportamiento confiable en móviles.

3D Interactive Stage
Parense de Manos

Parense de Manos

Parense de Manos es un mapa 3D interactivo diseñado para comunicar accesos, ubicaciones y circulación de un evento masivo en Vélez. El objetivo fue mejorar orientación y lectura logística frente a planos estáticos tradicionales. Se desarrolló como prototipo web optimizado para mobile y desktop, equilibrando claridad espacial, navegación rápida y performance para usuarios que consultan información antes y durante el evento.

Animated GLB
Book 21

Book 21

Book 21 es una prueba de GLB animado centrada en optimización de assets y consistencia visual en navegador. El experimento validó timing de animación, comportamiento de materiales y compresión de archivos para reducir peso sin perder calidad percibida. Sirvió para establecer parámetros reutilizables de exportación y carga en proyectos web 3D que requieren narrativa visual con tiempos de carga controlados.

A-frame
Lights and Shadows

Lights and Shadows

Lights and Shadows es un estudio controlado de iluminación para evaluar contraste, profundidad y respuesta de materiales en escenas inmersivas. Usando A-Frame y entornos orientados a WebXR, compara intensidades y direcciones de luz para mejorar legibilidad visual. El resultado funciona como guía base para construir jerarquía de foco y atmósfera antes de pasar a experiencias de producción más complejas.

8th Wall
Realidad aumentada con image target

RA Image Target

RA Image Target es una experiencia de realidad aumentada web hecha con 8th Wall Studio. Al apuntar la cámara del celular a la imagen, aparecen anclados a ella un video, modelos 3D animados y un occluder; el video solo se reproduce mientras la imagen está siendo detectada. Incluye un botón para sacar foto (tocar) o grabar video (mantener), y explora cómo el tracking de imágenes puede convertir una obra impresa en una capa interactiva para compartir, sin instalar ninguna app.

[Scale]