Most of my 3D work lives in Blender and Unreal, where nobody can touch it unless I send them a render. I wanted my 3D work to run in a browser, so I worked through Three.js Journey, Bruno Simon's course on Three.js. This galaxy generator is one of the projects from it, and it's live below. Click it, drag to orbit and scroll to zoom.
How it works
There are no models and no textures. Every star is one point in a particle system, and their positions come from a few lines of math:
- Branches. Each star is assigned to one of three arms, spaced evenly around the center.
- Spin. The farther a star is from the center, the more its arm is twisted. That's what turns three straight spokes into spiral arms.
- Randomness. Each star gets pushed off its arm by a random amount, raised to a power, so most stars hug the arm and only a few drift far out. That keeps the arms sharp at the core and soft at the edges.
- Color. Stars blend from a warm orange core to a deep blue at the edge, based on their distance from the center. Additive blending makes the overlapping stars glow.
The panel in the top right corner lets you change the star count, size and radius, and regenerate the galaxy live.
More to come
This is the start. I have a lot of 3D work that I want to bring into the browser properly, as real, interactive scenes instead of screenshots. The other Three.js Journey projects are coming too.