https://github.com/tim-soft/react-particles-webgl
🔆 A 2D/3D particle library built on React, Three.js and WebGL
https://github.com/tim-soft/react-particles-webgl
2d 3d canvas fiber particles react threejs
Last synced: 3 months ago
JSON representation
🔆 A 2D/3D particle library built on React, Three.js and WebGL
- Host: GitHub
- URL: https://github.com/tim-soft/react-particles-webgl
- Owner: tim-soft
- License: mit
- Created: 2019-03-22T21:19:09.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T18:24:23.000Z (over 2 years ago)
- Last Synced: 2024-04-25T07:42:24.868Z (about 1 year ago)
- Topics: 2d, 3d, canvas, fiber, particles, react, threejs
- Language: JavaScript
- Homepage: https://timellenberger.com/particles
- Size: 2.46 MB
- Stars: 456
- Watchers: 9
- Forks: 37
- Open Issues: 45
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://github.com/VincentGarreau/particles.js/) library and built with [react-three-fiber](https://github.com/drcmda/react-three-fiber) to offer _smooth_ **60FPS** high-count particle fields in both two and three dimensions.
**Documentation** [https://timellenberger.com/libraries/react-particles-webgl](https://timellenberger.com/libraries/react-particles-webgl)
**Config Generator** [https://timellenberger.com/particles](https://timellenberger.com/particles)
**Code Sandbox Demos**
- 2D Green Particles [https://codesandbox.io/s/4x4lmpqz1w](https://codesandbox.io/s/4x4lmpqz1w)
- 3D Snowfall [https://codesandbox.io/s/308zj3k7l1](https://codesandbox.io/s/308zj3k7l1)
[](https://www.npmjs.com/package/react-particles-webgl)
[](https://github.com/tim-soft/react-particles-webgl/blob/master/LICENSE)
[](https://travis-ci.org/tim-soft/react-particles-webgl)
[](https://timellenberger.com/particles)
[](https://timellenberger.com/particles)
## ✨ 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
```bash
yarn add react-particles-webgl three
```
## Usage
```jsx
import React from 'react';
import ParticleField from 'react-particles-webgl';
/**
* The default configuation for the ParticleField component
*
* Any option passed in via props will overwrite the default config
*/
const config = {
// Display reference cube, useful for orienting the field
showCube: true,
// '2D' or '3D' particle field
dimension: '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 elsewhere
boundaryType: 'bounce',
// Maximum velocity of particles
velocity: 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 jagged
antialias: 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 values
direction: {
xMin: -1,
xMax: 1,
yMin: -1,
yMax: 1,
zMin: -1,
zMax: 1
},
lines: {
// 'rainbow' or 'solid' color of lines
colorMode: 'rainbow',
// Color of lines if colorMode: 'solid', must be hex color
color: '#351CCB',
// Transparency of lines
transparency: 0.9,
// true/false limit the maximum number of line connections per particle
limitConnections: true,
maxConnections: 20,
// Minimum distance needed to draw line between to particles
minDistance: 150,
// true/false render lines
visible: true
},
particles: {
// 'rainbow' or 'solid' color of particles
colorMode: 'rainbow',
// Color of lines if colorMode: 'solid', must be hex color
color: '#3FB568',
// Transparency of particles
transparency: 0.9,
// 'square' or 'circle' shape of particles
shape: 'square',
// The exact number of particles to render
count: 500,
// The minimum particle size
minSize: 10,
// The maximum particle size
maxSize: 75,
// true/false render particles
visible: 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 movement
enableDamping: true,
dampingFactor: 0.2,
// Enable or disable zooming in/out of camera
enableZoom: true,
// Enable or disable constant rotation of camera around scene
autoRotate: true,
// Rotation speed -- higher is faster
autoRotateSpeed: 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 canvas
resetCameraFlag: false
}
};
export default () => ;
```
## Local Development
Clone the repo
```bash
git clone https://github.com/tim-soft/react-particles-webgl.git react-particles-webgl
cd react-particles-webgl
```
Setup symlinks
```bash
yarn link
cd example
yarn link react-particles-webgl
```
Run the library in development mode
```bash
yarn start
```
Run the example app in development mode
```bash
cd example
yarn start
```
Changes to the library code should hot reload in the demo app
## License
MIT © [Tim Ellenberger](https://github.com/tim-soft)