Autor: 希彼赫
Pruébalo en vivo Sobre este proyecto
FLORA lleva a las naciones del Mundial y sus flores emblemáticas a un salón de especímenes con luz cálida: la jacaranda de Argentina, el tulipán neerlandés, el crisantemo de Japón, la cattleya de Colombia; cada flor es un modelo 3D generado con Tripo sobre una plataforma giratoria que puedes arrastrar y examinar de cerca.
Las fichas de archivo con efecto de vidrio líquido recogen el nombre científico, la familia, la época de floración, el simbolismo y las notas culturales de cada flor; una barra de banderas cambia de país con un clic, o enciende la cámara y pasa páginas con gestos de la mano. Los recursos siguen un mismo protocolo de entrega (orientación +Z, origen en la raíz del tallo), y los sustitutos procedurales rellenan automáticamente los huecos que falten.
Puntos clave
- Arrastra para girar cada espécimen en su plataforma y haz doble clic para verlo de cerca
- Cambia de país con un clic en la barra de banderas o pasa de uno a otro con gestos de la mano ante la cámara
- Las fichas de archivo con efecto de vidrio líquido muestran nombre científico, familia, época de floración, simbolismo y notas culturales
- Los recursos que faltan se rellenan automáticamente con sustitutos procedurales bajo el mismo protocolo, para que ningún pedestal quede vacío
Análisis técnico
Especímenes 3D · Tripo text-to-3D
Las seis flores nacionales de la sala — cattleya, dalia, ave del paraíso, crisantemo, jacarandá y tulipán — son obra de Tripo text-to-3D, exportadas a GLB y cargadas bajo demanda con GLTFLoader.
Cada flor sigue la misma convención: frente hacia +Z, origen en la raíz del tallo, alrededor de una unidad de alto. Y si algún espécimen falta, el código genera un sustituto procedural con la misma convención y lo coloca en el pedestal — ninguna vitrina se queda vacía.
Luz cálida · IBL con RoomEnvironment
En la sala no hay ni una sola lámpara colocada a mano: toda la luz cálida sale de RoomEnvironment de Three.js, que genera un mapa de entorno para que los materiales PBR de los modelos de Tripo muestren con naturalidad sus brillos y su difusión suave. Nada de ajustar luz por luz — un mapa de entorno y la iluminación queda lista.
Rótulos de museo · CSS3DRenderer
Los nombres científicos, familias y notas culturales de los rótulos son elementos DOM reales que giran en sincronía con la escena 3D gracias a CSS3DRenderer. Las ventajas son muy prácticas: el texto se ve nítido a cualquier distancia, se puede seleccionar y copiar, y hasta el efecto de vidrio líquido está escrito en CSS corriente.
Cambiar de sala con gestos · MediaPipe Hands
Además de pulsar la barra de banderas inferior, la sala también pasa página sin contacto: MediaPipe Hands lee tu mano a través de la cámara y con un gesto cambias al puesto del siguiente país — puedes recorrer toda la sala sin tocar el ratón.
