👋🏻 Five.js

: 우아한테크코스 7기 프론트엔드 크루들이 모여, React와 Three.js를 활용해 3D 씬을 웹에서 인터랙티브하게 구현한 프로젝트입니다.

🚀 Try it out

🔗 배포링크

🎬 Scenes

각 팀원이 구현한 3D 씬과 그에 따른 인터랙션을 소개합니다.

제작자	씬	인터렉션
블루 @hanheel	🎵 Bass	줄 클릭 시 진동 + 사운드 + 음표 표출
상추 @sanghee01	🛰 Sangchu	마우스를 따라 오브젝트 이동 및 클릭 시 회전 애니메이션 + 사운드 + 말풍선
다이앤 @Daeun-100	🪐 Card Orbit	클릭 시 회전 및 빛 방출
카멜 @dev-dino22	🐫 Camel Space	내부 오브젝트 접근 및 말풍선 생성
제나 @JeLee-river	🌌 Screens	클릭 시 장면 이미지들이 스크린 주변에 생성

📁 폴더 구조

src/
├── assets       # 정적 자산 (이미지, GLB 모델 등)
├── components   # 공통 UI 컴포넌트
├── constants    # 라우팅 등 전역 상수 모음
├── hooks        # 커스텀 React 훅
├── pages        # 라우팅되는 페이지 컴포넌트
│   ├── common   # 공통 페이지 (e.g., 씬 래퍼 등)
│   └── scenes   # 각 Three.js 씬 페이지
├── router       # 라우터 설정
├── styles       # 글로벌 스타일, 테마 설정
├── util         # 유틸리티 함수 모음

⚙️ 설치 및 실행

git clone https://github.com/woowacourse-study/2025-threejs-study.git
npm install
npm run dev

👥 Contributors

Blue	Sangchu	Camel
Diane	Jenna