the.invest.room · ressource gratuite

Ton bâtiment en 3D cliquable, écrit par Claude

La vraie page du Reel à ouvrir et à télécharger, le prompt exact, et 3 variantes prêtes à coller

Mis à jour le 31 octobre 2026
Tout ce que tu as vu dans le Reel est une vraie page web : un seul fichier HTML, écrit par Claude avec Three.js, la bibliothèque 3D gratuite. Tu la fais tourner, tu cliques sur une pièce, sa fiche s'ouvre. Ouvre-la d'abord pour voir ce que tu vas demander, puis copie le prompt et remplace le tableau par le tien.

Les deux pages à ouvrir

La médiathèque du Reelmaquette.html

Clique sur le toit ou une façade, puis sur « Ouvrir le bâtiment » pour atteindre les pièces. Le bouton « Télécharger le fichier » est en bas de la page. Depuis Instagram, ouvre le lien dans Safari ou Chrome : le téléchargement peut y être bloqué.

Ouvrir la maquette →
L'îlot du Reelilot.html

Le même principe avec un autre tableau : six lots et une cour, chacun avec sa fiche.

Ouvrir l'îlot →

Les 3 étapes

  1. Colle ton tableau de surfaces dans Claude : pièce, dimensions, position, usage, matériau. Une ligne par pièce suffit.
  2. Demande une maquette où chaque élément se clique et ouvre une fiche. Tu peux aussi joindre une photo ou un plan pour décrire le bâtiment.
  3. Demande-lui d'utiliser Three.js, dans un seul fichier HTML qui le charge depuis un CDN. C'est la phrase qu'on oublie : sans elle, tu laisses Claude choisir une autre façon de faire.

Le prompt exact de la médiathèque

À copier tel quel pour refaire la médiathèque, ou à reprendre avec ton propre tableau.

Voici le tableau de surfaces de ma médiathèque de quartier. Rez-de-chaussée, 20 × 11 m, 3,60 m de haut : Hall d'accueil | 6 × 11 m | côté ouest | Accueil, prêt et retour des livres | Béton ciré, banque en chêne Salle de lecture | 14 × 6,5 m | au sud, à l'est du hall | Lecture et rayonnages, 40 places | Parquet de chêne, plafond bois Atelier | 8 × 4,5 m | au nord-est | Ateliers d'écriture et d'enfants | Linoléum, murs en bois clair Sanitaires et locaux | 6 × 4,5 m | au nord, entre le hall et l'atelier | Sanitaires, ménage, technique | Grès cérame clair Étage, 14 × 11 m, 3,30 m de haut, aligné à l'ouest : Palier | 6 × 4,5 m | au nord-ouest | Arrivée de l'escalier, attente | Béton ciré Bureaux | 6 × 6,5 m | au sud-ouest | Équipe de la médiathèque, 6 postes | Moquette de laine, cloisons vitrées Salle polyvalente | 8 × 11 m | à l'est du palier et des bureaux | Conférences et projections, 80 places | Parquet de chêne, acoustique bois Terrasse | 6 × 11 m | sur le toit du rez-de-chaussée, à l'est | Lecture en plein air | Platelage de pin, garde-corps en acier Enveloppe : Toiture de l'étage | 14 × 11 m | Trois sheds pour la lumière | Zinc pré-patiné Façade sud | Vitrine sur le jardin, entrée | Vitrage clair, cadres en acier fin Façade nord | Côté rue, peu d'ouvertures | Béton clair banché Façade est | Lumière du matin | Béton clair et grande baie Façade ouest | Mur plein | Béton clair banché Façades de l'étage | Filtrent le soleil | Lames verticales de mélèze Construis une maquette 3D de ce bâtiment où chaque pièce et chaque façade se clique : au clic, une fiche s'ouvre avec la surface, le niveau, l'usage, le matériau et la hauteur. La maquette tourne seule lentement, se fait tourner à la souris et au doigt, et un bouton ouvre le bâtiment en vue éclatée, murs coupés, pour atteindre les pièces. Ajoute quelques arbres et personnages pour l'échelle. Utilise Three.js, dans un seul fichier HTML qui charge Three.js depuis un CDN. Couleurs sobres, fond clair, une seule couleur d'accent. Indique en petit que c'est une maquette de présentation, ni à l'échelle garantie ni BIM. Ajoute un lien pour télécharger le fichier.

3 variantes à coller

L'îlot a été testé : son prompt, rejoué dans une session neuve, donne une page qui marche. Le planning de chantier et l'agence n'ont pas été testés : ajuste si besoin.

