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 smooth60FPS high-count particle fields in both two and three dimensions.

Documentationhttps://timellenberger.com/libraries/react-particles-webgl

Config Generatorhttps://timellenberger.com/particles

Code Sandbox Demos

• 2D Green Particles https://codesandbox.io/s/4x4lmpqz1w
• 3D Snowfall https://codesandbox.io/s/308zj3k7l1

✨ 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

importReactfrom'react';importParticleFieldfrom'react-particles-webgl';/** * The default configuation for the ParticleField component * * Any option passed in via props will overwrite the default config */constconfig={// Display reference cube, useful for orienting the fieldshowCube: true,// '2D' or '3D' particle fielddimension: '3D',// 'bounce' or 'passthru'// 'bounce' will make particles behave like balls thrown at a wall when hitting canvas boundaries// 'passthru' particles will disappear after hitting canvas boundaries and be added back into the scene elsewhereboundaryType: 'bounce',// Maximum velocity of particlesvelocity: 2,// Toggles antialiasing -- must be set during construction, cannot be changed after initial render// Slight performance optimization to set false, although lines will appear more jaggedantialias: false,// Min/Max multipliers which constraint how particles move in each direction// The default values here allow for particles to move in completely random x, y, z directions// See the "Snowfall" preset for an example of how to use these valuesdirection: {xMin: -1,xMax: 1,yMin: -1,yMax: 1,zMin: -1,zMax: 1},lines: {// 'rainbow' or 'solid' color of linescolorMode: 'rainbow',// Color of lines if colorMode: 'solid', must be hex colorcolor: '#351CCB',// Transparency of linestransparency: 0.9,// true/false limit the maximum number of line connections per particlelimitConnections: true,maxConnections: 20,// Minimum distance needed to draw line between to particlesminDistance: 150,// true/false render linesvisible: true},particles: {// 'rainbow' or 'solid' color of particlescolorMode: 'rainbow',// Color of lines if colorMode: 'solid', must be hex colorcolor: '#3FB568',// Transparency of particlestransparency: 0.9,// 'square' or 'circle' shape of particlesshape: 'square',// The exact number of particles to rendercount: 500,// The minimum particle sizeminSize: 10,// The maximum particle sizemaxSize: 75,// true/false render particlesvisible: true},/* * The camera rig is comprised of Three.js OrbitControls * Pass any valid OrbitControls properties, consult docs for more info * * https://threejs.org/docs/#examples/controls/OrbitControls */cameraControls: {// Enable or disable all camera interaction (click, drag, touch etc)enabled: true,// Enable or disable smooth dampening of camera movementenableDamping: true,dampingFactor: 0.2,// Enable or disable zooming in/out of cameraenableZoom: true,// Enable or disable constant rotation of camera around sceneautoRotate: true,// Rotation speed -- higher is fasterautoRotateSpeed: 0.3,// If true, camera position will be reset whenever any option changes (including this one)// Useful when turning off autoRotate, the camera will return to FOV where scene fits to canvasresetCameraFlag: false}};exportdefault()=><ParticleFieldconfig={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