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
- 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
-
Clone the repository:
git clone https://github.com/jeantimex/geospatial.git cd geospatial -
Install dependencies:
npm install
-
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 (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 buildThe built files will be in the dist direct
62F1
ory.
- 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)