A 3D solar system in your browser. Drag to orbit, scroll to zoom, click any planet for facts. Built with React Three Fiber on top of Three.js. No backend.
Pipeline: R3F
<Canvas>→ scene graph (Sun + 8 planets + orbits + stars) → OrbitControls + click handlers → HTML info panel
git clone https://github.com/dev48v/threejs-from-zero.git
cd threejs-from-zero
npm install
npm run devOpen http://localhost:5173. Should work in any modern browser with WebGL.
Three.js is the standard way to do 3D on the web. It's a thin wrapper over WebGL with the boring math hidden. React Three Fiber (R3F) lets you describe a Three.js scene as React components — <mesh>, <group>, <pointLight> — instead of imperative scene.add(mesh) calls.
Once you can write a scene declaratively, the rest of 3D programming is data: meshes, materials, lights, animations. The architecture stays the same whether you're building a planet, a product configurator, or a game.
| Step | Commit | What lands |
|---|---|---|
| 1 | Scaffold | Vite + React 18 + TS shell |
| 2 | Planet data + Sun | data/planets.ts + glowing Sun with a pointLight |
| 3 | Orbits + spin | Planet, OrbitLine, Stars, SolarSystem composer with useFrame animation |
| 4 | UI overlay | Click handler → info panel + speed slider |
| 5 | Green theme | Glassmorphism panels, gradient hero, back-link footer |
| 6 | README + Vercel | This file |
Each commit is one concept. Every file has comments explaining WHY, not just what.
Instead of computing x = cos(θ) * r and y = sin(θ) * r every frame, we put the planet inside a pivot group and rotate the group. The planet sits at (distance, 0, 0) and the group's rotation does the math for us in compiled C++ inside Three.js — way faster than JavaScript trig.
<group ref={orbitRef}> {/* this group spins → orbit */}
<group position={[distance, 0, 0]}>
<mesh ref={spinRef}> {/* this one spins → axial rotation */}
<sphereGeometry args={[radius, 32, 32]} />
<meshStandardMaterial color={color} />
</mesh>
</group>
</group>Same trick for the spin: a child group rotates on its own Y axis. Add a tilt rotation in between and Uranus actually looks tipped over.
<Canvas>
├─ <ambientLight> // baseline glow so dark sides aren't pure black
├─ <Stars /> // drei: 4000 point sprites on a giant sphere
├─ <SolarSystem> // global tilt group
│ ├─ <Sun> // pointLight + unlit sphere + glow halo
│ ├─ <OrbitLine>×8 // faint flat rings
│ └─ <Planet>×8 // orbit group → tilt → spin mesh (+ rings for Saturn)
└─ <OrbitControls /> // drei: drag/zoom/pinch for free
npm run build
npx vercel --prodBundle is fully static. Vercel rewrites all routes to /.
https://threejs-from-zero.vercel.app
- Vite 6 — dev server + build.
- React 18 + React Three Fiber 8 — declarative Three.js. R3F 9 is alpha; 8 is the stable choice.
- Three.js 0.170 — the renderer.
- @react-three/drei — community helpers (
<Stars>,<OrbitControls>). - TypeScript 5.6 strict mode.
MIT.