tim-soft / React Particles Webgl
Licence: mit
🔆 A 2D/3D particle library built on React, Three.js and WebGL
Stars: ✭ 330
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Particles Webgl
Wechart
Create all the [ch]arts by cax or three.js - Cax 和 three.js 创造一切图[表]
Stars: ✭ 152 (-53.94%)
Mutual labels: 3d, threejs, 2d, canvas
Black
World's fastest HTML5 2D game engine 🛸
Stars: ✭ 174 (-47.27%)
Mutual labels: 2d, particles, canvas
Von Grid
Hexagonal & square tile grid system with three.js
Stars: ✭ 336 (+1.82%)
Mutual labels: 3d, threejs, 2d
React Three Fiber
🇨🇭 A React renderer for Three.js
Stars: ✭ 16,097 (+4777.88%)
Mutual labels: fiber, 3d, threejs
Spritejs
A cross platform high-performance graphics system.
Stars: ✭ 4,712 (+1327.88%)
Mutual labels: 3d, 2d, canvas
Layaair discard
This is old LayaAir veriosn writetten by ActionScript 3.0 ,now LayaAir is using TypeScript as the Engine Script,Please use https://github.com/layabox/LayaAir instead.
Stars: ✭ 1,858 (+463.03%)
Mutual labels: 3d, particles, canvas
awesome-canvas
Canvas资源库大全中文版。An awesome Canvas packages and resources.
Stars: ✭ 288 (-12.73%)
Mutual labels: canvas, 2d
React Three Editable
👀 ✏️ Edit your react-three-fiber scene with a visual editor without giving up control over your code.
Stars: ✭ 261 (-20.91%)
Mutual labels: 3d, threejs
city-tour
A procedurally generated city built with WebGL and three.js
Stars: ✭ 57 (-82.73%)
Mutual labels: threejs, canvas
Three.proton
three.proton is a magical 3d particle engine using three.js library. It is based on the Proton engine library.
Stars: ✭ 327 (-0.91%)
Mutual labels: threejs, particles
Enable3d
🕹️ Standalone 3D Framework / Physics for three.js (using ammo.js) / 3D extension for Phaser 3
Stars: ✭ 271 (-17.88%)
Mutual labels: 3d, threejs
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.
Documentation https://timellenberger.com/libraries/react-particles-webgl
Config Generator https://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
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 () => <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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].