ÎLOT (testé). Voici le tableau de mon îlot, sur une parcelle de 104 × 80 m avec une cour commune de 48 × 24 m au centre. Lot A | 48 × 14 m | au nord | R+5 | Logements collectifs | Brique claire. Lot B | 28 × 24 m | au nord-est | R+6 | Bureaux | Béton clair et verre. Lot C | 14 × 28 m | à l'est | R+4 | Logements | Bois et enduit clair. Lot D | 34 × 14 m | au sud | R+3 | Commerces et logements | Brique claire. Lot E | 20 × 20 m | au sud-ouest | R+1 | Crèche | Bois clair. Lot F | 12 × 14 m | à l'ouest | R+2 | Parking silo | Bardage métallique. Construis une maquette 3D où chaque lot et la cour se cliquent : au clic, une fiche donne la surface de plancher (emprise × niveaux), le gabarit, l'usage, le matériau et la hauteur. Un trait par plancher sur les façades. Utilise Three.js, dans un seul fichier HTML qui charge Three.js depuis un CDN. Couleurs sobres, fond clair, une seule couleur d'accent. Indique en petit que c'est une maquette de présentation, ni à l'échelle garantie ni BIM.
PLANNING DE CHANTIER (non testé). Voici le planning de mon chantier : [lot | semaine de début | semaine de fin | entreprise]. Construis la maquette 3D du bâtiment, avec un curseur des semaines : à chaque semaine, seuls les éléments déjà construits sont visibles, ceux en cours sont colorés. Un clic sur un élément donne son lot, ses dates et son entreprise. Utilise Three.js, dans un seul fichier HTML qui charge Three.js depuis un CDN. Couleurs sobres, fond clair.
TON AGENCE (non testé). Voici mon agence : [pièce | dimensions | position | qui y travaille | projets en cours]. Construis une maquette 3D où chaque pièce se clique et ouvre sa fiche. Utilise Three.js, dans un seul fichier HTML qui charge Three.js depuis un CDN. Couleurs sobres, fond clair.

Modèle de tableau de surfaces

Recopie cette ligne pour chaque pièce, puis colle le tout dans le prompt.

Nom de la pièce | largeur × profondeur en mètres | position (au nord, à l'est de…) | usage | matériau

Si la 3D ne s'affiche pas

  1. Écran blanc dans le chat : demande « Donne-moi un seul fichier HTML qui charge Three.js depuis un CDN », télécharge-le, puis ouvre-le dans ton navigateur. Dans le chat, Claude a longtemps chargé une ancienne version de Three.js (r128) : c'est une cause fréquente.
  2. Tout est noir ou rien ne bouge : donne à Claude le message d'erreur de la console du navigateur (F12).
  3. Le clic tombe sur la mauvaise pièce : dis-le-lui. Notre première version avait ce défaut, une pièce au premier plan captait les clics destinés à la pièce derrière. Compte deux ou trois retours avant d'avoir une page propre.
  4. Pas de réseau : la page a besoin d'internet pour charger Three.js. Elle l'indique à l'écran si le chargement échoue.

Comment ces pages ont été faites

  1. La page du Reel a été écrite par Claude (Opus 5.5, dans Claude Code) dans la même séance que le prompt, puis corrigée sur quatre points après essai : sélection des pièces cachées, ombres de la vue éclatée, un meuble sorti du mur, cadrage. L'îlot du Reel a été écrit de la même façon, dans un fichier à part.
  2. Pour vérifier que les prompts suffisent, on a rejoué celui de la médiathèque et celui de l'îlot tels quels, chacun dans une session Claude neuve, sans rien d'autre. Les deux premiers jets, non corrigés, s'ouvrent sans erreur, et les clics testés ouvrent la bonne fiche, avec les chiffres du tableau. Ils ne ressemblent pas exactement aux pages du Reel : le dessin change à chaque fois.
  3. Vérifié dans Chromium pour la page du Reel : chargement, clic sur chaque pièce, surfaces égales au tableau, glissé à la souris, émulation tactile d'un téléphone, message affiché si Three.js ne se charge pas.
  4. Non testé : le prompt dans le chat claude.ai, le plan gratuit, un vrai iPhone. Opus 5.5 est réservé aux abonnements payants ; un autre modèle peut donner un résultat différent.
  5. Three.js est une bibliothèque libre et gratuite. Aucun connecteur n'est nécessaire pour cette maquette ; il en faudrait pour y brancher des données en direct.
Maquette de présentation, ni à l'échelle garantie ni BIM : les pièces sont des volumes simples, sans structure ni réseaux. La médiathèque et l'îlot sont des exemples inventés. À ne pas utiliser comme document technique ou contractuel.
Tu as aimé ? Suis @the.invest.room : une astuce IA, archi ou investissement chaque jour.