react-particles-webgl
is a React component inspired by the popular particles.js library and built with react-three-fiber to offer smooth 60FPS high-count particle fields in both two and three dimensions.
Demos
The particle field's configuration is extremely flexible, allowing you to optionally interact with the field via cameraControls
with drag/touch/scrollwheel etc.
A two dimensional particle field with camera controls disabled.
A three dimensional particle field using a combination of the boundaryType: 'passthru'
and direction constraints.
Installation
Adding react-particles-webgl to your project is easy, Three.js is required so add it if your project doesn't have it already.
This library is built with hooks and requires React >= 16.8.0
Basic Usage
<ParticleField />
will grow to fit the size of it's container, making it simple to integrate into any application.
Configuration
The <ParticleField />
component accepts an optional config
prop with an extensive list of options such as particle color, enabling camera controls and 2D or 3D mode.
Checkout the configurator tool to test several presets and options. Below is the full list of config options.