Lampe Tiffany en vitrail

Utilisez three.js pour créer une scène interactive sur une seule page représentant une « lampe de table Tiffany en vitrail », dont l’intégralité du contenu est générée procéduralement par le code — ne chargez aucune image, aucun modèle ni aucune police externe.

La scène se déroule dans une pièce sombre, tard dans la nuit : une table en bois, un mur et une lampe de table allumée. L’abat-jour est composé de centaines de pièces de verre irrégulières, serties de plomb, avec une bordure ondulée festonnée le long du bord inférieur ; le motif évoque des colibris, des hibiscus rouges, des lys roses et des tiges feuillues sinueuses. Le verre doit présenter une qualité translucide rétroéclairée — le côté de chaque pièce le plus proche de l’ampoule est plus lumineux, et la surface présente les légères ondulations du verre artisanal. Le pied et la tige de la lampe sont en bronze, avec une patine verte oxydée et des reliefs en volutes. Un filament de tungstène est visible à l’intérieur de l’ampoule.

La lumière est au cœur de la scène. Lorsque la lampe est allumée, des taches de lumière colorées se projettent sur le plateau et le mur, les sertissages de plomb dessinent une grille de lignes sombres sur la table, une très légère brume chaude flotte sous le bord de l’abat-jour et des particules de poussière dérivent dans l’air, visibles uniquement dans la lumière. L’ensemble doit avoir un rendu cinématographique : rendu HDR + léger bloom + profondeur de champ + grain de vignette — sobre, jamais surexposé ni éblouissant. Lorsque la lampe est éteinte, laissez entrer un peu de lumière froide de la lune par la fenêtre afin que la silhouette et la chaînette restent visibles. Remplacez le motif de colibris et d’hibiscus de l’abat-jour par des libellules et des nénuphars : faites évoluer la palette du verre vers des bleus et des verts froids rehaussés de touches violettes, regravez le pied en bronze avec des motifs de rides de l’eau et teintez les taches lumineuses projetées sur le mur de nuances bleu-vert aquatiques assorties. Interactions :
- Le défilement de la page pilote un trajet de caméra, passant d’un plan large à une vue en plongée, puis à une vue macro de l’abat-jour et à un gros plan du pied ; en arrivant à la fin du défilement, la vue orbitale libre est activée
- Tirez la chaînette pour allumer ou éteindre la lampe ; faites-la glisser vers le haut ou le bas pour régler l’intensité en continu ; la lampe s’allume pièce par pièce, du bord de l’abat-jour vers son sommet
- Un clic sur l’abat-jour le soulève entièrement ; une fois soulevé, une pièce de verre peut être retirée et tenue devant l’œil pour être examinée
- Un double-clic sur le pied désassemble toute la lampe en une vue éclatée flottante
- Trois palettes de couleurs (originale / froide / ambrée) ; lors du changement, les couleurs s’écoulent vers le bas depuis le sommet de l’abat-jour

Mise en page : un grand titre vertical à empattements à gauche, qui s’estompe au défilement ; à droite, une colonne de boutons légers en forme de pastille (Allumer, Soulever l’abat-jour, Désassembler, Vue libre), ainsi que des pastilles de palette de couleurs, l’état étant repris dans les libellés des boutons. Conservez un design global minimaliste, assorti aux tonalités sombres de la scène ; sur mobile, il se transforme automatiquement en rangée horizontale en bas de l’écran.

Utilisez three.js pour créer une scène interactive sur une seule page représentant une « lampe de table Tiffany en vitrail », dont l’intégralité du contenu est générée procéduralement par le code — ne chargez aucune image, aucun modèle ni aucune police externe.

La scène se déroule dans une pièce sombre, tard dans la nuit : une table en bois, un mur et une lampe de table allumée. L’abat-jour est composé de centaines de pièces de verre irrégulières, serties de plomb, avec une bordure ondulée festonnée le long du bord inférieur ; le motif évoque des colibris, des hibiscus rouges, des lys roses et des tiges feuillues sinueuses. Le verre doit présenter une qualité translucide rétroéclairée — le côté de chaque pièce le plus proche de l’ampoule est plus lumineux, et la surface présente les légères ondulations du verre artisanal. Le pied et la tige de la lampe sont en bronze, avec une patine verte oxydée et des reliefs en volutes. Un filament de tungstène est visible à l’intérieur de l’ampoule.

La lumière est au cœur de la scène. Lorsque la lampe est allumée, des taches de lumière colorées se projettent sur le plateau et le mur, les sertissages de plomb dessinent une grille de lignes sombres sur la table, une très légère brume chaude flotte sous le bord de l’abat-jour et des particules de poussière dérivent dans l’air, visibles uniquement dans la lumière. L’ensemble doit avoir un rendu cinématographique : rendu HDR + léger bloom + profondeur de champ + grain de vignette — sobre, jamais surexposé ni éblouissant. Lorsque la lampe est éteinte, laissez entrer un peu de lumière froide de la lune par la fenêtre afin que la silhouette et la chaînette restent visibles. Ajoutez un bouton d’activation du mode pédagogique : une fois activé, un clic sur n’importe quelle pièce de verre effectue un zoom et affiche son nom de couleur (en chinois et en anglais) ainsi que sa valeur hexadécimale, tandis que les pièces adjacentes de la même couleur sont doucement mises en évidence, ce qui le rend adapté à l’apprentissage des couleurs et de leurs associations par les enfants. Interactions :
- Le défilement de la page pilote un trajet de caméra, passant d’un plan large à une vue en plongée, puis à une vue macro de l’abat-jour et à un gros plan du pied ; en arrivant à la fin du défilement, la vue orbitale libre est activée
- Tirez la chaînette pour allumer ou éteindre la lampe ; faites-la glisser vers le haut ou le bas pour régler l’intensité en continu ; la lampe s’allume pièce par pièce, du bord de l’abat-jour vers son sommet
- Un clic sur l’abat-jour le soulève entièrement ; une fois soulevé, une pièce de verre peut être retirée et tenue devant l’œil pour être examinée
- Un double-clic sur le pied désassemble toute la lampe en une vue éclatée flottante
- Trois palettes de couleurs (originale / froide / ambrée) ; lors du changement, les couleurs s’écoulent vers le bas depuis le sommet de l’abat-jour

Mise en page : un grand titre vertical à empattements à gauche, qui s’estompe au défilement ; à droite, une colonne de boutons légers en forme de pastille (Allumer, Soulever l’abat-jour, Désassembler, Vue libre), ainsi que des pastilles de palette de couleurs, l’état étant repris dans les libellés des boutons. Conservez un design global minimaliste, assorti aux tonalités sombres de la scène ; sur mobile, il se transforme automatiquement en rangée horizontale en bas de l’écran.