Autor: 希彼赫
Experimente ao vivo Sobre este projeto
FLORA leva as nações da Copa e suas flores emblemáticas para um salão de espécimes de luz quente: o jacarandá da Argentina, a tulipa holandesa, o crisântemo do Japão, a cattleya da Colômbia — cada flor é um modelo 3D gerado com o Tripo sobre uma plataforma giratória, que você pode arrastar e examinar de perto.
Cartões de arquivo em vidro líquido reúnem, para cada flor, nome científico, família, época de floração, simbolismo e notas culturais; uma barra de bandeiras troca de país com um clique, ou ligue a câmera e navegue com gestos das mãos. Os ativos seguem um único protocolo de entrega (orientação +Z, origem na raiz do caule), e substitutos procedurais preenchem automaticamente as vagas que faltarem.
Destaques
- Arraste para girar cada espécime em sua plataforma e dê um clique duplo para ver de perto
- Troque de país com um clique na barra de bandeiras ou navegue com gestos das mãos diante da câmera
- Cartões de arquivo em vidro líquido exibem nome científico, família, época de floração, simbolismo e notas culturais
- Ativos ausentes são preenchidos automaticamente com substitutos procedurais no mesmo protocolo, para que nenhum pedestal fique vazio
Análise técnica
Espécimes 3D · Tripo text-to-3D
As seis flores nacionais do salão — cattleya, dália, ave-do-paraíso, crisântemo, jacarandá e tulipa — são todas obra do Tripo text-to-3D, exportadas em GLB e carregadas sob demanda pelo GLTFLoader.
Cada flor segue a mesma convenção: frente para +Z, origem na base do caule, cerca de uma unidade de altura. E se algum espécime faltar, o código gera um substituto procedural na mesma convenção e o coloca no pedestal — nenhuma vitrine fica vazia.
Luz quente · IBL com RoomEnvironment
No salão não há uma única lâmpada posicionada à mão: toda a luz quente vem do RoomEnvironment do Three.js, que gera um environment map para os materiais PBR dos modelos do Tripo exibirem naturalmente seus reflexos e difusão suave. Nada de ajustar luz por luz — um environment map e a iluminação está pronta.
Placas de museu · CSS3DRenderer
Os nomes científicos, famílias e notas culturais das placas são elementos DOM de verdade, girando em sincronia com a cena 3D via CSS3DRenderer. As vantagens são bem práticas: o texto continua nítido a qualquer distância, dá para selecionar e copiar, e até o efeito de vidro líquido é escrito em CSS comum.
Virar páginas com gestos · MediaPipe Hands
Além de clicar na barra de bandeiras embaixo, o salão também vira páginas sem contato: o MediaPipe Hands lê sua mão pela câmera e um aceno troca para o estande do próximo país — dá para percorrer o salão inteiro sem encostar no mouse.
