Autor: 桌子
Pruébalo en vivo Sobre este proyecto
Maya Bennett es un currículum 3D de seis capítulos para una diseñadora gráfica ficticia. Cuatro modelos de frutas de Tripo flotan entre paneles de biografía, educación, trayectoria y especialidades mientras el desplazamiento mueve hacia delante o hacia atrás una animación de cámara importada.
La capa WebGL se mantiene separada del currículum HTML, de modo que la historia sigue siendo legible y se puede omitir incluso sin la escena 3D. Debajo, seis proyectos de identidad de marca, packaging y diseño editorial se abren en vistas de detalle específicas, mientras Color Lab expone los controles de iluminación, enfoque y materiales que dan forma al acabado final.
Puntos clave
- Recorre seis capítulos del currículum mientras la animación de cámara importada se mueve contigo; desplázate hacia atrás y el mismo recorrido se invertirá de forma natural.
- Arrastra cualquiera de los cuatro modelos de frutas flotantes para hacerlo girar con inercia y observa después cómo vuelve a asentarse en la escena.
- Abre Color Lab para ajustar en tiempo real la exposición, la profundidad de campo, la iluminación EXR y el material de cada fruta.
- Continúa con seis proyectos seleccionados de identidad, packaging y diseño editorial, cada uno con su propia vista de detalle.
Análisis técnico
Recursos 3D · modelos de frutas de Tripo
El plátano, el tomate, la fresa y la manzana se entregan como cuatro recursos GLB cuyos nodos de escena y materiales llevan identificadores de Tripo. React Three Fiber carga cada recurso mediante un único componente compartido, mientras la configuración de la escena gestiona la escala, la posición, el movimiento flotante y los desplazamientos de foco.
Coreografía de desplazamiento · GSAP + cámara animada
GSAP ScrollTrigger asigna el progreso de desplazamiento del currículum a una única línea de tiempo de 0 a 1. El GLB de cámara importado se normaliza a cinco segundos y se muestrea en los fotogramas 0, 60, 120, 180, 240 y 300, de modo que cada capítulo llega a su punto previsto y se invierte al desplazarse hacia arriba.
Interacción con frutas · arrastre por cuaterniones y retorno
El movimiento del puntero controla la rotación mediante cuaterniones y una velocidad angular limitada. Tras soltarla, cada fruta conserva un breve giro inercial; después, la amortiguación la devuelve a su pose definida y reactiva gradualmente el movimiento automático. El mismo recorrido del puntero funciona con ratón y pantalla táctil.
Acabado cinematográfico · iluminación EXR, enfoque automático y Color Lab
Un cielo EXR ilumina los materiales PBR mediante PMREM, mientras una cámara fija de 25 mm alterna el foco entre el grupo de cuatro frutas y el sujeto activo. BokehPass, bloom y la gradación completan el encuadre, y Color Lab permite manipular esos controles en directo.
