Autor: 桌子
Experimente ao vivo Sobre este projeto
Maya Bennett é um currículo 3D em seis capítulos para uma designer gráfica fictícia. Quatro modelos de frutas do Tripo flutuam entre painéis de biografia, formação, carreira e especialidades, enquanto a rolagem move uma animação de câmera importada para a frente ou para trás.
A camada WebGL permanece separada do currículo em HTML, mantendo a história legível e opcional mesmo sem a cena 3D. Abaixo dela, seis projetos de branding, embalagem e design editorial abrem visualizações detalhadas dedicadas, enquanto o Color Lab expõe os controles de iluminação, foco e materiais por trás do visual final.
Destaques
- Percorra seis capítulos do currículo enquanto a animação de câmera importada acompanha você — role para trás e o mesmo percurso se inverterá naturalmente.
- Arraste qualquer um dos quatro modelos de frutas flutuantes para fazê-lo girar com inércia e depois observe-o se acomodar novamente na cena.
- Abra o Color Lab para ajustar em tempo real a exposição, a profundidade de campo, a iluminação EXR e o material de cada fruta.
- Continue por seis projetos selecionados de identidade, embalagem e design editorial, cada um com sua própria visualização detalhada.
Análise técnica
Assets 3D · modelos de frutas do Tripo
Banana, tomate, morango e maçã são fornecidos como quatro assets GLB cujos nós de cena e materiais trazem identificadores do Tripo. O React Three Fiber carrega cada asset por meio de um único componente compartilhado, enquanto a configuração da cena gerencia escala, posição, movimento flutuante e deslocamentos de foco.
Coreografia da rolagem · GSAP + câmera animada
O GSAP ScrollTrigger mapeia o progresso da rolagem do currículo para uma única linha do tempo de 0 a 1. O GLB da câmera importada é normalizado para cinco segundos e amostrado nos frames 0, 60, 120, 180, 240 e 300, para que cada capítulo chegue a um ponto previsível e seja invertido na rolagem para cima.
Interação com as frutas · arraste por quatérnios e retorno
O movimento do ponteiro controla a rotação por quatérnios e uma velocidade angular limitada. Depois de solta, cada fruta mantém um breve giro inercial; em seguida, o amortecimento a devolve à pose definida e reintroduz gradualmente o movimento automático. O mesmo percurso do ponteiro funciona com mouse e toque.
Acabamento cinematográfico · luz EXR, foco automático e Color Lab
Um céu EXR ilumina os materiais PBR por meio do PMREM, enquanto uma câmera fixa de 25 mm alterna o foco entre o grupo de quatro frutas e o elemento ativo. BokehPass, bloom e gradação finalizam o quadro, e o Color Lab disponibiliza esses controles em tempo real.
