🏙️ GridCity

CesiumJS + Three.js로 구현한 서울 실제 지도 위 Low-Poly 도시 시뮬레이션

🎯 핵심 기술

CesiumJS와 Three.js의 WebGL 컨텍스트 공유

두 라이브러리가 동일한 WebGL 컨텍스트를 공유하여 실제 위성지도 위에 Three.js 3D 오브젝트를 렌더링합니다.

Cesium (위성지도 + ECEF 좌표계) └── Three.js (같은 WebGL 컨텍스트 공유) ├── 절차적 건물 생성 ├── 도로망 └── 차량 애니메이션

✨ 기능

• 🌍 서울 실제 위성지도 위에 Low-Poly 도시 배치
• 🏢 절차적 건물 생성 (고층빌딩 / 저층 / 공원)
• 🚗 도로망 위 차량 애니메이션
• 📡 Cesium ENU 좌표계 → Three.js 변환

🛠 기술 스택

기술	역할
CesiumJS	위성지도, ECEF 좌표계, 지형
Three.js	Low-Poly 3D 렌더링
Vite	빌드 도구

🚀 실행 방법

npm install
cp .env.example .env   # VITE_CESIUM_ION_TOKEN 값 입력
npm run dev

Cesium Ion 토큰이 필요합니다. ion.cesium.com 에서 무료 발급 후 .env의 VITE_CESIUM_ION_TOKEN에 입력하세요.

☁️ 배포 (Vercel)

vercel.json이 포함되어 있어 Vercel에서 저장소를 import 하면 바로 빌드됩니다.

1. Vercel 프로젝트 생성 → 이 저장소 연결
2. Settings → Environment Variables에 VITE_CESIUM_ION_TOKEN 추가
3. Deploy

📁 구조

src/ ├── main.js # Cesium + Three.js 통합 엔진 ├── createCity.js # 절차적 건물 생성 ├── createRoads.js # 도로망 └── createCars.js # 차량 애니메이션