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

Atmosphere Demo Preview

• Three.js (v0.175.0)
• @takram/three-atmosphere (v0.11.1)
• @takram/three-geospatial (v0.2.0)
• @takram/three-geospatial-effects (v0.3.0)
• Postprocessing (v6.36.7)
• Vite (for development and building)

• Node.js (v16 or higher recommended)
• npm or yarn
• Google Maps JavaScript API key (for Tiles demo)

1. Clone the repository:

   git clone https://github.com/jeantimex/geospatial.git
   cd geospatial

2. Install dependencies:

   npm install

3. Create a .env file in the root directory with the following content:

   VITE_GOOGLE_MAPS_JS_API_KEY=your_google_maps_api_key_here
   

   Replace your_google_maps_api_key_here with 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.

4. Start the development server:

   npm run dev

5. Open your browser and navigate to the URL shown in the terminal (typically http://localhost:5173).

• Atmosphere: A realistic Earth atmosphere visualization (https://jeantimex.github.io/geospatial/atmosphere.html). This is based on @takram/three-geospatial's Atmosphere Vanilla demo: https://takram-design-engineering.github.io/three-geospatial/?path=/story/atmosphere-atmosphere--vanilla.
• Clouds: Simulate the clouds visualization (https://jeantimex.github.io/geospatial/clouds.html). 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. (https://jeantimex.github.io/geospatial/deferred-lighting.html)
• Tiles: The vanilla implementation of rendering Google Photorealistic Tiles using NASA-AMMOS/3DTilesRendererJS library. (https://jeantimex.github.io/geospatial/tiles.html)

To build the project for production:

npm run build

The 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)