제작자: 桌子
라이브 체험 프로젝트 소개
Maya Bennett는 가상의 그래픽 디자이너를 위한 6개 챕터 구성의 3D 이력서입니다. 네 개의 Tripo 과일 모델이 약력, 교육, 경력, 전문 분야 패널 사이를 떠다니며, 스크롤에 따라 가져온 카메라 애니메이션이 앞뒤로 움직입니다.
WebGL 레이어는 HTML 이력서와 분리되어 있어 3D 장면 없이도 내용을 읽거나 건너뛸 수 있습니다. 그 아래에는 브랜딩, 패키지, 에디토리얼 프로젝트 6개가 각각 전용 상세 화면으로 열리며, Color Lab에서 최종 비주얼을 만드는 조명, 초점, 머티리얼 설정을 조절할 수 있습니다.
체험 포인트
- 가져온 카메라 애니메이션과 함께 이력서의 여섯 챕터를 스크롤해 보세요. 위로 되돌아가면 같은 여정이 자연스럽게 역방향으로 재생됩니다.
- 떠다니는 네 과일 모델 중 하나를 드래그해 관성으로 회전시키고, 다시 장면 속 자리로 돌아가는 모습을 확인해 보세요.
- Color Lab을 열어 노출, 피사계 심도, EXR 조명, 각 과일의 머티리얼을 실시간으로 조정해 보세요.
- 엄선된 아이덴티티, 패키지, 에디토리얼 프로젝트 6개를 이어서 살펴보세요. 각 프로젝트는 전용 상세 화면으로 열립니다.
기술 분석
3D 에셋 · Tripo 과일 모델
바나나, 토마토, 딸기, 사과는 장면 노드와 머티리얼에 Tripo 식별자가 포함된 네 개의 GLB 에셋으로 제공됩니다. React Three Fiber는 하나의 공용 컴포넌트로 각 에셋을 불러오고, 장면 설정에서 스케일, 위치, 부유 모션, 초점 오프셋을 관리합니다.
스크롤 연출 · GSAP + 애니메이션 카메라
GSAP ScrollTrigger는 이력서의 스크롤 진행률을 0~1 범위의 단일 타임라인에 매핑합니다. 가져온 카메라 GLB를 5초로 정규화하고 0, 60, 120, 180, 240, 300 프레임에서 샘플링해 각 챕터가 정확한 지점에 도달하고 위로 스크롤할 때 역방향으로 재생되도록 합니다.
과일 인터랙션 · 쿼터니언 드래그와 복귀
포인터 움직임으로 쿼터니언 회전과 상한이 설정된 각속도를 제어합니다. 포인터를 놓으면 각 과일이 잠시 관성 회전을 이어가고, 이후 감쇠를 통해 설정된 포즈로 돌아가며 자동 모션이 서서히 다시 시작됩니다. 같은 포인터 경로가 마우스와 터치에서 모두 작동합니다.
시네마틱 마감 · EXR 조명, 자동 초점, Color Lab
EXR 스카이가 PMREM을 통해 PBR 머티리얼을 비추고, 고정된 25mm 카메라는 네 과일 그룹과 현재 피사체 사이에서 초점을 전환합니다. BokehPass, 블룸, 컬러 그레이딩이 화면을 마무리하며 Color Lab에서 이 설정을 실시간으로 조절할 수 있습니다.
