FLOORPLAN 3D : votre appartement, du plan 2D à la visite à la première personne
⏱️ Temps de lecture estimé : 4 minutes
https://wy51ai.github.io/floorplan-3d/
📌 FLOORPLAN 3D est un outil d’aménagement qui tient dans un seul fichier HTML de 2 664 lignes. Vous y recreez un plan aux vraies dimensions, vous y posez le mobilier, vous abattez un mur, vous changez le sol, puis vous passez en 3D pour marcher dans les pièces. Aucune installation, aucun build, tout dans le navigateur.
L’origine du projet vaut mieux que l’outil lui-même. WY a envoyé une photo de son plan à Opus 5.5 en demandant de reproduire l’appartement à ses dimensions d’origine. Une heure plus tard, il avait un plan vectoriel manipulable. Le code a été ouvert le 29 septembre : 344 étoiles et 97 forks en quelques heures, cinq commits, un seul auteur. Le README est en chinois, l’interface bascule en anglais depuis le bouton en haut à droite.
Le mode 2D est du SVG tracé à l’échelle 1:60 ou 1:100, en millimètres. Vous tirez les meubles depuis la bibliothèque de gauche — plus de 60 références, du lit double au lave-linge — vous les faites pivoter, vous les redimensionnez, et ils s’aimantent aux murs. L’outil de mesure s’accroche aux parois et se verrouille en horizontal ou en vertical avec Shift. Les murs non porteurs se démolissent, les porteurs sont marqués séparément, ce qui évite de vous proposer l’abolition d’un refend qui tient l’immeuble. Les calques s’allument un par un : cotes, noms de pièces, mobilier, grille.
La bascule se fait par une transition animée, touche T. En 3D, c’est Three.js r160 chargé depuis jsDelivr, avec trois angles — vue de dessus, oblique, à plat — et une liste de pièces sur la droite : vous cliquez une chambre, la caméra y vole. Le mode promenade est le meilleur morceau : WASD et souris au clavier, joystick virtuel au doigt sur iPad, E pour ouvrir une porte. Un curseur déplace le soleil sur la journée, un bouton bascule les lumières de nuit. Les meubles ne sont pas des cubes : les portes de placard ont leurs joints et leurs poignées, la tête de lit est capitonnée, le métal et la céramique ont des reflets d’environnement. On déplace un meuble en 3D, il reste calé sur le plan 2D.
Le reste fait partie du contrat : surface de chaque pièce et surface habitable calculées, un matériau de sol par pièce — bois, carrelage, marbre, terrazzo, moquette — avec un budget estimé qui ajoute 5 % de perte, undo/redo, sauvegarde dans le localStorage, export PNG et export/import du plan en JSON.
Le point le plus intéressant n’est pas dans la liste. Tout est paramétrable dans le même fichier : les pièces dans ROOMS, les murs et les fenêtres dans WALLS et WINS, les matériaux dans MATS, la bibliothèque dans LIB, les modèles dans buildFurniture(). Reprendre votre propre appartement revient à éditer ces tableaux.
- 📐 Plan 2D en SVG aux vraies cotes, échelle 1:60 ou 1:100, unités en mm
- 🛋️ Plus de 60 meubles et appareils à glisser, avec aimantation aux murs
- 🧱 Murs non porteurs démontables, murs porteurs signalés à part
- 🎮 Promenade 3D au clavier ou au doigt, portes ouvrantes, soleil réglable
- 🪵 Un sol par pièce et un budget estimé avec 5 % de perte
- 📦 Un seul fichier HTML, aucune installation, sauvegarde locale
Mon avis tient dans le rapport entre le prix d’entrée et ce qu’on obtient. Ouvrir la démo, poser un canapé, casser un mur, basculer en 3D : trois minutes, aucun compte, aucun serveur. C’est le genre de prototype qui devient un outil. Deux réserves. Il n’y a pas de fichier de licence dans le dépôt — la question « MIT ? » a été posée sous le tweet et n’a pas encore eu de réponse : lire, cloner et exécuter, c’est acquis, réutiliser le code dans un projet à vous reste une zone grise. Et Three.js arrive par CDN, donc la première ouverture du mode 3D exige une connexion. Un point d’entrée de cette taille mérite qu’on jette un œil au code avant de l’exécuter.
Sources
