Type Alias ParticleSystemConfig

Configuration object for the particle system. Defines all aspects of the particle system, including its appearance, behavior, and runtime events.

type ParticleSystemConfig = {
    duration?: number;
    emission?: Emission;
    gravity?: Constant;
    looping?: boolean;
    map?: THREE.Texture;
    maxParticles?: Constant;
    noise?: NoiseConfig;
    onComplete?: () => void;
    onUpdate?: (
        data: {
            delta: number;
            elapsed: number;
            iterationCount: number;
            lifetime: number;
            particleSystem: THREE.Points;
        },
    ) => void;
    opacityOverLifetime?: { isActive: boolean; lifetimeCurve: LifetimeCurve };
    renderer?: Renderer;
    rotationOverLifetime?: { isActive: boolean } & RandomBetweenTwoConstants;
    shape?: ShapeConfig;
    simulationSpace?: SimulationSpace;
    sizeOverLifetime?: { isActive: boolean; lifetimeCurve: LifetimeCurve };
    startColor?: MinMaxColor;
    startDelay?: Constant | RandomBetweenTwoConstants;
    startLifetime?: Constant | RandomBetweenTwoConstants | LifetimeCurve;
    startOpacity?: Constant | RandomBetweenTwoConstants | LifetimeCurve;
    startRotation?: Constant | RandomBetweenTwoConstants | LifetimeCurve;
    startSize?: Constant | RandomBetweenTwoConstants | LifetimeCurve;
    startSpeed?: Constant | RandomBetweenTwoConstants | LifetimeCurve;
    textureSheetAnimation?: TextureSheetAnimation;
    transform?: Transform;
    velocityOverLifetime?: VelocityOverLifetime;
}

Properties

`Optional`duration

duration?: number

Duration of the particle system in seconds. Must be a positive value.

Default

5.0

Example

const duration: number = 5; // System runs for 5 seconds.

`Optional`emission

emission?: Emission

Defines the particle emission settings. Configures the emission rate over time and distance.

See

Emission

Default

emission: {
  rateOverTime: 10.0,
  rateOverDistance: 0.0,
}

`Optional`gravity

gravity?: Constant

Defines the gravity strength applied to particles. This value affects the downward acceleration of particles over time.

Default

0.0

Example

// No gravity
gravity: 0;

// Moderate gravity
gravity: 9.8; // Similar to Earth's gravity

// Strong gravity
gravity: 20.0;

`Optional`looping

looping?: boolean

Indicates whether the system should loop after finishing.

Default

true

Example

looping: true; // System loops continuously.

`Optional`map

map?: THREE.Texture

Defines the texture used for rendering particles. This texture is applied to all particles in the system, and can be used to control their appearance.

Default

undefined

Example

// Using a predefined texture
map: new THREE.TextureLoader().load('path/to/texture.png');

// No texture (default behavior)
map: undefined;

`Optional`maxParticles

maxParticles?: Constant

Defines the maximum number of particles allowed in the system. This value limits the total number of active particles at any given time.

Default

100.0

Example

// Default value
maxParticles: 100.0;

// Increase the maximum number of particles
maxParticles: 500.0;

// Limit to a small number of particles
maxParticles: 10.0;

`Optional`noise

noise?: NoiseConfig

Noise configuration affecting position, rotation, and size.

See

NoiseConfig

Default

noise: {
  isActive: false,
  useRandomOffset: false,
  strength: 1.0,
  frequency: 0.5,
  octaves: 1,
  positionAmount: 1.0,
  rotationAmount: 0.0,
  sizeAmount: 0.0,
}

`Optional`onComplete

onComplete?: () => void

Called when the system completes an iteration.

`Optional`onUpdate

onUpdate?: (
    data: {
        delta: number;
        elapsed: number;
        iterationCount: number;
        lifetime: number;
        particleSystem: THREE.Points;
    },
) => void

Called on every update frame with particle system data.

`Optional`opacityOverLifetime

opacityOverLifetime?: { isActive: boolean; lifetimeCurve: LifetimeCurve }

Controls the opacity of particles over their lifetime. The opacity can be adjusted using a lifetime curve (Bézier or other supported types).

Default

opacityOverLifetime: {
  isActive: false,
  lifetimeCurve: {
    type: LifeTimeCurve.BEZIER,
    scale: 1,
    bezierPoints: [
      { x: 0, y: 0, percentage: 0 },
      { x: 1, y: 1, percentage: 1 },
    ],
  },
}

`Optional`renderer

renderer?: Renderer

Renderer configuration for blending, transparency, and depth testing.

See

Renderer

Default

