Coding the stars - an interactive constellation with Three.js and React Three Fiber

Summary

The article provides a tutorial for recreating Supabase Launch Week 8’s animated constellation in Next.js with Three.js and React Three Fiber (R3F). Each signup or user-generated ticket becomes a particle shaped into an “8,” with signups loaded from the `lw8_tickets` table and later updates delivered through Supabase Realtime. The scene uses five-sided circle geometry, a white standard material with optional AdditiveBlending, an R3F Canvas, and a camera positioned at `[0, 0, 500]`. Particle movement is calculated with `useFrame`, elapsed time, sine and cosine functions, alternating loop direction, randomized speed and delay, and configurable offsets; a `dat.gui` debug mode exposes parameters such as particle count and shape dimensions.

Takeaways

1. 1

   Five-sided circle geometry minimizes particle complexity, while Three.js AdditiveBlending makes overlapping white particles appear brighter.

2. 2

   Alternating the sign and vertical calculation for cosine-based motion changes a circular path into a repeating “8” shape.

3. 3

   The optional `#debug` mode dynamically imports `dat.gui` inside an effect to avoid the `window is not defined` error in Next.js.