Eine interaktive 3D-Visualisierung, die erklärt, warum es Jahreszeiten gibt. An interactive 3D visualization explaining why seasons exist.
Deutsch: Diese Web-Anwendung zeigt anschaulich, wie die 23,44° Achsenneigung der Erde die Jahreszeiten verursacht – nicht die Entfernung zur Sonne. Mit Three.js erstellt, bietet sie wissenschaftlich akkurate Berechnungen und eine intuitive Benutzeroberfläche.
English: This web application demonstrates how Earth's 23.44° axial tilt causes seasons – not the distance to the sun. Built with Three.js, it provides scientifically accurate calculations and an intuitive user interface.
- 🎬 Animation Mode - Play through the year automatically with adjustable speed (0.25x - 10x)
- 🌐 Multilingual - German, English, Spanish, French
- 📅 Date Picker - Jump to any date to see Earth's position
- 🎥 Camera Modes - Free, Earth-centered, Sun-centered
- 🌓 Dark/Light Theme - Toggle between themes
- 📱 Fully Responsive - Works on desktop, tablet, and mobile
- Orbit Path - Shows Earth's elliptical orbit around the Sun
- Orbit Labels - Key dates (solstices, equinoxes) marked on orbit
- Tropics - Tropic of Cancer & Capricorn
- Polar Circles - Arctic & Antarctic circles
- Geographic Grid - Latitude lines every 15°
- Ecliptic Plane - The orbital plane
- Sun Rays - Parallel rays showing sunlight direction
- Coordinate Systems - Both solar and Earth-centered
- No-Tilt Mode - Compare with/without axial tilt
- 23.44° Axial Tilt - Exact Earth tilt angle
- Kepler's Laws - Elliptical orbit calculations (eccentricity 0.0167)
- Solar Declination - Accurate sun position formula
- Day Length Calculations - Precise sunrise/sunset times
- Insolation Angle - Sun's angle at Tropic of Cancer
- Modern web browser (Chrome, Firefox, Safari, Edge)
- No build tools required!
- No npm/node installation needed
-
Clone oder download das Projekt:
git clone https://github.com/yourusername/jahreszeiten-3d.git cd jahreszeiten-3d -
Öffne die index.html Datei:
- Doppelklick auf
index.html - Oder starte einen lokalen Server:
# Python 3 python -m http.server 8000 # Python 2 python -m SimpleHTTPServer 8000 # Node.js (with npx) npx http-server
- Doppelklick auf
-
Im Browser öffnen:
- Wenn lokaler Server:
http://localhost:8000 - Sonst: Direktes Öffnen der HTML-Datei
- Wenn lokaler Server:
- Play/Pause Button - Start/stop the year animation
- Speed Selector - Choose animation speed (0.25x to 10x)
- Progress Bar - Click to jump to specific day of year
- Keyboard Shortcuts:
Space- Play/Pause+or=- Increase speed-- Decrease speed
- Mouse Drag - Rotate view (free camera mode)
- Mouse Wheel - Zoom in/out
- Camera Mode Selector:
- Free Camera - Manual control
- Earth Centered - Follow Earth
- Sun Centered - Static sun view
- Reset Camera Button - Return to default view
- Date Picker - Select any date
- Today Button - Jump to current date
- Year automatically advances in animation mode
- Earth Opacity Slider - Make Earth transparent
- Sun Opacity Slider - Adjust sun visibility
- Orbit Labels - Show/hide date markers
- Polar Circles - Arctic & Antarctic
- Geographic Grid - Latitude lines
- Equator Plane - Equatorial plane
- Ecliptic Plane - Orbital plane
- Sun Rays - Parallel sunlight rays
- Coordinate Systems - Axis indicators
- No Tilt Mode - Toggle axial tilt on/off
- Toggle Button (◀/▶) - Show/hide information panel
- Location Selector - Choose city for sun elevation
- Real-time Data:
- Current date
- Day length (Equator, Berlin, Sydney, South Pole)
- Insolation angle at Tropic of Cancer
- Sun-Earth distance
- Current season (hemisphere)
- Sun elevation for selected location
Die Antwort: Achsenneigung, nicht Entfernung! The Answer: Axial Tilt, Not Distance!
Die Erde ist um 23,44° geneigt. Diese Neigung ist konstant und ändert sich nicht. Während die Erde um die Sonne kreist, zeigt mal die Nordhalbkugel zur Sonne (Juni = Sommer Nord), mal die Südhalbkugel (Dezember = Sommer Süd).
Earth is tilted at 23.44°. This tilt is constant and doesn't change. As Earth orbits the sun, sometimes the Northern Hemisphere faces the sun (June = Northern summer), sometimes the Southern Hemisphere (December = Southern summer).
- 21. März / March 21 - Frühlings-Tagundnachtgleiche / Spring Equinox (North)
- 21. Juni / June 21 - Sommersonnenwende Nord / Summer Solstice (North)
- 21. September / September 21 - Herbst-Tagundnachtgleiche / Autumn Equinox (North)
- 21. Dezember / December 21 - Wintersonnenwende Nord / Winter Solstice (North)
Solar Declination (Sonnenstand):
δ = 23.44° × sin((2π/365) × (dayOfYear - 81))
Orbital Position (Kepler's Laws):
Mean Anomaly: M = (2π/365.25) × (dayOfYear - 4)
Eccentric Anomaly: E = M + e × sin(E) [iterative]
True Anomaly: v = 2 × arctan2(√(1+e) × sin(E/2), √(1-e) × cos(E/2))
Distance: r = a(1-e²)/(1 + e×cos(v))
Day Length:
cos(H) = -tan(latitude) × tan(declination)
Day Length = (2 × H × 12) / π
Where H = hour angle at sunrise/sunset
jahreszeiten/
├── index.html # Main HTML file (~110 lines)
├── main.js # 3D engine & physics (~1334 lines)
├── controls.js # UI controls & animation (~843 lines)
├── styles.css # Modern CSS design (~857 lines)
├── languages.json # Translations (DE, EN, ES, FR)
├── README.md # This file
└── textures/
├── earth_day.jpg # Earth day texture (8K recommended)
└── earth_night.jpg # Earth night lights texture
- Three.js (v0.158.0) - WebGL 3D library
- Vanilla JavaScript - No frameworks
- CSS3 - Modern styling with CSS variables
- HTML5 - Semantic markup
- 60 FPS on modern hardware
- Optimized rendering with requestAnimationFrame
- Efficient memory management (proper disposal of Three.js objects)
- Responsive design adapts to screen size
- ✅ Chrome 90+
- ✅ Firefox 88+
- ✅ Safari 14+
- ✅ Edge 90+
Modular Design:
Appobject manages global state- Separate modules for rendering, physics, UI
- Clean separation of concerns
Enhanced Shaders:
- Custom GLSL vertex/fragment shaders
- Atmospheric scattering effect
- Smooth day/night terminator
- Procedurally generated starfield (1000 stars)
State Management:
const App = {
scene, camera, renderer,
objects: { earth, sun, earthGroup, tiltGroup, stars },
visualization: { orbitPath, orbitLabels, ... },
state: {
currentDate,
noTiltMode,
camera: { mode, distance, phi, theta },
animation: { isPlaying, speed, lastTime }
}
};In styles.css, edit CSS variables:
:root {
--primary-color: #0066cc; /* Main accent color */
--secondary-color: #00ccff; /* Secondary accent */
--bg-color: #000000; /* Background */
--text-color: #ffffff; /* Text color */
}Place your own Earth textures in /textures/:
earth_day.jpg- Daytime surface (recommended: 8K resolution)earth_night.jpg- Night lights (recommended: 8K resolution)
Free textures available at:
In main.js, adjust:
const CONFIG = {
EARTH_RADIUS: 1.0, // Earth size
SUN_RADIUS: 0.5, // Sun size
SUN_DISTANCE: 10.0, // Distance (AU scaled)
EARTH_AXIAL_TILT: 23.44, // Degrees
ECCENTRICITY: 0.0167, // Orbital eccentricity
STARS_COUNT: 1000, // Background stars
ATMOSPHERE_INTENSITY: 0.4 // Glow strength
};This project is ideal for:
- Classroom teaching - Astronomy, Earth Science
- Science museums - Interactive exhibits
- Self-learning - Understanding seasons
- Presentations - Educational talks
Recommended Age: 10+ years
Learning Objectives:
- Understand why seasons occur
- Differentiate between axial tilt and orbital distance
- Recognize solstices and equinoxes
- Observe day length variations
- Comprehend Kepler's laws (advanced)
Contributions welcome! Please:
- Fork the repository
- Create a feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add AmazingFeature') - Push to branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Ideas for contributions:
- Additional languages
- More visualization options
- Performance optimizations
- Mobile UI improvements
- Educational overlays
This project is licensed under the MIT License - see LICENSE file for details.
Free to use for educational purposes.
Developed by: [Tobias Eberlein] Rebuilt: January 2026 Version: 2.0.0
Special Thanks:
- Three.js - Amazing 3D library
- NASA - Earth texture sources
- Astronomical calculations based on Jean Meeus' formulas
Issues? Open an issue on GitHub Questions? Contact [tobiaseberlein@hotmail.de]
⭐ If you find this project useful, please give it a star on GitHub!
Last updated: January 5, 2026