A collection of Three.js-based geospatial visualizations, featuring an Earth atmosphere rendering demo.
This demo showcases a realistic Earth atmosphere effect using the @takram/three-atmosphere library. The visualization includes:
- Realistic sky rendering with proper light scattering
- Dynamic sun and moon positioning
- Atmospheric perspective effects
- Interactive camera controls
NXVlKBL3HNdXlBPg.mp4
- Node.js (v16 or higher recommended)
- npm or yarn
- Google Maps JavaScript API key (for Tiles demo)
-
Clone the repository:
git clone https://github.com/jeantimex/geospatial.git cd geospatial -
Install dependencies:
npm install --legacy-peer-deps
Note: The
--legacy-peer-depsflag is required due to peer dependency conflicts between packages. Specifically,3d-tiles-rendererrequires React 18, while other dependencies (likeexpopulled in by@react-three/fiber) expect React 19. This flag tells npm to use the older, more permissive dependency resolution algorithm to handle these version conflicts. -
Create a
.envfile in the root directory with the following content:VITE_GOOGLE_MAPS_JS_API_KEY=your_google_maps_api_key_hereReplace
your_google_maps_api_key_herewith your actual Google Maps JavaScript API key.Important: Make sure to enable both the Maps JavaScript API and Map Tiles API for your API key in the Google Cloud Console.
-
Start the development server:
npm run dev
-
Open your browser and navigate to the URL shown in the terminal (typically http://localhost:5173).
- Atmosphere: A realistic Earth atmosphere visualization. This is based on @takram/three-geospatial's Atmosphere Vanilla demo.
- Clouds: Simulate the clouds visualization. This is based on @takram/three-geospatial's Clouds Vanilla demo.
- Deferred Lighting: Use deferred lighting technique to render the atmosphere and a simple Three.JS torus knot object.
- Tiles: The vanilla implementation of rendering Google Photorealistic Tiles using NASA-AMMOS/3DTilesRendererJS library.
To build the project for production:
npm run buildThe built files will be in the dist directory.
- Atmosphere rendering based on the @takram/three-atmosphere library
- Earth texture assets from NASA Visible Earth
- 3D tiles rendering from NASA-AMMOS/3DTilesRendererJS library
- Google Photorealistic Tiles API
MIT
Yong Su (jeantimex)