React Particles WebGL
A 2D/3D particle library built with React, Three.js and WebGL
react-particles-webgl was 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.
Demo and config generator https://timellenberger.com/particles
Code Sandbox Demos
✨ Features
- Simple drop-in usage, plays nice with SSR (the demo is running Next.js)
- Smooth 60FPS particles and lines via WebGL
- Full Three.js OrbitControls for extreme (optional) scene interactivity
- Highly customizable particles and lines
Install
yarn add react-particles-webgl three
Usage
import React from 'react';
import ParticleField from 'react-particles-webgl';
const config = {
showCube: true,
dimension: '3D',
boundaryType: 'bounce',
velocity: 2,
antialias: false,
direction: {
xMin: -1,
xMax: 1,
yMin: -1,
yMax: 1,
zMin: -1,
zMax: 1
},
lines: {
colorMode: 'rainbow',
color: '#351CCB',
transparency: 0.9,
limitConnections: true,
maxConnections: 20,
minDistance: 150,
visible: true
},
particles: {
colorMode: 'rainbow',
color: '#3FB568',
transparency: 0.9,
shape: 'square',
count: 500,
minSize: 10,
maxSize: 75,
visible: true
},
cameraControls: {
enabled: true,
enableDamping: true,
dampingFactor: 0.2,
enableZoom: true,
autoRotate: true,
autoRotateSpeed: 0.3,
resetCameraFlag: false
}
};
export default () => <ParticleField config={config} />;
Local Development
Clone the repo
git clone https://github.com/tim-soft/react-particles-webgl.git react-particles-webgl
cd react-particles-webgl
Setup symlinks
yarn link
cd example
yarn link react-particles-webgl
Run the library in development mode
yarn start
Run the example app in development mode
cd example
yarn start
Changes to the library code should hot reload in the demo app
License
MIT © Tim Ellenberger