Author: 希彼赫
Try it live About this project
FLORA moves World Cup nations and their signature flowers into a warm-light specimen hall: Argentina’s jacaranda, the Dutch tulip, Japan’s chrysanthemum, Colombia’s cattleya — every flower a Tripo-generated 3D model on a turntable you can drag around and inspect up close.
Liquid-glass archive cards lay out each flower’s scientific name, family, bloom time, symbolism and cultural notes; a flag bar switches countries in one click, or turn on the camera and flip through with hand gestures. Assets follow one delivery protocol (+Z facing, origin at the stem root), with procedural stand-ins auto-filling any missing slots.
Highlights
- Drag to rotate each specimen on its turntable, double-click for a close-up
- Switch nations from the flag bar in one click, or flip through with hand gestures on camera
- Liquid-glass archive cards lay out scientific name, family, bloom time, symbolism and cultural notes
- Missing assets auto-fill with procedural stand-ins on the same protocol, so no plinth ever sits empty
Technical breakdown
Specimens · Tripo text-to-3D
The hall’s six national flowers — cattleya, dahlia, bird of paradise, chrysanthemum, jacaranda and tulip — are all Tripo text-to-3D work, exported as GLB and loaded into the hall on demand by GLTFLoader.
Each flower ships to the same convention: facing +Z, origin at the stem root, about one unit tall. And if a specimen ever goes missing, the code grows a procedural stand-in to the same convention and sets it on the plinth — no display case ever sits empty.
Warm light · RoomEnvironment IBL
There isn’t a single hand-placed lamp in the hall: all the warm light comes from Three.js RoomEnvironment, which generates an environment map so the PBR materials on the Tripo models naturally show their speculars and soft diffusion. No light-by-light tuning — one environment map, and the lighting is done.
Museum labels · CSS3DRenderer
The scientific names, families and cultural notes on the placards are real DOM elements, rotating in sync with the 3D scene through CSS3DRenderer. The benefits are very practical: the text stays crisp at any distance, you can select and copy it, and even the liquid-glass look is written in plain CSS.
Gesture paging · MediaPipe Hands
Besides clicking the flag bar at the bottom, the hall also flips pages hands-free: MediaPipe Hands reads your hand through the camera, so one wave switches to the next nation’s booth — you can tour the entire hall without touching the mouse.
