React와 Three.js로 구현된, 몰입감 높은 우주 배경의 인터랙티브 3D 지구본 웹 애플리케이션
단일 HTML5 파일 내에 React(CDN)와 Three.js를 통합하여 구축된 웹 기반 3D 지구본 뷰어입니다.
사용자가 마우스나 터치로 지구본을 자유롭게 탐색할 수 있으며, 정교한 별 배경과 지구의 자전축 기울기(23.5°)를 반영해 현실감 있는 우주 시뮬레이션을 제공합니다.
Interactive-Earth-Globe 프로젝트는 브라우저에서 바로 실행되는 몰입감 높은 3D 지구본 웹 애플리케이션입니다.
React와 Three.js를 활용하여 컴포넌트 기반 구조와 라이프사이클 관리, 3D 렌더링 및 사용자 상호작용을 구현했습니다.
사용자가 지구본을 회전, 확대/축소하며 탐색할 수 있고, 자연스러운 애니메이션과 시각적 몰입감을 제공합니다.
- HTML5 / CSS3 - 프로젝트 구조, 전체 화면 레이아웃, 안내 메시지 부드러운 페이드 아웃
- JavaScript (ES6+) - 3D 로직, 애니메이션 루프, UI 이벤트 처리
- React (CDN) - 컴포넌트 구조(EarthGlobe) 및 라이프사이클 관리(useEffect)
- Three.js (r128) - 지구본 및 우주 별 배경 렌더링
- OrbitControls - 회전, 확대/축소를 위한 사용자 친화적 궤도 제어
- 현실적인 3D 렌더링: 지구본 텍스처, 명암 및 자전축 기울기(23.5°) 반영
- 우주 환경 구현: 10,000개의 별로 구성된 동적 Star Field 배경
- 직관적 상호작용: 마우스/터치 드래그 회전, 스크롤/핀치 줌
- 자동 애니메이션: 느린 속도(0.0025 배속) 자전 애니메이션
- 완벽한 반응성: 화면 크기와 상관없이 전체 화면 렌더링, 모바일에서도 최적화
- 클린 UI 경험: 사용자가 조작 시작 시 상단 안내 메시지 자동 사라짐
https://xcixcode.github.io/Interactive-Earth-Globe/
index.html파일을 다운로드하거나 복사합니다.- 로컬 브라우저에서 직접 파일을 엽니다.
- 별도의 서버 설정이나 Node.js 설치 없이 바로 실행 및 사용 가능
본 프로젝트는 개인 학습 및 포트폴리오 용도로 제작되었습니다.
코드는 MIT License 하에 배포되며, 사용 시 라이선스 조건을 준수해야 합니다.
⚠️ 참고
- 모바일 환경에서도 최적화되어 있지만, 일부 기기에서는 UI가 완벽하게 표시되지 않을 수 있음
- 외부 라이브러리 및 자료 출처:
- 위 라이브러리들은 CDN을 통해 로드되므로, 인터넷 연결이 없으면 기능/UI가 정상적으로 표시되지 않을 수 있음