Floorplan 3D: una herramienta de diseño de viviendas en un solo archivo
Descubre un diseñador de planos basado en el navegador que combina una distribución precisa de muebles en 2D con recorridos interactivos en Three.js, todo en un único archivo HTML.
Planificar una habitación en 2D es rápido, pero puede ser difícil saber si una distribución resultará cómoda cuando estés dentro. floorplan-3d salva esa distancia con una herramienta de diseño de viviendas basada en el navegador: organiza un plano, modifica paredes y mide dimensiones en 2D; después, cambia a una escena interactiva de Three.js para inspeccionar el resultado desde arriba o recorrerlo.
El proyecto es excepcionalmente fácil de probar. La aplicación es un único archivo index.html, creado con HTML, CSS y JavaScript nativos, sin frameworks ni procesos de compilación. Clona el repositorio y abre el archivo en un navegador; no es necesario instalar paquetes. La principal excepción es el motor 3D, que carga Three.js r160 desde jsDelivr, así que la primera vista 3D requiere conexión a Internet.
Pasa de un plano con medidas a una habitación que puedas explorar
El editor 2D está diseñado para trabajar con distribuciones prácticas, no solo para hacer bocetos. Muestra el plano a escala 1:60 o 1:100 y utiliza milímetros para las dimensiones. Su biblioteca de más de 60 elementos de mobiliario y electrodomésticos incluye dormitorios, salas de estar, cocinas y comedores, baños, electrodomésticos y espacios de estudio u ocio. Arrastra los elementos al plano, muévelos o cambia su tamaño y gíralos; si mantienes pulsada la tecla Shift, podrás girarlos libremente. Los muebles también pueden ajustarse automáticamente a las paredes.
La herramienta de medición permite comprobar directamente en el plano los espacios libres y la longitud de las paredes. Se ajusta a las paredes cercanas y, al mantener pulsada la tecla Shift, restringe las mediciones a direcciones horizontales o verticales. Para planificar renovaciones, se pueden marcar por separado las paredes no portantes que se propone retirar y las paredes portantes. Los controles de visibilidad permiten ocultar o mostrar cotas, nombres de habitaciones, muebles, la cuadrícula y paredes portantes según sea necesario.
Esta distinción es importante: el editor puede ayudar a visualizar un cambio propuesto, pero una herramienta de dibujo no es una evaluación estructural. Considera las marcas de retirada de paredes como anotaciones de diseño y consulta a un profesional cualificado antes de realizar cambios estructurales.
Inspecciona el diseño en 3D interactivo
Pulsa T para cambiar entre el plano 2D y la escena 3D. La vista 3D ofrece perspectivas aéreas, oblicuas y cenitales. También puedes seleccionar una habitación de una lista para que la cámara se desplace hasta ella. Para una inspección más inmersiva, el modo de recorrido permite usar WASD y el ratón en ordenadores, y un joystick virtual en dispositivos táctiles. Puedes abrir y cerrar las puertas mientras exploras.
La escena va más allá de una representación esquemática. El proyecto incluye modelos de muebles detallados, con características como juntas y tiradores en las puertas de los armarios, cabeceros de cama tapizados y materiales reflectantes de metal y cerámica. También puedes seleccionar y mover muebles en 3D; los cambios se sincronizan con la distribución 2D. La visualización de las paredes puede alternar entre la altura completa y una vista en sección, mientras que un control deslizante de hora del día y la iluminación nocturna ayudan a mostrar cómo se percibe el espacio en distintas condiciones.
Compara materiales y lleva un registro de los cambios
La aplicación calcula automáticamente la superficie de cada habitación y la superficie interior útil total. A cada habitación se le puede asignar un acabado para el suelo, como madera, baldosas, mármol, terrazo o moqueta. Las estimaciones de materiales se basan en la superficie de la habitación más un 5 % adicional para desperdicios, lo que ofrece un punto de partida útil para hacer presupuestos aproximados.
La edición incluye funciones para deshacer y rehacer, y los planos se guardan automáticamente en el localStorage del navegador. Puedes exportar una imagen PNG para compartirla, o exportar e importar el plano completo en formato JSON. La interfaz está disponible en chino e inglés; el selector de idioma se encuentra en la esquina superior derecha y recuerda la opción elegida.
Como localStorage es local al navegador, no sustituye a una copia de seguridad portátil. Exporta el JSON si quieres trasladar un diseño a otro navegador o conservar una copia fuera del perfil actual del navegador.
Cómo empezar
Clona el repositorio y abre index.html directamente o ejecuta un pequeño servidor estático:
git clone <repository-url>
cd <repository-directory>
python3 -m http.server 8000
Visita http://localhost:8000 en el navegador. El servidor es opcional, pero puede hacer que el comportamiento de los archivos locales sea más uniforme entre navegadores. El editor 2D funciona sin pasos de compilación; para cargar la primera vista 3D se necesita conexión a la red, ya que Three.js se descarga desde jsDelivr.
Atajos de teclado útiles
| Tecla | Acción |
|---|---|
T |
Cambiar entre 2D y 3D |
V / M / X |
Seleccionar, medir o marcar paredes para modificarlas |
R / Shift+R |
Girar los muebles seleccionados 90° en el sentido de las agujas del reloj o en sentido contrario |
Delete / Backspace |
Eliminar los muebles seleccionados |
Ctrl/⌘ + D |
Duplicar los muebles seleccionados |
Ctrl/⌘ + Z / Ctrl/⌘ + Shift + Z |
Deshacer / rehacer |
F |
Ajustar el plano a la ventana |
+ / - |
Acercar / alejar |
[ / ] |
Contraer o expandir los paneles laterales |
Shift + F |
Activar o desactivar el modo de pantalla completa |
Esc |
Cancelar la operación actual |
En el modo de recorrido, usa WASD o las teclas de flecha para moverte, Shift para caminar más rápido y E para accionar las puertas.
Adáptalo a otro plano
El proyecto guarda los datos del diseño en index.html, por lo que resulta accesible para quienes quieran personalizar la demostración. Las principales estructuras de datos son ROOMS, que contiene los polígonos, nombres y tipos de suelo predeterminados de las habitaciones; WALLS y WINS, que definen las paredes y los huecos de las ventanas; MATS, con los nombres y precios de los materiales; y LIB, con los tipos de muebles, sus etiquetas, dimensiones predeterminadas y colores. La función buildFurniture() define los modelos 3D correspondientes.
Para una vivienda personalizada, actualiza esas definiciones según la geometría y los materiales que necesites; después, modifica las entradas del mobiliario o la lógica de creación de modelos según corresponda. Mantener juntos los datos del plano y el código de renderizado resulta práctico en una herramienta pequeña y autocontenida, aunque una aplicación más grande probablemente se beneficiaría de separar los datos, el renderizado y la lógica de la interfaz en módulos.
Publicado bajo la licencia MIT, floorplan-3d es tanto una herramienta de planificación práctica como un ejemplo compacto de aplicación web que no requiere compilación y combina edición 2D basada en SVG con una vista interior en Three.js. El repositorio indica que tiene 3,7 mil estrellas y 778 forks, y que, según el desglose de lenguajes, su implementación está escrita íntegramente en HTML. Para los desarrolladores, su atractivo es evidente: clónalo, prueba una distribución al instante y descubre cómo un único archivo puede ofrecer un flujo de trabajo de diseño sorprendentemente completo.