SVNT Intro

파티클 애니메이션 구현

프로젝트 소개 및 문제의식

2023년 SVNT NFT 프로젝트의 인트로 페이지 개발 프로젝트입니다. 브랜드 아이덴티티를 강화하기 위해 하나의 모델이 다섯 개 모델로 자연스럽게 변환되는 파티클 애니메이션이 요구되는 상황이었습니다.

방향성

디자인 컨셉에 맞는 파티클 애니메이션을 구현하여 브랜드의 시각적 임팩트를 극대화하고 차별화된 인트로 경험을 제공하는 것을 목표로 했습니다.

구현

Next.js와 React-three/fiber 기반으로 3D 환경을 구축하고, BufferGeometry를 활용해 모델의 Vertex 수를 표준화했습니다. Points 객체를 통해 모델 정보를 파티클로 표현하고, 프레임 업데이트에 따라 Geometry 내 position 값을 업데이트하여 자연스러운 변환 애니메이션을 구현했습니다.

결과

하나의 모델에서 다섯 개 모델로 자연스럽게 변환되는 파티클 애니메이션을 성공적으로 구현했습니다. 브랜드 아이덴티티를 강화하는 시각적 효과를 안정적으로 제공하여 NFT 프로젝트의 차별화된 인트로 경험을 완성할 수 있었습니다.