Floorplan 3D : un outil de conception d’intérieur dans un seul fichier
Découvrez un concepteur de plans d’intérieur dans le navigateur, qui associe un agencement précis des meubles en 2D à des visites interactives avec Three.js, le tout dans un seul fichier HTML.
Planifier une pièce en 2D est rapide, mais il peut être difficile de savoir si un agencement sera agréable une fois sur place. floorplan-3d comble cet écart grâce à un outil de conception d’intérieur accessible dans le navigateur : agencez un plan, modifiez les murs et mesurez les dimensions en 2D, puis passez à une scène interactive Three.js pour examiner le résultat d’en haut ou vous y déplacer.
Le projet est particulièrement facile à essayer. L’application tient dans un seul fichier index.html, conçu avec du HTML, du CSS et du JavaScript natifs, sans framework ni étape de compilation. Clonez le dépôt et ouvrez le fichier dans un navigateur ; aucune installation de paquet n’est nécessaire. La principale exception est le moteur 3D, qui charge Three.js r160 depuis jsDelivr : une connexion Internet est donc nécessaire pour afficher la première vue 3D.
Passez d’un plan coté à une pièce à explorer
L’éditeur 2D est conçu pour réaliser des agencements pratiques, et pas seulement des croquis. Il affiche le plan à l’échelle 1:60 ou 1:100 et exprime les dimensions en millimètres. Une bibliothèque de plus de 60 meubles et appareils couvre les chambres, les salons, les cuisines et salles à manger, les salles de bains, l’électroménager, ainsi que les espaces de travail ou de loisirs. Faites glisser les éléments sur le plan, déplacez-les, redimensionnez-les ou faites-les pivoter ; maintenez la touche Maj pour une rotation à angle libre. Les meubles peuvent également s’aligner automatiquement sur les murs.
Un outil de mesure permet de vérifier directement sur le plan les dégagements et la longueur des murs. Il s’aligne à proximité des murs, et la touche Maj contraint les mesures à l’horizontale ou à la verticale. Pour préparer des travaux, les cloisons non porteuses peuvent être marquées comme étant à supprimer, tandis que les murs porteurs sont identifiés séparément. Des commandes de visibilité permettent d’afficher ou de masquer au besoin les dimensions, les noms des pièces, les meubles, la grille et les murs porteurs.
Cette distinction est importante : l’éditeur peut aider à visualiser une modification envisagée, mais un outil de dessin ne remplace pas une évaluation structurelle. Considérez les marques de suppression des murs comme de simples annotations de conception et consultez un professionnel qualifié avant toute modification structurelle.
Examinez votre projet en 3D interactive
Appuyez sur T pour passer du plan 2D à la scène 3D et inversement. La vue 3D propose des perspectives en plongée, en angle et en vue de dessus. Vous pouvez également sélectionner une pièce dans une liste pour y déplacer la caméra. Pour une exploration plus immersive, le mode déplacement libre prend en charge les touches WASD et la souris sur ordinateur, ainsi qu’un joystick virtuel sur les appareils tactiles. Les portes peuvent être ouvertes et fermées pendant la visite.
La scène va au-delà d’une simple ébauche. Le projet comprend des modèles de meubles détaillés, avec notamment des joints et des poignées de portes de placard, des têtes de lit rembourrées, ainsi que des matériaux métalliques et céramiques réfléchissants. Les meubles peuvent aussi être sélectionnés et déplacés en 3D ; les modifications sont synchronisées avec l’agencement 2D. L’affichage des murs peut passer d’une hauteur complète à une vue en coupe, tandis qu’un curseur permet de régler l’heure d’ensoleillement et que l’éclairage nocturne aide à voir comment l’espace se présente dans différentes conditions.
Comparez les matériaux et suivez les modifications
L’application calcule automatiquement la superficie des pièces et la surface intérieure totale utilisable. Chaque pièce peut recevoir un revêtement de sol, notamment du parquet, du carrelage, du marbre, du terrazzo ou de la moquette. Les estimations de matériaux se basent sur la superficie de la pièce et ajoutent 5 % pour les pertes, ce qui constitue un bon point de départ pour établir un budget approximatif.
La modification des plans est facilitée par les fonctions d’annulation et de rétablissement, et les plans sont automatiquement enregistrés dans le localStorage du navigateur. Vous pouvez exporter une image PNG pour la partager, ou exporter et importer le plan complet au format JSON. L’interface est disponible en chinois et en anglais ; le sélecteur de langue se trouve dans le coin supérieur droit et mémorise votre choix.
Comme le localStorage est propre à chaque navigateur, il ne remplace pas une sauvegarde portable. Exportez le fichier JSON pour transférer un projet vers un autre navigateur ou en conserver une copie en dehors du profil actuel.
Pour commencer
Clonez le dépôt, puis ouvrez directement index.html ou lancez un petit serveur statique :
git clone <repository-url>
cd <repository-directory>
python3 -m http.server 8000
Dans votre navigateur, rendez-vous sur http://localhost:8000. Le serveur est facultatif, mais il peut assurer un comportement plus cohérent avec les fichiers locaux d’un navigateur à l’autre. L’éditeur 2D fonctionne sans étape de compilation ; la première vue 3D nécessite une connexion réseau pour récupérer Three.js depuis jsDelivr.
Raccourcis clavier pratiques
| Touche | Action |
|---|---|
T |
Passer de la 2D à la 3D et inversement |
V / M / X |
Sélectionner, mesurer ou marquer des murs à modifier |
R / Shift+R |
Faire pivoter le meuble sélectionné de 90° dans le sens horaire ou antihoraire |
Delete / Backspace |
Supprimer le meuble sélectionné |
Ctrl/⌘ + D |
Dupliquer le meuble sélectionné |
Ctrl/⌘ + Z / Ctrl/⌘ + Shift + Z |
Annuler / rétablir |
F |
Ajuster le plan à la fenêtre |
+ / - |
Zoom avant / arrière |
[ / ] |
Réduire ou développer les panneaux latéraux |
Shift + F |
Activer ou désactiver le plein écran |
Esc |
Annuler l’opération en cours |
En mode déplacement libre, utilisez WASD ou les flèches pour vous déplacer, Maj pour marcher plus vite et E pour manipuler les portes.
Adaptez l’outil à un autre plan
Le projet regroupe ses données de conception dans index.html, ce qui le rend accessible aux développeurs souhaitant personnaliser la démo. Les principales structures de données sont ROOMS pour les polygones des pièces, leurs noms et les revêtements de sol par défaut ; WALLS et WINS pour les murs et les ouvertures de fenêtres ; MATS pour les noms et les prix des matériaux ; et LIB pour les types de meubles, leurs libellés, leurs dimensions par défaut et leurs couleurs. La fonction buildFurniture() définit les modèles 3D correspondants.
Pour créer un intérieur personnalisé, modifiez ces définitions afin qu’elles correspondent à la géométrie et aux matériaux dont vous avez besoin, puis adaptez les éléments de mobilier ou la logique de création des modèles selon le cas. Regrouper les données du plan et le code de rendu est pratique pour un outil compact et autonome, même si une application plus importante gagnerait sans doute à séparer les données, le rendu et la logique de l’interface en différents modules.
Publié sous licence MIT, floorplan-3d est à la fois un outil de planification utilisable et un exemple compact d’application web sans compilation, qui associe une édition 2D basée sur SVG à une vue d’intérieur avec Three.js. Le dépôt compte 3,7 k étoiles et 778 forks, et, d’après la répartition des langages, son implémentation est entièrement en HTML. Pour les développeurs, l’intérêt est évident : clonez-le, essayez immédiatement un agencement et découvrez comment un seul fichier peut prendre en charge un processus de conception étonnamment complet.