three-particle-system v1.0.12
Three Particle System
A particle effect system for Three.js
Installation
Simply install the package.
In your terminal,
npm i three-particle-systemUsage
Using the particle system can be as simple or complex as you would like.
Basic Usage
To start, create a new particle system object and provide it an object.
import ParticleSystem from 'three-particle-system';
const myObject = new THREE.Object3D();
const particles = new ParticleSystem(myObject);
particles.stop();API
The ParticleSystem's constructor takes two arguments, the target object to attach the particle system to and the options object. Below are all of the options you can provide.
target
Description: The object to attach the particle system to. This Object3D must be added to the scene prior to declaring new ParticleSystem(target)
Type: Object3D
Required: true
Color
Description: The color of the particle in hexadecimal format.
Type: string | number;
Default: 0xedaa67;
initialRotationRange
Description: The range of rotation upon initialization.
Type: THREE.Vector3, THREE.Vector3;
Default: [new THREE.Vector3(0, 0, 0), new THREE.Vector3(Math.PI * 2, Math.PI * 2, Math.PI * 2)] (0° to 360°)
loop
Description: Should the particle system loop continuously
Type: boolean
Default: true
playOnLoad
Description: Should the start when the object is instantiated
Type: boolean
Default: true
duration
Description: The duration of the particle effect in milliseconds. Note, this only describes how long particles are produced for. Particles alive after the duration has elapsed will live until they reach the end of their particleLifetime
Type: number
Default: 2000
maxParticles
Description: The maximum number of particles to be rendered.
Type: number
Default: 100
particleLifetime
Description: The maximum lifespan of a particle in milliseconds
Type: number
Default: 2000
particlesPerSecond
Description: The number of particles to be emitted per second.
Type: number
Default: 50
particleVelocity
Description: How fast a particle moves (in m/s)
Type: number
Default: 1
minParticleSize
Description: The minimum particle starting size
Type: number
Default: 0.1
maxParticleSize
Description: the maximum particle starting size
Type: number
Default: 0.1
shape
Description: the shape, or geometry, that particles will be emitted from or within.
Type: IShape
Default: PlaneShape
worldSpace
Description: Place new particles in world space, regardless of the target's position. So, updated particles will move in relative space and not relative to the target.
Type: boolean
Default: false
Disclaimer
This project is still experimental. Do not use this in production!
Demo
You can find a small implementation on my website, ludwigthepig.com