Diorama: una habitación 3D hecha de primitivas, no de modelos

Acabamos de publicar una nueva pieza en el Lab — Diorama, una habitación en corte isométrico que puedes reorganizar, recolorear y revestir directamente en el navegador. Parece un render de diseño. No lo es. No hay un solo archivo de modelo ni imagen de textura detrás. Cada objeto está construido en código, y aquí está por qué lo hicimos así.

Sin pipeline de assets, a propósito

La forma habitual de poner muebles en una escena 3D es modelarlos (o comprarlos), exportar archivos .glb, cargarlos en runtime y gestionar un conjunto de texturas. Eso es un pipeline: archivos que alojar, licencias que seguir, tiempo de carga que pagar, y un acoplamiento rígido entre el arte y el código. Para un experimento pequeño y autónomo no queríamos nada de eso.

Así que cada pieza — el sofá, la estantería, el escritorio, la planta — es un THREE.Group montado a partir de primitivas de caja redondeada (RoundedBoxGeometry) más algunos cilindros e icosaedros. Un sofá es una base, dos brazos, un respaldo, cojines y cuatro patas. Una estantería es un panel trasero, laterales, baldas horizontales y unos cuantos sólidos decorativos. Es Lego, en código. Todo el catálogo son unos cientos de líneas y carga al instante porque no hay nada que descargar.

Hacer que las primitivas parezcan caras

Las cajas low-poly pueden parecer baratas, o pueden parecer un render de estudio. La diferencia es casi toda iluminación y composición.

• Cámara ortográfica en un ángulo isométrico. Ese corte plano de casa de muñecas viene de una proyección ortográfica, no de perspectiva. Dos paredes forman una L; la esquina abierta mira al espectador. Limitamos la órbita para que el corte siempre funcione.
• Una luz principal cálida con sombras suaves. Una sola luz direccional con un mapa de sombras PCF-soft de 2K hace la mayor parte del trabajo, más un relleno de hemisferio frío para que las sombras no sean negro muerto.
• Bordes redondeados en todo. RoundedBoxGeometry en lugar de un BoxGeometry duro capta la luz en cada bisel. Es el mayor salto de "arte de programador" a "diseñado".
• Una cadena de posprocesado contenida. Bloom en las pantallas y la lámpara, un pase de contorno para la selección, tone mapping ACES. Nada pesado.

Texturas dibujadas en runtime

Lo único que no se puede hacer con geometría es un suelo de madera o una alfombra con patrón. Tampoco enviamos imágenes para eso — se pintan en un <canvas> cuando carga la página (tablas con veta, una alfombra a cuadros) y se usan como CanvasTexture. Cambias el tono del suelo y basta con redibujar el canvas. Sin archivos, y como cada material está generado, recolorear cualquier cosa es una línea fijando el color.

La parte interactiva sale gratis

Como los muebles son código con metadatos, las funciones de edición casi salen solas. Cada pieza sabe su huella y qué materiales son pintables. Arrastrar hace raycast sobre el plano del suelo y encaja en una rejilla. Recolorear escribe en las instancias de material de la propia pieza — clonadas por colocación, para que nada se contamine entre copias. Los temas fijan paredes, suelo, alfombra y sofá en una sola llamada. La disposición persiste en localStorage, y la parte que más nos gusta: la habitación entera se codifica en un enlace compartible. Ese truco merece su propio artículo.

Pruébalo

Ve a mover algún mueble: el Diorama en vivo. Es open source — está todo en GitHub, sin build, Three.js directamente desde un CDN. Abre catalog.js y encontrarás todo el conjunto de muebles en un solo lugar.