Ta liste de pièces devient un immeuble 3D, étage par étage

La phrase exacte, la liste d'exemple à remplacer par la tienne, et la vraie page du Reel à ouvrir

La page du Reel

Les 3 étapes

1. Écris ta liste de pièces étage par étage, dans un fichier texte (liste-pieces.txt) : la hauteur de chaque niveau, puis une ligne par pièce avec sa surface. Ajoute l'emprise du bâtiment et la place de l'escalier : Claude s'en sert pour disposer les pièces.
2. Ouvre Claude Code dans le dossier de ta liste (ou joins la liste dans Claude), puis colle la phrase ci-dessous telle quelle.
3. Ouvre etages.html dans ton navigateur. Si quelque chose ne te va pas (couleurs, fond, une pièce mal placée), dis-le-lui simplement : il corrige le même fichier.

La phrase exacte

Celle du Reel, testée telle quelle dans une session neuve, avec la liste juste en dessous dans le même dossier.

La liste d'exemple

Un petit immeuble inventé pour l'exemple, 5 niveaux : un titre, l'emprise et la place de l'escalier, puis pour chaque niveau sa hauteur et une ligne par pièce avec sa surface (par exemple « Boulangerie : 58 m² »). Elle est dans le kit, avec la phrase et la page : remplace les pièces par les tiennes et garde la forme.

Ce que Claude a vraiment fait

1. Il a écrit une seule page etages.html : les 5 niveaux tombent un par un et s'empilent, du rez-de-chaussée à l'attique ; on tourne à la souris et on zoome à la molette ; un étage survolé s'éclaire.
2. Au clic, l'étage glisse hors de la pile, ses murs disparaissent, les pièces colorées montent avec leur nom et leur surface, et un panneau liste les pièces par logement, avec les totaux. Échap, un clic dans le vide ou le bouton du panneau le remettent en place.
3. Il a ajouté de lui-même un fond étoilé, quelques tilleuls, des fenêtres allumées, l'attique en retrait avec sa terrasse et un garde-corps vitré.
4. Il a relu les surfaces : « Les surfaces de R+1 à R+3 dépassent l'emprise. » Une fois le noyau placé, il reste 105 m² par niveau, et R+1 et R+2 en demandent 115, R+3 en demande 111. Il a donc réduit les pièces dessinées en gardant leurs proportions, et les étiquettes affichent les surfaces exactes de la liste.

Ce qu'il faut savoir

1. La disposition des pièces est calculée automatiquement : seul le noyau escalier et ascenseur est fixe. Les pièces sont placées autour, avec une taille proportionnelle à leur surface. L'écart entre la surface dessinée et la surface réelle va jusqu'à environ 12 % aux étages courants et 18 % à l'attique d'après Claude. Ce n'est pas un plan d'architecte : si tu donnes la position réelle des pièces, il peut la reprendre.
2. Claude a précisé qu'il n'avait pas pu ouvrir la page lui-même. Nous l'avons ouverte et filmée dans Chrome, sans rien modifier : chargement, empilement, rotation, zoom, clic sur le rez-de-chaussée, le 2e étage et l'attique.
3. Testé avec Claude Code (session neuve, sans réglage, 3 novembre 2026). Non testé : le chat claude.ai, la version gratuite, un téléphone. Le dessin change d'un essai à l'autre : ta page ne sera pas identique à celle du Reel.
4. Three.js est une bibliothèque libre et gratuite ; aucun plugin ni logiciel 3D n'est nécessaire.
5. Si la page reste noire : vérifie ta connexion, puis donne à Claude le message d'erreur de la console du navigateur (F12).