Awesome

t3d-particle

This is a particle system based on t3d.js. Inspired by ShaderParticleEngine. Added support for mesh particles.

Examples

Usage

Creating

Here is a simple example to create particles:

// Creating a particle group.
const particleGroup = new ParticleGroup({
    texture: {
        value: t3d.Texture2D.fromSrc('./resources/img/smokeparticle.png')
    },
    maxParticleCount: 2000
});

// Creating a particle emitter.
const particleEmitter = new ParticleEmitter({
    type: ParticleProperties.distributions.BOX,
    maxAge: {
        value: 2
    },
    position: {
        value: new t3d.Vector3(0, 0, -50),
        spread: new t3d.Vector3(0, 0, 0)
    },
    acceleration: {
        value: new t3d.Vector3(0, -10, 0),
        spread: new t3d.Vector3(10, 0, 10)
    },
    velocity: {
        value: new t3d.Vector3(0, 25, 0),
        spread: new t3d.Vector3(10, 7.5, 10)
    },
    color: {
        value: [new t3d.Color3(1, 1, 1), new t3d.Color3(1, 0, 0)]
    },
    size: {
        value: 1
    },
    particleCount: 1000
});

// To add an emitter to a group
particleGroup.addEmitter(particleEmitter);

// To render the group, add the particle group's mesh object to your scene:
scene.add(particleGroup.mesh);

You can also create mesh particles by:

const particleGroup = new MeshParticleGroup({/*...GroupOptions...*/});

const particleEmitter = new MeshParticleEmitter({/*...Emitter...*/});

// ...

A full options to configure an ParticleGroup:

<b>texture</b>(<i>Object</i>): describing the texture used by particle.

<b>fixedTimeStep</b>(<i>Number</i>): If no dt (or deltaTime) value is passed to this group's tick() function, this number will be used to move the particle simulation forward. Value in SECONDS. Default is 0.016s.

<b>maxParticleCount</b>(<i>Number</i>): Maximum number of particles.

<b>hasPerspective</b>(<i>Number</i>): Whether the distance a particle is from the camera should affect the particle's size. Default is true. Only for ParticleGroup.

<b>colorize</b>(<i>Boolean</i>): Whether the particles in this group should be rendered with color, or whether the only color of particles will come from the provided texture. Default is true. Only for ParticleGroup.

<b>scale</b>(<i>Number</i>): The scale factor to apply to this group's particle sizes. Useful for setting particle sizes to be relative to renderer size. Default is 300. Only for ParticleGroup.

<b>geometry</b>(<i>Geometry</i>): Useful for group's particles geometry information. Only for MeshParticleGroup.

A full options to configure an ParticleEmitter:

<b>type</b>(<i>Number</i>): The default distribution this emitter should use to control its particle's spawn position and force behaviour. Default is 1.1 will be distributed within a box. 2 will be distributed on a sphere. 3 will be distributed on a 2d-disc shape. 4 will be distributed along a line.

<b>particleCount</b>(<i>Number</i>): The total number of particles this emitter will hold. Default is 100.

<b>duration</b>(<i>Number|null</i>): The duration in seconds that this emitter should live for. If not specified, the emitter will emit particles indefinitely. Default is null.

<b>isStatic</b>(<i>Boolean</i>): Whether this emitter should be not be simulated (true). Default is false.

<b>activeMultiplier</b>(<i>Object</i>): A value between 0 and 1 describing what percentage of this emitter's particlesPerSecond should be emitted, where 0 is 0%, and 1 is 100%. Default is 1.

<b>direction</b>(<i>Number</i>): The direction of the emitter. If value is 1, emitter will start at beginning of particle's lifecycle.If value is -1, emitter will start at end of particle's lifecycle and work it's way backwards. Default is 1. Only for ParticleEmitter.

<b>isLookAtCamera</b>(<i>Boolean</i>): Whether particle is always facing the camera. Default is false. Only for MeshParticleEmitter.

<b>isLookAtCameraOnlyY</b>(<i>Boolean</i>): Whether particle locks the Y-axis. Default is false. Only for MeshParticleEmitter.

<b>maxAge</b>(<i>Object</i>): An object describing the particle's maximum age in seconds.

<b>position</b>(<i>Object</i>): An object describing this emitter's position.

<b>velocity</b>(<i>Object</i>): An object describing this particle velocity.

<b>acceleration</b>(<i>Object</i>): An object describing this particle's acceleration.

<b>drag</b>(<i>Object</i>): An object describing this particle drag. Drag is applied to both velocity and acceleration values.

<b>wiggle</b>(<i>Object</i>): The values of this object will determine whether a particle will wiggle, or jiggle, or wave,...or shimmy, or waggle, or... Well you get the idea.

<b>rotation</b>(<i>Object</i>): An object describing this emitter's rotation. It can either be static, or set to rotate from 0 radians to the value of rotation.value over a particle's lifetime. Rotation values affect both a particle's position and the forces applied to it.

<b>color</b>(<i>Object</i>): An object describing a particle's color.

<b>opacity</b>(<i>Object</i>): An object describing a particle's opacity.

<b>size</b>(<i>Object</i>): An object describing a particle's size.

<b>angle</b>(<i>Object</i>): An object describing a particle's angle.

Runtime Changing

// Trigger the setter for this property to force an
// update to the emitter's position attribute.
particleEmitter.position.value = particleEmitter.position.value.set(2, 2, 2);

particleEmitter.rotation.angle += 0.1;

// other properties...