2026 · Three.js · WebGL · Postprocessing · Procedural

Diorama — una habitación que puedes reorganizar

Una habitación en corte isométrico, renderizada en tiempo real. Arrastra muebles por una rejilla, cambia el color de cada pieza, reviste paredes y suelo, y cambia el ambiente entero con un clic. Totalmente procedural — sin modelos, sin texturas, sin build.

Abrir demo en vivo Ver en GitHub
— LIVE DEMO
Fullscreen ↗

Diorama es una habitación en corte isométrico que amueblas tú mismo. Abre en un estudio oscuro — sofá, estantería, un escritorio iluminado por su propio monitor — y cada objeto es tuyo para mover, recolorear y revestir en tiempo real.

Arrastra cualquier pieza y se desliza por una rejilla. Selecciónala y aparece una paleta: pon el sofá terracota, la estantería en nogal. Reviste las paredes con pintura lisa o listones de madera, cambia el suelo entre cuatro tonos, cambia la alfombra, enciende las lámparas. O salta el detalle y pulsa un tema — Studio, Warm, Cool — para vestir la habitación entera de una vez. Tu disposición se guarda en el navegador, esperándote cuando vuelves.

Es todo procedural. No hay archivos de modelo ni imágenes de textura en disco — cada sofá, estantería y planta se construye a partir de primitivas de caja redondeada en código, y las tablas del suelo y el patrón de la alfombra se dibujan en un canvas en tiempo real. El aspecto viene de una cámara ortográfica en un ángulo isométrico, una luz principal cálida con sombras suaves, y una cadena de posprocesado que hace brillar las pantallas y dibuja un contorno naranja alrededor de lo que seleccionas.

Three.js, directamente desde un CDN. Sin build. Ábrelo a pantalla completa o lee el código.