renderer: {
  blending: THREE.NormalBlending,
  discardBackgroundColor: false,
  backgroundColorTolerance: 1.0,
  backgroundColor: { r: 1.0, g: 1.0, b: 1.0 },
  transparent: true,
  depthTest: true,
  depthWrite: false
}

`Optional`rotationOverLifetime

rotationOverLifetime?: { isActive: boolean } & RandomBetweenTwoConstants

Controls the rotation of particles over their lifetime. The rotation can be randomized between two constants, and the feature can be toggled on or off.

Default

rotationOverLifetime: {
  isActive: false,
  min: 0.0,
  max: 0.0,
}

`Optional`shape

shape?: ShapeConfig

Configuration for the emitter shape. Determines the shape and parameters for particle emission.

See

ShapeConfig

`Optional`simulationSpace

simulationSpace?: SimulationSpace

Defines the simulation space in which particles are simulated. Determines whether the particles move relative to the local object space or the world space.

Default

SimulationSpace.LOCAL

Example

// Simulate particles in local space (default)
simulationSpace: SimulationSpace.LOCAL;

// Simulate particles in world space
simulationSpace: SimulationSpace.WORLD;

`Optional`sizeOverLifetime

sizeOverLifetime?: { isActive: boolean; lifetimeCurve: LifetimeCurve }

Controls the size of particles over their lifetime. The size can be adjusted using a lifetime curve (Bézier or other supported types).

Default

sizeOverLifetime: {
  isActive: false,
  lifetimeCurve: {
    type: LifeTimeCurve.BEZIER,
    scale: 1,
    bezierPoints: [
      { x: 0, y: 0, percentage: 0 },
      { x: 1, y: 1, percentage: 1 },
    ],
  },
}

`Optional`startColor

startColor?: MinMaxColor

Initial color of the particles. Supports a min-max range for color interpolation.

Default

startColor: {
  min: { r: 1.0, g: 1.0, b: 1.0 },
  max: { r: 1.0, g: 1.0, b: 1.0 },
}

`Optional`startDelay

startDelay?: Constant | RandomBetweenTwoConstants

Delay before the particle system starts emitting particles. Supports a fixed value (Constant) or a random range (RandomBetweenTwoConstants).

Default

0.0

Example

startDelay: 2; // Fixed 2-second delay.
startDelay: { min: 0.5, max: 2 }; // Random delay between 0.5 and 2 seconds.

`Optional`startLifetime

startLifetime?: Constant | RandomBetweenTwoConstants | LifetimeCurve

Initial lifetime of the particles. Supports constant value, random range, or curves (Bézier or easing).

Default

5.0

Example

// Constant 3 seconds.
startLifetime: 3;

// Random range between 1 and 4 seconds.
startLifetime: { min: 1, max: 4 };

// Bézier curve example with scaling.
startLifetime: {
  type: LifeTimeCurve.BEZIER,
  bezierPoints: [
    { x: 0, y: 0.275, percentage: 0 },
    { x: 0.5, y: 0.5 },
    { x: 1, y: 1, percentage: 1 }
  ],
  scale: 2
};

// Easing curve example with scaling.
startLifetime: {
  type: LifeTimeCurve.EASING,
  curveFunction: (time) => Math.sin(time * Math.PI),
  scale: 0.5
};

`Optional`startOpacity

startOpacity?: Constant | RandomBetweenTwoConstants | LifetimeCurve

Defines the initial opacity of the particles. Supports constant values, random ranges, or curves (Bézier or easing).

Default

1.0

Example

// Constant value
startOpacity: 3;

// Random range
startOpacity: { min: 1, max: 4 };

// Bézier curve example with scaling.
startOpacity: {
  type: 'bezier',
  bezierPoints: [
    { x: 0, y: 0.275, percentage: 0 },
    { x: 0.5, y: 0.5 },
    { x: 1, y: 1, percentage: 1 }
  ],
  scale: 2
};

// Easing curve example with scaling.
startOpacity: {
  type: 'easing',
  curveFunction: (time) => Math.sin(time * Math.PI),
  scale: 1.5
};

`Optional`startRotation

startRotation?: Constant | RandomBetweenTwoConstants | LifetimeCurve

Defines the initial rotation of the particles in degrees. Supports constant values, random ranges, or curves (Bézier or easing).

Default

0.0

Example

// Constant value
startRotation: 3;

// Random range
startRotation: { min: 1, max: 4 };

// Bézier curve example with scaling.
startRotation: {
  type: 'bezier',
  bezierPoints: [
    { x: 0, y: 0.275, percentage: 0 },
    { x: 0.5, y: 0.5 },
    { x: 1, y: 1, percentage: 1 }
  ],
  scale: 2
};

