- R3F(React-Three-Fiber)의 Plane Mesh를 주제로 평면 3D 오브젝트를 생성하고, 이를 활용한 인터랙션을 전시하는 페이지를 제작했습니다.
이전의 Three.js 학습을 목표로 제작한 Particle Morphing 프로젝트를 구현하며 Vertices 기반의 인터랙션에 영감을 받아 제작하게 되었습니다.
- Three.js Plane 메쉬의 정점(Vertices) 변형 애니메이션 구현 (R3F)
PlaneGeometry메쉬를 생성하고 텍스처를 적용- Plane 버텍스 그리드를 생성하고 정점(vertices)의
z축 위치를 실시간으로 변형하여 애니메이션 구현 - Vertex와 Fragment 셰이더를 이용해 물결효과의 강도 · 속도 · 진폭을 설정하고, 컨트롤러를 통해 실시간으로 조절하며 시각적으로 확인 가능
-
스크롤 기반 3D 메시 형태 오브젝트 형태 변형 (R3F, GSAP)
-
R3F(React-Three-Fiber)와 GSAP를 활용해 스크롤 위치에 따라 원통(Cylinder)에서 평면 형태로 부드럽게 변형
-
Cyliender Mesh의 정점(Vertices)을 스크롤에 따라 Plane 의 정점 위치로 변경하여 형태를 변형
-
카메라 FOV와 캔버스 크기를 계산해 Plane 의 사이즈를 동적으로 설정
-
-
광원 반응효과: 화면의 하단에 스크롤 속도에 따라 광원 세기를 변화시켜 시각적 재미 요소를 추가
-
GSAP ScrollSmoother 를 활용하여 스크롤의 속도와 부드러움의 정도를 설정
-
스크롤이 발생할 때, 스크롤의 속도에 따라 광원효과의 높이를 조절하여 역동적인 효과를 구현
-
실제로 스크롤 방향이 순방향인 경우에만 광원효과를 노출
-