A particle effect system for Three.js
Simply install the package.
In your terminal,
npm i three-particle-systemUsing the particle system can be as simple or complex as you would like.
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);
// example render method
const draw = () => {
renderer.render(scene, camera);
requestAnimationFrame(draw);
// ...
particles.update(); // call update every frame
};
particles.stop(); // to stopThe 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.
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
Description: The color of the particle in hexadecimal format.
Type: string | number;
Default: 0xedaa67;
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°)
Description: Should the particle system loop continuously
Type: boolean
Default: true
Description: Should the start when the object is instantiated
Type: boolean
Default: true
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
Description: The maximum number of particles to be rendered.
Type: number
Default: 100
Description: The maximum lifespan of a particle in milliseconds
Type: number
Default: 2000
Description: The number of particles to be emitted per second.
Type: number
Default: 50
Description: How fast a particle moves (in m/s)
Type: number
Default: 1
Description: The minimum particle starting size
Type: number
Default: 0.1
Description: the maximum particle starting size
Type: number
Default: 0.1
Description: the shape, or geometry, that particles will be emitted from or within.
Type: IShape
Default: PlaneShape
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
This project is still experimental. Do not use this in production!
You can find a small implementation on my website, ludwigthepig.com