Interactive 3D visualization of the Earth and Moon system built with React, Three.js, and modern Web APIs. This project demonstrates advanced input handling, responsive design, and real-time 3D graphics.
- Realistic Earth and Moon models with accurate textures
- Physically accurate Moon orbit with proper tilt
- Dynamic lighting and shadows
- Smooth camera controls and animations
- Device orientation tracking
- Pressure-sensitive pointer input
- Gamepad support
- Touch and mouse controls
- Real-time event logging
- Mobile-first approach
- Adaptive UI for different screen sizes
- Sliding panel for mobile navigation
- Touch-optimized controls
- Real-time space measurements display
- Earth-Moon distance tracking
- Planetary diameter information
- Dynamic event logging system
- React 18
- Three.js with React Three Fiber
- TypeScript
- Tailwind CSS
- Lucide React Icons
- Web APIs:
- Device Orientation API
- Pointer Events API
- Gamepad API
- Clone the repository
- Install dependencies:
npm install
- Start the development server:
npm run dev
- Mouse Drag: Rotate view
- Scroll: Zoom in/out
- Reset Button: Return to default view
- Play/Pause: Toggle Moon orbit animation
- One Finger: Rotate view
- Two Fingers: Pinch to zoom
- Device Orientation: Automatic view adjustment
- Menu Button: Access measurements and input data
Ed Bates (TECHBLIP LLC)
Some sections of this code were generated with the assistance of AI tools. These contributions were reviewed and integrated by the project creator(s).
Apache-2.0 License - see the LICENSE file for details