75 lines
1.8 KiB
Markdown
75 lines
1.8 KiB
Markdown
# Cosmo Frontend
|
|
|
|
Frontend application for the Cosmo deep space explorer visualization system.
|
|
|
|
## Tech Stack
|
|
|
|
- React 18
|
|
- TypeScript
|
|
- Vite (build tool)
|
|
- Three.js (3D rendering)
|
|
- @react-three/fiber (React Three.js integration)
|
|
- @react-three/drei (Three.js helpers)
|
|
- Tailwind CSS (styling)
|
|
- Axios (HTTP client)
|
|
|
|
## Setup
|
|
|
|
1. Install dependencies:
|
|
```bash
|
|
yarn install --ignore-engines
|
|
```
|
|
|
|
2. Start development server:
|
|
```bash
|
|
yarn dev
|
|
```
|
|
|
|
The app will be available at http://localhost:5173/
|
|
|
|
## Project Structure
|
|
|
|
```
|
|
src/
|
|
├── components/
|
|
│ ├── Scene.tsx # Main 3D scene
|
|
│ ├── CelestialBody.tsx # Individual celestial body renderer
|
|
│ └── Loading.tsx # Loading screen
|
|
├── hooks/
|
|
│ └── useSpaceData.ts # Data fetching hook
|
|
├── types/
|
|
│ └── index.ts # TypeScript types
|
|
├── utils/
|
|
│ └── api.ts # API utilities
|
|
├── App.tsx # Main app component
|
|
└── main.tsx # Entry point
|
|
```
|
|
|
|
## Features
|
|
|
|
### Current
|
|
- 3D visualization of the solar system
|
|
- Real-time data from NASA JPL Horizons
|
|
- Interactive camera controls (orbit, pan, zoom)
|
|
- Celestial bodies rendered at their current positions
|
|
- Stars background
|
|
|
|
### Controls
|
|
- **Left click + drag**: Rotate camera
|
|
- **Right click + drag**: Pan camera
|
|
- **Scroll wheel**: Zoom in/out
|
|
|
|
## Development Notes
|
|
|
|
- The app requires the backend API to be running at http://localhost:8000
|
|
- Uses yarn instead of npm due to dependency compatibility
|
|
- Node version 20+ recommended (use `--ignore-engines` flag if needed)
|
|
|
|
## Next Steps
|
|
|
|
- Implement orbit line rendering
|
|
- Add time selector component
|
|
- Implement click-to-focus on celestial bodies
|
|
- Add information panels
|
|
- Load realistic textures and 3D models
|