T ― Y

Three.js 학습을 목표로,
Three.js와 GSAP ScrollTrigger를 활용해 **파티클이 스크롤 위치에 따라 GLTF 3D 모델 형태로 매끄럽게 변형(모핑)**되는 인터랙션을 구현했습니다.

• 모델링의 정점(Vertices) 기반 파티클 배치

  • GLTF(GLB) 모델을 로드하여 각 모델 표면에서 랜덤 샘플링(MeshSurfaceSampler)을 통해 파티클 위치 데이터를 생성
  • 여러 Mesh로 이루어진 모델을 단일 Geometry로 머지하여 필요한 파티클 수를 산출하여 배치

• 파티클 개수가 과도하게 파티클이 많아지는 경우를 방지

  • 파티클 수가 모델의 정점(Vertices)수를 초과하는 경우, 초과분은 이미 배치된 정점들의 위치에 그대로 배치하되, size 를 0으로 설정하여 보이지 않도록 처리

• 스크롤 기반 모핑 효과

  GSAP ScrollTrigger로 스크롤 위치에 따라 uProgress uniform 값(0~ 1)을 변화시켜, 파티클이 3D 모델의 형상으로 자연스럽게 변형되도록 제어

트러블 슈팅 및 과정

child_database