https://www.itsoffbrand.com/
프로젝트 소개
주제 : OFF Brand 인터렉션 클론 프로젝트
기간 : 2024.05 ~ 2024.05 (3주)
인원 : 웹 퍼블리셔 1명
스택 : React, ThreeJS, SCSS, GSAP, Git
역할 : 웹 퍼블리싱
기여한 부분
✔️ MeshDistortMaterial 마우스 이벤트 구현
- @react-three/drei의 MeshDistortMaterial을 활용해 마우스 위치에 따라 동적으로 왜곡되는 효과 구현
- 마우스 호버 시 인터랙션이 자연스럽게 반응하도록 useFrame과 useRef를 사용하여 실시간 애니메이션 처리
✔️ 스크롤 모션 구현
- gsap 라이브러리를 활용하여 스크롤에 따라 3D 요소가 자연스럽게 전환되도록 구현
트러블 슈팅