Todos los proyectos

Loft interactivo — Escena 3D

Un cuarto 3D armado a mano donde el hover te enseña qué clickear: sin tutorial, sin capa de instrucciones.

Rol
Diseño + Frontend
Año
2026
Disciplinas
3D / WebGL, Frontend Development, Interaction Design
Loft interactivo — Escena 3D

01

El problema

El 3D interactivo en la web suele fallar de dos maneras: se ve bien pero no sabés qué podés tocar, o se explica con una capa de instrucciones que nadie lee. Quería ver si una escena podía enseñar sus propias affordances solo con luz.

02

La solución

Armé un loft con modelos con licencia CC e hice del hover todo el tutorial: cualquier cosa interactiva se ilumina cuando el cursor pasa por encima, así que explorar enseña las reglas. Al clickear un mueble se abre un panel de detalle; cada objeto chico de la mesa tiene su propio comportamiento; un Shiba se mueve por el espacio. La navegación es con órbita y zoom con la rueda, y alejar el zoom te saca de cualquier objeto, así que no hay callejones sin salida. La geometría está comprimida con DRACO para que la escena cargue con una conexión normal.

  • Resaltado en hover como único tutorial
  • Muebles clickeables con paneles de detalle
  • Objetos con comportamiento propio y un Shiba que pasea
  • Navegación con órbita + rueda, con el zoom out como salida universal
  • Geometría comprimida con DRACO para tiempos de carga razonables

03

Resultado

Funciona en el navegador, sin plugins ni instalación. La escena es un banco de pruebas para patrones de interacción en 3D: cómo señalar qué se puede tocar, cómo dejar que alguien salga de un estado sin botón de volver y cómo hacer que una escena cargada de assets cargue rápido.

Stack

Nuxt 4 · Three.js · WebGL · GLTF / DRACO · TypeScript

Más proyectos

  1. 2026

    Vinyl Room — Tocadiscos 3D

    Una caja de discos y un tocadiscos en 3D. Elegís un disco, lo ponés en el plato y suena su preview de 30 segundos mientras gira.

  2. 2026

    Cubo de proyectos — Portfolio para resolver

    Un cubo tipo Rubik donde cada una de sus seis caras es uno de mis proyectos. Arrastrá una cara para girarla, resolvelo en pocos movimientos o saltá directo a un proyecto.

  3. 2026

    Jelly — Estrella de mar blandita en WebGPU

    Una estrella de mar translúcida que vive en tu navegador. Movete para hacerte amiga, agarrá un brazo, estiralo y soltalo: un experimento chico de física soft-body y renderizado WebGPU con Three.js.

Para clientes

¿Tenés un proyecto?

Contame qué querés construir. En una llamada corta vemos si encaja y cómo arrancar.

Agendar una llamada

Para empresas

¿Estás armando un equipo?

Si buscás a alguien que diseñe y programe producto, acá está mi recorrido completo.

Ver CV completo

Trabajemos juntos

Ailen Gonzalez

Design Engineer & Frontend
Córdoba, Argentina

DiseñoCódigoIA

© 2026 · Diseñado y programado por Ailen Gonzalez