From 04ca5902f906b183d884c2191c11250dac2083bd Mon Sep 17 00:00:00 2001 From: Adrian Kuta Date: Sun, 2 Feb 2025 14:23:17 +0100 Subject: [PATCH] Update README with detailed project description and setup instructions --- README.md | 43 ++++++++++++++++++++++++++++++++++++++----- 1 file changed, 38 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index f768e33..e5db3b0 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,41 @@ -# React + Vite +# Układ Słoneczny 3D -This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. +Ten projekt prezentuje animację Układu Słonecznego w 3D, wykorzystując React, [react-three-fiber](https://github.com/pmndrs/react-three-fiber), [three.js](https://threejs.org/), [@react-three/drei](https://github.com/pmndrs/drei) oraz [@react-three/postprocessing](https://github.com/pmndrs/react-postprocessing). Scena zawiera realistycznie teksturowane planety i Słońce, trajektorie orbit oraz imponujące efekty świetlne z postprocessingu (Bloom). Całość renderowana jest na pełnoekranowym kanwie. -Currently, two official plugins are available: +## Funkcjonalności -- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh -- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh +- **Renderowanie 3D:** Scena jest renderowana z użyciem `react-three-fiber` i `three.js`. +- **Realistyczne tekstury:** Do wizualizacji planet oraz Słońca używane są tekstury (plik umieszczone w `src/assets`). +- **Animacja planet:** Każda planeta porusza się po swojej orbicie, a ich ruch jest animowany. +- **Trajektorie orbit:** Orbity planet są wizualizowane jako białe linie, co ułatwia śledzenie ich ruchu. +- **Efekt gwiezdnego tła:** Użyto komponentu `` z `@react-three/drei`, by uzyskać efekt gwiezdnego nieba. +- **Interaktywna kamera:** Dzięki `OrbitControls` możesz obracać sceną i przybliżać szczegóły. +- **Postprocessing:** Scena wyposażona jest w efekt Bloom, który nadaje imponujący wygląd efektom świetlnym. +- **Pełnoekranowy Canvas:** Renderowanie odbywa się na całym ekranie. + +## Instalacja + +1. **Sklonuj repozytorium:** + + ```bash + git clone + cd + ``` + +2. **Zainstaluj zależności:** + + ```bash + npm install + ``` + +3. **Uruchom projekt:** + + ```bash + npm run dev + ``` + lub + ```bash + npm start + ``` + +## Struktura projektu