Um projeto feito de pai para filho — para ajudá-lo a entender onde vivemos neste cosmos tão grande.
Este projeto nasceu de uma vontade simples: mostrar ao meu filho o lugar que habitamos no universo. Mais do que um exercício técnico, é uma janela para o espaço que podemos explorar juntos — girando planetas, descobrindo luas, e sentindo a imensidão que existe além do nosso céu.
- Todos os 8 planetas do Sistema Solar com texturas reais e órbitas animadas
- Luas dos planetas, visíveis ao selecionar cada planeta
- Cinturão de asteroides entre Marte e Júpiter
- Câmera interativa — arraste, zoom e explore livremente
- Informações sobre cada planeta ao clicar nele
- Renderização 3D em tempo real com WebGL
| Tecnologia | Uso |
|---|---|
| Next.js 16 | Framework React com App Router |
| React Three Fiber | Renderização 3D com React |
| Three.js | Motor de renderização WebGL |
| Drei | Helpers para R3F |
| Zustand | Gerenciamento de estado |
| Tailwind CSS v4 | Estilização |
| TypeScript | Tipagem estática |
- Node.js versão 18 ou superior
- npm (já vem com o Node)
# Clone o repositório
git clone https://github.com/gitdolucas/solar-system.git
cd solar-system
# Instale as dependências
npm installnpm run devAbra http://localhost:3000 no navegador.
# Build de produção
npm run build
# Rodar em modo produção (após o build)
npm start
# Verificar erros de lint
npm run lintsolar-system/
├── app/
│ └── page.tsx # Página principal (Server Component)
├── components/
│ └── canvas/
│ ├── Scene.tsx # Canvas 3D principal
│ ├── SceneClient.tsx # Wrapper client-side (necessário para WebGL)
│ ├── Planet.tsx # Componente de planeta
│ ├── Moon.tsx # Componente de lua
│ ├── Sun.tsx # Sol com luz pontual
│ ├── Rings.tsx # Anéis (Saturno e Urano)
│ ├── OrbitLine.tsx # Linhas de órbita
│ ├── AsteroidBelt.tsx # Cinturão de asteroides
│ └── CameraController.tsx # Controles de câmera
├── lib/
│ ├── data/
│ │ ├── planets.ts # Dados dos planetas
│ │ ├── moons.ts # Dados das luas
│ │ └── sun.ts # Dados do sol
│ └── store/
│ └── useSolarStore.ts # Estado global (Zustand)
└── public/
└── textures/ # Texturas dos planetas (.jpg)
As texturas são da Solar System Scope (arquivos 2k_*). Se quiser qualidade maior, baixe as versões originais e coloque em public/textures/ com os nomes:
sun.jpg, mercury.jpg, venus.jpg, earth.jpg, mars.jpg,
jupiter.jpg, saturn.jpg, saturn_ring.png, uranus.jpg, neptune.jpg,
moon.jpg
O cosmos é imenso — mas também é nosso. Cada estrela que você vê à noite é um sol distante. E nós, aqui na Terra, somos parte disso tudo. Espero que esse projeto te ajude a sentir essa grandeza, e que desperte em você a mesma curiosidade que me move.
Com amor, Papai.
Feito com Next.js, React Three Fiber e muita curiosidade.