스크롤로 1980년 5월 광주의 14개 장면을 순서대로 체험하는 Three.js + React 웹 경험.
항공 시점에서 시작해 거리로 강하하며 역사적 사건에 몰입하는 스크롤-카메라 연동 방식.
| 씬 | 내용 | 날짜 |
|---|---|---|
| 00 | 한국 지도 등장 + 배경 설명 | 1979.10.26 |
| 01 | 12·12 군사 쿠데타 | 1979.12.12 |
| 02 | 전국 대학가 민주화 시위 | 1980년 봄 |
| 03 | 한국 지도 → 광주 → 전남대 확대 | 5.18 오전 |
| 04 | 공수부대 진압 + 최루탄 파티클 | 5.18 오전 |
| 05 | 택시·버스 차량 시위 — 금남로 | 5.20 밤 |
| 06 | 광주MBC 방화 ★ | 5.20 21:50 |
| 07 | 집단 발포 | 5.21 13:00 |
| 08 | 전일빌딩 헬기 사격 ★ | 5.21 오후 |
| 09 | 한국 지도 — 광주 봉쇄 | 5.21~5.22 |
| 10 | 5.18민주광장 제1차 시민궐기대회 ★ | 5.23 13:00 |
| 11 | 장갑차 도청 진입 | 5.27 04:00 |
| 12 | 병원 — 부상자 통계 | 항쟁 후 |
| 13 | 기억 — 국립5.18민주묘지 ★ | 현재 |
★ 광주문화예술인문스토리플랫폼 GLB 모델 사용 (CC BY-SA 4.0)
- 스크롤 카메라:
ScrollControls+CatmullRomCurve3경로로 항공 시점 → 1인칭 시점 전환 - 필름 셰이더: 스크롤 진행에 따라 흑백 → 세피아 → 컬러 전환 + 필름 그레인 + 비네팅
- HUD 타임라인: 우측 고정 날짜 진행 표시 (5.18 → 5.27)
- 자동재생 / 배속: 자동으로 씬을 진행하며 재생 속도 조절 가능
- 처음 / 끝 버튼: 첫 씬 또는 마지막 씬으로 즉시 이동
- 로딩 화면: GLB 모델 및 OSM 데이터 로드 중 진행 표시
bun install
bun run dev # http://localhost:5173
bun run build| 종류 | 출처 | 라이선스 |
|---|---|---|
| 지리 데이터 | OpenStreetMap contributors (Overpass API) | ODbL |
| 역사 자료 | 5·18기념재단, 5·18민주화운동기록관, 민주화운동기념사업회 | 인용 |
| 사실 검증 | 5·18민주화운동기록관, 한국어 위키백과 「5·18 광주민주화운동」 | 인용 |
| 3D 모델 4점 | 한국학중앙연구원 광주문화예술인문스토리플랫폼 (dh.aks.ac.kr/~gwangju) |
CC BY-SA 4.0 |
3D 모델 (Scene 06·08·10·13): 옛광주MBC, 전일빌딩245, 5.18민주광장분수대, 국립5.18민주묘지
파일별 원본 URL은 public/models/LICENSE.txt 참고.
본 프로젝트는 사용 중인 3D 모델의 ShareAlike 요건에 따라
Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) 으로 공개합니다.