react-particles-webgl

badgebadgebadgebadge

react-particles-webgl is 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

Terminalbash
1yarn add react-particles-webgl three

Basic Usage

<ParticleField /> will grow to fit the size of it's container, making it simple to integrate into any application.

componentsParticles.jsjsx
1import React from 'react';2import ParticleField from 'react-particles-webgl';34export default () => (5  <div style={{ height: "100vh", width: "100%" }}>6    <ParticleField />7  </div>8);

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.

componentsParticleConfig.jsjs
1export default {2  // Display reference cube, useful for orienting the field3  showCube: true,4  // '2D' or '3D' particle field5  dimension: '3D',6  // 'bounce' or 'passthru'7  // 'bounce' will make particles behave like balls thrown at a wall when hitting canvas boundaries8  // 'passthru' particles will disappear after hitting canvas boundaries and be added back into the scene elsewhere9  boundaryType: 'bounce',10  // Maximum velocity of particles11  velocity: 2,12  // Toggles antialiasing -- must be set during construction, cannot be changed after initial render13  // Slight performance optimization to set false, although lines will appear more jagged14  antialias: false,15  // Min/Max multipliers which constraint how particles move in each direction16  // The default values here allow for particles to move in completely random x, y, z directions17  // See the "Snowfall" preset for an example of how to use these values18  direction: {19    xMin: -1,20    xMax: 1,21    yMin: -1,22    yMax: 1,23    zMin: -1,24    zMax: 125  },26  lines: {27    // 'rainbow' or 'solid' color of lines28    colorMode: 'rainbow',29    // Color of lines if colorMode: 'solid', must be hex color30    color: '#351CCB',31    // Transparency of lines32    transparency: 0.9,33    // true/false limit the maximum number of line connections per particle34    limitConnections: true,35    maxConnections: 20,36    // Minimum distance needed to draw line between to particles37    minDistance: 150,38    // true/false render lines39    visible: true40  },41  particles: {42    // 'rainbow' or 'solid' color of particles43    colorMode: 'rainbow',44    // Color of lines if colorMode: 'solid', must be hex color45    color: '#3FB568',46    // Transparency of particles47    transparency: 0.9,48    // 'square' or 'circle' shape of particles49    shape: 'square',50    // The exact number of particles to render51    count: 500,52    // The minimum particle size53    minSize: 10,54    // The maximum particle size55    maxSize: 75,56    // true/false render particles57    visible: true58  },59  /*60    * The camera rig is comprised of Three.js OrbitControls61    * Pass any valid OrbitControls properties, consult docs for more info62    *63    * https://threejs.org/docs/#examples/controls/OrbitControls64    */65  cameraControls: {66    // Enable or disable all camera interaction (click, drag, touch etc)67    enabled: true,68    // Enable or disable smooth dampening of camera movement69    enableDamping: true,70    dampingFactor: 0.2,71    // Enable or disable zooming in/out of camera72    enableZoom: true,73    // Enable or disable constant rotation of camera around scene74    autoRotate: true,75    // Rotation speed -- higher is faster76    autoRotateSpeed: 0.3,77    // If true, camera position will be reset whenever any option changes (including this one)78    // Useful when turning off autoRotate, the camera will return to FOV where scene fits to canvas79    resetCameraFlag: false80  }81};

Edit Post

Bug?Edit Post