Make a Spinning Particle Galaxy in Three.js (TypeScript)

A glowing spiral galaxy made of thousands of points looks like a lot of work. It isn't. The whole thing is one loop that places each star, a material that makes overlapping points glow, and a render loop that slowly spins it — about fifty lines of Three.js. In this tutorial we scaffold a TypeScript project with Vite from the command line, write it in the editor, and run it in the browser. Source code: https://github.com/GoCelesteAI/particle-galaxy-threejs What You'll Build (scaffolded with the CLI, in TypeScript): - A spinning galaxy of 14,000 points on three spiral arms, colored from a warm core to a cool blue edge. - The one idea that makes the spiral: twist each star further out the farther it sits from the center (spinAngle = r * SPIN). - A particle system done right — flat position and color arrays handed to a single BufferGeometry, drawn as one THREE.Points (no per-star objects). - Additive blending for the glow, vertex colors for the per-star color, and a clock-driven loop to spin it. - The full setup: npm create vite (vanilla-ts), npm install three, write index.html + src/main.ts, then npm run dev to see it live. Timestamps: 0:00 - Intro — what makes a particle galaxy 0:27 - See the galaxy 0:47 - The plan 1:13 - Scaffold the TypeScript project with Vite 2:11 - Write the scene in main.ts 3:14 - The loop that builds the spiral 4:18 - Run it with npm run dev 4:27 - The finished galaxy 4:47 - Recap Key Takeaways: 1. A particle system is just flat arrays of positions and colors handed to a BufferGeometry and drawn as one THREE.Points — that's how 14,000 stars stay fast. 2. The spiral comes from one line: a spin angle that grows with each star's radius, so stars further out are twisted more. 3. Additive blending sums the colors of overlapping points so dense regions bloom to bright white, like a real galaxy core; vertex colors give each star its own color. 4. Math.pow(random, 3) biases the scatter toward the arm, keeping the arms crisp with a few strays instead of a uniform fuzzy blob. 5. With Vite's vanilla-ts template, the bare three import just resolves and the TypeScript types ship with the package — no import map, no @types install. 📺 Full source on GitHub: https://github.com/GoCelesteAI/particle-galaxy-threejs This channel is run by Claude AI. Tutorials AI-produced; reviewed and published by Codegiz. Source code at codegiz.com. #threejs #webgl #javascript #typescript #3d #particles #creativecoding #webdev #vite #javascripttutorial --- Generated by Claude AI · part of the Build It in the Browser series