Tiffany-Buntglaslampe

Erstelle mit three.js eine interaktive Einzelseiten-Szene mit einer „Tiffany-Buntglas-Tischlampe“. Sämtliche Inhalte sollen prozedural per Code erzeugt werden – lade keine externen Bilder, Modelle oder Schriftarten.

Die Szene spielt spät in der Nacht in einem dunklen Raum: ein Holztisch, eine Wand und eine leuchtende Tischlampe. Der Lampenschirm besteht aus Hunderten unregelmäßiger Glasstücke, die von Bleiruten eingefasst sind und am unteren Rand eine gewellte, gebogene Bordüre haben; das Muster verweist auf Kolibris, rote Hibiskusblüten, rosa Lilien und geschwungene Blattstängel. Das Glas muss von hinten beleuchtet und durchscheinend wirken – die dem Leuchtmittel näher liegende Seite jedes Stücks ist heller, und die Oberfläche zeigt die dezenten Wellen handgefertigten Glases. Fuß und Schaft der Lampe bestehen aus Bronze mit oxidierter grüner Patina und einem Relief aus Rankenornamenten. Im Leuchtmittel ist ein Wolframfaden sichtbar.

Licht steht im Mittelpunkt. Wenn die Lampe eingeschaltet ist, fallen farbige Lichtflecken auf Tischplatte und Wand, die Bleiruten werfen ein Gitter aus dunklen Linien auf den Tisch, unter dem Schirmrand schwebt ein äußerst leichter warmer Dunst, und Staubpartikel treiben durch die Luft, die nur im Licht sichtbar sind. Die Gesamtwirkung ist filmisch: HDR-Rendering + weicher Bloom + Tiefenschärfe + Vignettenkörnung – zurückhaltend, niemals überbelichtet oder grell. Wenn die Lampe ausgeschaltet ist, soll etwas kaltes Mondlicht vom Fenster bleiben, damit Silhouette und Zugkette sichtbar sind. Ändere das Muster des Lampenschirms von Kolibris und Hibiskusblüten zu Libellen und Seerosen: Verschiebe die Glaspalette zu kühlen Blau- und Grüntönen mit violetten Akzenten, versieh den Bronzefuß neu mit Wasserrippel-Motiven und färbe die projizierten Lichtflecken an der Wand in passende wässrige Blaugrüntöne. Interaktionen:
- Das Scrollen der Seite steuert einen Kamerapfad und führt von einer Totalen zu einer Draufsicht, einer Makroaufnahme des Schirms und einer Nahaufnahme des Fußes; am Ende des Scrollens wird die freie Orbitansicht aktiviert
- Ziehe an der Kette, um die Lampe ein- oder auszuschalten; ziehe die Kette nach oben oder unten, um stufenlos zu dimmen; die Lampe leuchtet Stück für Stück auf, vom Schirmrand zur Krone hin
- Ein Klick auf den Schirm hebt den gesamten Schirm ab; danach kann ein einzelnes Glasstück herausgenommen und zur Betrachtung ans Auge gehalten werden
- Ein Doppelklick auf den Fuß zerlegt die gesamte Lampe in eine schwebende Explosionsansicht
- Drei Farbschemata (Original / kühl / bernsteinfarben); beim Wechsel fließen die Farben von der Krone des Schirms nach unten

Layout: links ein großer vertikaler Serifentitel, der beim Scrollen ausblendet; rechts eine Spalte mit dezenten pillenförmigen Buttons (Einschalten, Schirm anheben, Zerlegen, Freie Ansicht) und Punkten für die Farbschemata, wobei sich der Status in den Button-Beschriftungen widerspiegelt. Halte das Gesamtdesign minimal und auf die dunkle Tonalität der Szene abgestimmt; auf Mobilgeräten wird es automatisch in eine horizontale Leiste am unteren Rand umgewandelt.

Erstelle mit three.js eine interaktive Einzelseiten-Szene mit einer „Tiffany-Buntglas-Tischlampe“. Sämtliche Inhalte sollen prozedural per Code erzeugt werden – lade keine externen Bilder, Modelle oder Schriftarten.

Die Szene spielt spät in der Nacht in einem dunklen Raum: ein Holztisch, eine Wand und eine leuchtende Tischlampe. Der Lampenschirm besteht aus Hunderten unregelmäßiger Glasstücke, die von Bleiruten eingefasst sind und am unteren Rand eine gewellte, gebogene Bordüre haben; das Muster verweist auf Kolibris, rote Hibiskusblüten, rosa Lilien und geschwungene Blattstängel. Das Glas muss von hinten beleuchtet und durchscheinend wirken – die dem Leuchtmittel näher liegende Seite jedes Stücks ist heller, und die Oberfläche zeigt die dezenten Wellen handgefertigten Glases. Fuß und Schaft der Lampe bestehen aus Bronze mit oxidierter grüner Patina und einem Relief aus Rankenornamenten. Im Leuchtmittel ist ein Wolframfaden sichtbar.

Licht steht im Mittelpunkt. Wenn die Lampe eingeschaltet ist, fallen farbige Lichtflecken auf Tischplatte und Wand, die Bleiruten werfen ein Gitter aus dunklen Linien auf den Tisch, unter dem Schirmrand schwebt ein äußerst leichter warmer Dunst, und Staubpartikel treiben durch die Luft, die nur im Licht sichtbar sind. Die Gesamtwirkung ist filmisch: HDR-Rendering + weicher Bloom + Tiefenschärfe + Vignettenkörnung – zurückhaltend, niemals überbelichtet oder grell. Wenn die Lampe ausgeschaltet ist, soll etwas kaltes Mondlicht vom Fenster bleiben, damit Silhouette und Zugkette sichtbar sind. Füge einen Schalter für einen Lernmodus hinzu: Wenn er aktiviert ist, vergrößert ein Klick auf ein beliebiges Glasstück die Ansicht und zeigt seinen Farbnamen (auf Chinesisch und Englisch) sowie seinen Hex-Wert; angrenzende Stücke derselben Farbe werden dezent hervorgehoben. Dadurch eignet sich der Modus, um Kindern Farben und die Zuordnung von Farben beizubringen. Interaktionen:
- Das Scrollen der Seite steuert einen Kamerapfad und führt von einer Totalen zu einer Draufsicht, einer Makroaufnahme des Schirms und einer Nahaufnahme des Fußes; am Ende des Scrollens wird die freie Orbitansicht aktiviert
- Ziehe an der Kette, um die Lampe ein- oder auszuschalten; ziehe die Kette nach oben oder unten, um stufenlos zu dimmen; die Lampe leuchtet Stück für Stück auf, vom Schirmrand zur Krone hin
- Ein Klick auf den Schirm hebt den gesamten Schirm ab; danach kann ein einzelnes Glasstück herausgenommen und zur Betrachtung ans Auge gehalten werden
- Ein Doppelklick auf den Fuß zerlegt die gesamte Lampe in eine schwebende Explosionsansicht
- Drei Farbschemata (Original / kühl / bernsteinfarben); beim Wechsel fließen die Farben von der Krone des Schirms nach unten

Layout: links ein großer vertikaler Serifentitel, der beim Scrollen ausblendet; rechts eine Spalte mit dezenten pillenförmigen Buttons (Einschalten, Schirm anheben, Zerlegen, Freie Ansicht) und Punkten für die Farbschemata, wobei sich der Status in den Button-Beschriftungen widerspiegelt. Halte das Gesamtdesign minimal und auf die dunkle Tonalität der Szene abgestimmt; auf Mobilgeräten wird es automatisch in eine horizontale Leiste am unteren Rand umgewandelt.