JEONGSIC.xyz / 유정식

SVNT Intro

파티클 애니메이션 구현

프로젝트 소개

2023년, SVNT NFT 프로젝트를 위한 인트로 페이지 프로젝트를 진행했습니다. 해당 작업에서 디자인 컨셉에 따라 파티클 애니메이션 구현이 필요했는데, 파티클 구현 방법을 리서치하고 테스트해보면서 최종적으로 프로젝트에 구현할 수 있었습니다.

구현

Next.js, React, React-three/fiber, Vanilla-Extract

구현을 위해 표현하고자 하는 적절한 Vertex를 갖는 3D 모델을 추출했습니다. 그리고 Points 객체를 통해 모델의 정보를 파티클로 표현하고 프레임 업데이트에 따라 Geometry 내 position 값을 업데이트 하여 애니메이션을 구현했습니다.