Particles
Vanilla Three.js Particle System
A GPU-friendly particle system built with vanilla Three.js. Thousands of point sprites are positioned in 3D space and animated each frame, producing a dynamic and mesmerising visual.
The setup bypasses React Three Fiber intentionally — sometimes working directly with the Three.js API gives finer control over the render loop, disposal, and resize handling.
Tech Stack
Three.jsWebGLJavaScript
Key Learnings
- Points geometry with BufferAttributes is the most efficient way to render large particle sets — each particle is a single vertex.
- Managing your own animation loop with requestAnimationFrame gives precise control over timing and cleanup.
- Proper cleanup (disposing geometries, materials, and the renderer) prevents GPU memory leaks in single-page apps.