Autor: 希彼赫
Live ausprobieren Über dieses Projekt
FLORA bringt die WM-Nationen und ihre Wahrzeichen-Blumen in eine warm beleuchtete Ausstellungshalle: Argentiniens Jacaranda, die holländische Tulpe, Japans Chrysantheme, Kolumbiens Cattleya — jede Blume ein mit Tripo generiertes 3D-Modell auf einem Drehteller, das Sie drehen und aus der Nähe betrachten können.
Archivkarten in Flüssigglas-Optik führen für jede Blume wissenschaftlichen Namen, Familie, Blütezeit, Symbolik und kulturelle Notizen auf; eine Flaggenleiste wechselt das Land mit einem Klick, alternativ blättern Sie per Handgeste vor der Kamera. Die Assets folgen einem einheitlichen Lieferprotokoll (+Z-Ausrichtung, Ursprung an der Stängelwurzel); fehlende Plätze füllen prozedurale Platzhalter automatisch.
Highlights
- Jedes Exemplar per Drag auf dem Drehteller rotieren, Doppelklick für die Nahaufnahme
- Über die Flaggenleiste mit einem Klick das Land wechseln oder per Handgeste vor der Kamera blättern
- Archivkarten in Flüssigglas-Optik zeigen wissenschaftlichen Namen, Familie, Blütezeit, Symbolik und kulturelle Notizen
- Fehlende Assets werden automatisch durch prozedurale Platzhalter nach demselben Protokoll ersetzt — kein Sockel bleibt je leer
Technische Analyse
3D-Exponate · Tripo Text-to-3D
Die sechs Nationalblumen der Halle — Cattleya, Dahlie, Paradiesvogelblume, Chrysantheme, Jacaranda und Tulpe — sind alle mit Tripo Text-to-3D entstanden, als GLB exportiert und werden per GLTFLoader bei Bedarf in die Halle geladen.
Jede Blume folgt derselben Konvention: Ausrichtung nach +Z, Ursprung an der Stängelwurzel, etwa eine Einheit hoch. Und fehlt einmal ein Exponat, erzeugt der Code nach derselben Konvention einen prozeduralen Platzhalter und stellt ihn aufs Podest — keine Vitrine bleibt je leer.
Warmes Licht · RoomEnvironment-IBL
In der Halle steht keine einzige von Hand gesetzte Lampe: Das warme Licht kommt komplett aus RoomEnvironment von Three.js. Es erzeugt eine Environment-Map, mit der die PBR-Materialien der Tripo-Modelle ihre Glanzlichter und weiche Streuung ganz natürlich zeigen. Kein Abstimmen Lampe für Lampe — eine Environment-Map, und das Licht sitzt.
Museumsschilder · CSS3DRenderer
Die wissenschaftlichen Namen, Familien und Kulturnotizen auf den Schildern sind echte DOM-Elemente, die sich per CSS3DRenderer synchron mit der 3D-Szene drehen. Der Nutzen ist ganz praktisch: Der Text bleibt aus jeder Entfernung gestochen scharf, lässt sich markieren und kopieren, und selbst der Liquid-Glass-Look ist in gewöhnlichem CSS geschrieben.
Blättern per Geste · MediaPipe Hands
Neben der Flaggenleiste unten blättert die Halle auch berührungslos: MediaPipe Hands liest die Hand über die Kamera, ein Winken wechselt zum Stand der nächsten Nation — die ganze Halle lässt sich besichtigen, ohne die Maus anzufassen.
