{"id":30344988,"url":"https://github.com/code-parth/geo-globe-three","last_synced_at":"2026-05-01T00:31:57.235Z","repository":{"id":309069088,"uuid":"1031519363","full_name":"Code-Parth/geo-globe-three","owner":"Code-Parth","description":"An interactive 3D globe visualization built with Next.js, React Three Fiber, and Three.js that displays world country boundaries using GeoJSON data.","archived":false,"fork":false,"pushed_at":"2026-03-28T06:13:38.000Z","size":2141,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-03-28T11:20:47.219Z","etag":null,"topics":["drei","earth","geojson","nextjs","react19","tailwindcss","three-drei","three-fiber","threejs","typescript","webgl","world"],"latest_commit_sha":null,"homepage":"https://geo-globe-three.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Code-Parth.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-08-03T23:03:21.000Z","updated_at":"2026-03-28T06:09:33.000Z","dependencies_parsed_at":"2025-08-09T23:32:18.616Z","dependency_job_id":null,"html_url":"https://github.com/Code-Parth/geo-globe-three","commit_stats":null,"previous_names":["code-parth/geo-globe-three"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Code-Parth/geo-globe-three","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Code-Parth%2Fgeo-globe-three","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Code-Parth%2Fgeo-globe-three/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Code-Parth%2Fgeo-globe-three/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Code-Parth%2Fgeo-globe-three/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Code-Parth","download_url":"https://codeload.github.com/Code-Parth/geo-globe-three/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Code-Parth%2Fgeo-globe-three/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32481553,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-30T13:12:12.517Z","status":"ssl_error","status_checked_at":"2026-04-30T13:12:06.837Z","response_time":57,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["drei","earth","geojson","nextjs","react19","tailwindcss","three-drei","three-fiber","threejs","typescript","webgl","world"],"created_at":"2025-08-18T13:27:00.139Z","updated_at":"2026-05-01T00:31:57.226Z","avatar_url":"https://github.com/Code-Parth.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Geo Globe Three\n\nAn interactive 3D globe visualization built with Next.js, React Three Fiber, and Three.js that displays world country boundaries using GeoJSON data.\n\n![Geo Globe Three](./public/screenshot.png)\n\n## Tech Stack\n\n- **Framework**: Next.js 15.4.5 with Turbopack\n- **UI**: React 19 with TypeScript\n- **3D Graphics**: Three.js, React Three Fiber, React Three Drei\n- **Styling**: Tailwind CSS 4\n- **Data**: GeoJSON world boundaries\n\n## Getting Started\n\n### Prerequisites\n\n- Node.js 18+ or Bun\n- Modern web browser with WebGL support\n\n### Installation\n\n1. Clone the repository:\n\n```bash\ngit clone https://github.com/Code-Parth/geo-globe-three\ncd geo-globe-three\n```\n\n2. Install dependencies:\n\n```bash\nbun install\n# or\nnpm install\n```\n\n3. Start the development server:\n\n```bash\nbun run dev\n# or\nnpm run dev\n```\n\n4. Open [http://localhost:3000](http://localhost:3000) in your browser.\n\n## Scripts\n\n- `dev` - Start development server with Turbopack\n- `build` - Build for production\n- `start` - Start production server\n- `lint` - Run ESLint\n- `lint:fix` - Fix linting issues and format with Prettier\n\n## Components\n\n### Globe Component\n\nThe main 3D globe visualization that:\n\n- Loads world boundary data from GeoJSON\n- Converts geographic coordinates to 3D sphere coordinates\n- Renders country outlines as white lines on a dark sphere\n- Supports both Polygon and MultiPolygon geometries\n\n### Wrapper Component\n\nA responsive layout wrapper that:\n\n- Creates an adaptive grid overlay\n- Provides corner markers for visual framing\n- Maintains responsive design across different screen sizes\n\n## Controls\n\n- **Rotate**: Click and drag to rotate the globe\n- **Zoom**: Scroll wheel to zoom in/out (limited between 4-12 units)\n- **Pan**: Disabled for focused globe interaction\n\n## Configuration\n\nThe globe can be customized by modifying parameters in `app/page.tsx`:\n\n- **Sphere radius**: Adjust the `radius` parameter in `convertToSphereCoordinates`\n- **Camera position**: Modify the `camera` prop in the Canvas component\n- **Material colors**: Change sphere and line materials in the Globe component\n- **Control limits**: Adjust min/max distance and speeds in OrbitControls\n\n## Data Source\n\nThe project uses world boundary data from a GeoJSON file (`public/world.geojson`) that contains:\n\n- Country polygons and multipolygons\n- Detailed boundary coordinates\n- Country metadata and properties\n\n## Contributing\n\n1. Fork the repository\n2. Create a feature branch\n3. Make your changes\n4. Run `bun run lint:fix` to ensure code quality\n5. Submit a pull request\n\n## Deploy on Vercel\n\nThe easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template\u0026filter=next.js\u0026utm_source=create-next-app\u0026utm_campaign=create-next-app-readme) from the creators of Next.js.\n\nCheck out the [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcode-parth%2Fgeo-globe-three","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcode-parth%2Fgeo-globe-three","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcode-parth%2Fgeo-globe-three/lists"}