An immersive, true-to-scale 3D visualization of our solar system with accurate planetary sizes, distances, orbits, and scientific data. Experience the real proportions of our cosmic neighborhood directly in your browser.
🚀 Experience the vastness of space - See how small Earth really is compared to the Sun, and how far apart the planets actually are in our solar system.
- True-to-scale 3D model with realistic sizes, distances, and orbital mechanics
- Interactive controls: orbit/zoom/pan, click-to-explore, rotation controls
- Performance: Web Workers, texture caching, real memory monitor, optimized renders
- Visual fidelity: 10k+ star field, atmospheric glow, ring systems, detailed sun
- Responsive: Works across desktop and mobile with touch support
The project checklist is complete. Here’s a concise overview of what’s shipped and what’s next:
- Core: True-to-scale 3D solar system, realistic planetary details, 10k+ star field, atmospheric glow, ring systems, interactive 3D planet models.
- UI & Controls: Orbit/zoom/pan camera, speed control up to 10,000,000x with real-time conversion, responsive and touch-friendly UI, info modals, optimized context performance.
- Performance: Web Workers for heavy work, texture caching with memory tracking, real memory monitor, debounced generation, reduced re-renders.
- Scientific: Accurate orbital mechanics, axial tilts, retrograde rotations (Venus, Uranus), solar surface features.
- Occasional FPS dips on low-end devices under heavy load.
- Real planet surface imagery for higher realism
- Multi-language support
- Timeline for historical planetary positions
- Additional camera presets
- Next.js 15.2.4: React framework with App Router
- React 19: Latest React version with improved performance and hooks optimization
- TypeScript 5: Type-safe code ensuring reliability and explicit typing
- React Three Fiber 9.1.2: React renderer for Three.js
- Three.js 0.176.0: JavaScript 3D library
- TextureLoader: High-quality planet texture images for photorealistic rendering
- Tailwind CSS 3.4.17: Utility-first CSS framework
- Framer Motion 12.9.2: Smooth animations and transitions
- React Context API: Optimized with useMemo and useCallback for stable references
- Explicit TypeScript Typing: Enhanced type safety across all components
- Memoized Context Values: Prevents unnecessary re-renders and improves performance
- Calculation Optimization: Centralized rotation calculations with caching and Web Worker support
- Render Cycle Optimization: Reduced complex calculations in render cycles with utility functions
- Texture Loading Optimization: Asynchronous texture loading with LRU caching for efficient memory usage
- UI Performance: Smooth rendering with fallback materials during texture loading
- Mouse/Touch: Orbit around the solar system
- Scroll/Pinch: Zoom in/out with smooth camera movement
- Right-Click and Drag: Pan the view
- Click on Planets: View detailed scientific information
- Speed Slider: Adjust simulation speed from 1x to 10,000,000x
- Real-Time Conversion: See how much real time corresponds to simulation time
- 3D Planet Models: Interactive rotating models in modal with accurate axial tilts
- Smart UI: Planet labels automatically hide when viewing detailed information
- Responsive Design: Optimized for all screen sizes and devices
- Performance: Memory Monitor pauses FPS/polling when hidden or tab inactive
- Hydration: Client-only guards to prevent SSR mismatches
- Accuracy: Fixed cache usage percentage edge cases
- See full details in CHANGELOG.md
The solar system uses high-quality, photorealistic texture images for all celestial bodies:
- Location:
public/textures/directory - Resolution: 2048x1024 pixels (2:1 aspect ratio for sphere mapping)
- Format: JPG for planets (optimized file size), PNG for rings (with transparency)
- Sources: NASA imagery and public domain astronomical textures
- Realistic Surface Details: Earth shows continents and oceans, Mars displays red geological features, gas giants show atmospheric bands
- Efficient Loading: Asynchronous texture loading with LRU caching prevents duplicate loads
- Error Handling: Graceful fallback to base colors if textures fail to load
- Memory Management: Automatic cache cleanup with configurable limits (max 20 textures)
- Special Materials: Sun uses emissive material for self-illumination effect
- Node.js 18+
- pnpm (recommended) or npm
# Install dependencies
pnpm install
# Start development server
pnpm devpnpm dev- Start development serverpnpm build- Build for productionpnpm start- Start production serverpnpm lint- Run ESLintpnpm release- Create a new releasepnpm changelog- Generate changelog from conventional commits
We welcome contributions! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.
- Follow TypeScript best practices with explicit typing
- Use React hooks optimization (useMemo, useCallback) for performance
- Maintain component reusability and proper context patterns
- Add proper documentation for new features
- Ensure responsive design compatibility
- Implement proper error boundaries and null checks
This project is licensed under the MIT License - see the LICENSE file for details.
- NASA for scientific data and inspiration
- Three.js community for the amazing 3D library
- React Three Fiber for seamless React integration
- Next.js team for the excellent framework
This application is optimized for modern browsers and requires WebGL support:
- Recommended browsers: Chrome, Firefox, Safari, or Edge (latest versions)
- WebGL support: Ensure WebGL is enabled in your browser
- Hardware: Dedicated graphics card recommended for smoother performance
- Mobile: Full support for touch devices with optimized controls
- Minimum requirements: 4GB RAM and modern CPU
The project uses semantic versioning for releases:
# Create a new release
pnpm release
# Release specific versions
pnpm release:patch # Bug fixes, small improvements
pnpm release:minor # New features, backward compatible
pnpm release:major # Breaking changesWhen you create a release, the system will:
- Create a git tag with the new version
- Trigger GitHub Actions to automatically create a GitHub release
- Extract changelog content from CHANGELOG.md
- Create a formatted release with automatic deployment to Vercel
If you encounter any issues or have questions:
- Check the Issues page
- Create a new issue with detailed information
- Contact the maintainers for support
Note: This is an educational tool designed to provide accurate astronomical information. While we strive for scientific accuracy, this simulation is for educational purposes and should not be used for professional astronomical calculations.