// Easing curve example with scaling.
startRotation: {
  type: 'easing',
  curveFunction: (time) => Math.sin(time * Math.PI),
  scale: 1.5
};

`Optional`startSize

startSize?: Constant | RandomBetweenTwoConstants | LifetimeCurve

Defines the initial size of the particles. Supports constant values, random ranges, or curves (Bézier or easing).

Default

1.0

Example

// Constant value
startSize: 3;

// Random range
startSize: { min: 1, max: 4 };

// Bézier curve example with scaling.
startSize: {
  type: 'bezier',
  bezierPoints: [
    { x: 0, y: 0.275, percentage: 0 },
    { x: 0.5, y: 0.5 },
    { x: 1, y: 1, percentage: 1 }
  ],
  scale: 2
};

// Easing curve example with scaling.
startSize: {
  type: 'easing',
  curveFunction: (time) => Math.sin(time * Math.PI),
  scale: 1.5
};

`Optional`startSpeed

startSpeed?: Constant | RandomBetweenTwoConstants | LifetimeCurve

Defines the initial speed of the particles. Supports constant values, random ranges, or curves (Bézier or easing).

Default

1.0

Example

// Constant value
startSpeed: 3;

// Random range
startSpeed: { min: 1, max: 4 };

// Bézier curve example with scaling.
startSpeed: {
  type: 'bezier',
  bezierPoints: [
    { x: 0, y: 0.275, percentage: 0 },
    { x: 0.5, y: 0.5 },
    { x: 1, y: 1, percentage: 1 }
  ],
  scale: 2
};

// Easing curve example with scaling.
startSpeed: {
  type: 'easing',
  curveFunction: (time) => Math.sin(time * Math.PI),
  scale: 1.5
};

`Optional`textureSheetAnimation

textureSheetAnimation?: TextureSheetAnimation

Configures the texture sheet animation settings for particles. Controls how textures are animated over the lifetime of particles.

See

TextureSheetAnimation

Default

textureSheetAnimation: {
  tiles: new THREE.Vector2(1.0, 1.0),
  timeMode: TimeMode.LIFETIME,
  fps: 30.0,
  startFrame: 0,
}

`Optional`transform

transform?: Transform

Defines the position, rotation, and scale of the particle system.

See

Transform

Default

transform: {
  position: new THREE.Vector3(),
  rotation: new THREE.Vector3(),
  scale: new THREE.Vector3(1, 1, 1),
}

`Optional`velocityOverLifetime

velocityOverLifetime?: VelocityOverLifetime

Defines the velocity settings of particles over their lifetime. Configures both linear and orbital velocity changes.

See

VelocityOverLifetime

Default

velocityOverLifetime: {
  isActive: false,
  linear: {
    x: 0,
    y: 0,
    z: 0,
  },
  orbital: {
    x: 0,
    y: 0,
    z: 0,
  },
}

Type Alias ParticleSystemConfig

Index

Properties

Properties

Optionalduration

Default

Example

Optionalemission

See

Default

Optionalgravity

Default

Example

Optionallooping

Default

Example

Optionalmap

Default

Example

OptionalmaxParticles

Default

Example

Optionalnoise

See

Default

OptionalonComplete

OptionalonUpdate

OptionalopacityOverLifetime

Default

Optionalrenderer

See

Default

OptionalrotationOverLifetime

Default

Optionalshape

See

OptionalsimulationSpace

Default

Example

OptionalsizeOverLifetime

Default

OptionalstartColor

Default

OptionalstartDelay

Default

Example

OptionalstartLifetime

Default

Example

OptionalstartOpacity

Default

Example

OptionalstartRotation

Default

Example

OptionalstartSize

Default

Example

OptionalstartSpeed

Default

Example

OptionaltextureSheetAnimation

See

Default

Optionaltransform

See

Default

OptionalvelocityOverLifetime

See

Default

Settings

On This Page

`Optional`duration

`Optional`emission

`Optional`gravity

`Optional`looping

`Optional`map

`Optional`maxParticles

`Optional`noise

`Optional`onComplete

`Optional`onUpdate

`Optional`opacityOverLifetime

`Optional`renderer

`Optional`rotationOverLifetime

`Optional`shape

`Optional`simulationSpace

`Optional`sizeOverLifetime

`Optional`startColor

`Optional`startDelay

`Optional`startLifetime

`Optional`startOpacity

`Optional`startRotation

`Optional`startSize

`Optional`startSpeed

`Optional`textureSheetAnimation

`Optional`transform

`Optional`velocityOverLifetime