Type Alias ParticleSystemConfig

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;
}

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

Type declaration

Optionalduration?: 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.
```
Optionalemission?: Emission
Defines the particle emission settings. Configures the emission rate over time and distance.
See
Emission
Default
```
emission: {
  rateOverTime: 10.0,
  rateOverDistance: 0.0,
}
```
Optionalgravity?: 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;
```
Optionallooping?: boolean
Indicates whether the system should loop after finishing.
Default
```
true
```
Example
```
looping: true; // System loops continuously.
```
Optionalmap?: 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;
```
OptionalmaxParticles?: 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?: 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,
}

OptionalonComplete?: () => void
Called when the system completes an iteration.
OptionalonUpdate?: (
    data: {
        delta: number;
        elapsed: number;
        iterationCount: number;
        lifetime: number;
        particleSystem: THREE.Points;
    },
) => void
Called on every update frame with particle system data.

`Optional`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 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
}

OptionalrotationOverLifetime?: { 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,
}
```
Optionalshape?: ShapeConfig
Configuration for the emitter shape. Determines the shape and parameters for particle emission.

See
ShapeConfig
OptionalsimulationSpace?: 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?: { 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 },
    ],
  },
}

OptionalstartColor?: 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 },
}
```
OptionalstartDelay?: 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?: 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?: 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?: 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?: 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?: 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
};

OptionaltextureSheetAnimation?: 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

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),
}

OptionalvelocityOverLifetime?: 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

Type declaration

Optionalduration?: number

Default

Example

Optionalemission?: Emission

See

Default

Optionalgravity?: Constant

Default

Example

Optionallooping?: boolean

Default

Example

Optionalmap?: THREE.Texture

Default

Example

OptionalmaxParticles?: Constant

Default

Example

Optionalnoise?: NoiseConfig

See

Default

OptionalonComplete?: () => void

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

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

Default

Optionalrenderer?: Renderer

See

Default

OptionalrotationOverLifetime?: { isActive: boolean } & RandomBetweenTwoConstants

Default

Optionalshape?: ShapeConfig

See

OptionalsimulationSpace?: SimulationSpace

Default

Example

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

Default

OptionalstartColor?: MinMaxColor

Default

OptionalstartDelay?: Constant | RandomBetweenTwoConstants

Default

Example

OptionalstartLifetime?: Constant | RandomBetweenTwoConstants | LifetimeCurve

Default

Example

OptionalstartOpacity?: Constant | RandomBetweenTwoConstants | LifetimeCurve

Default

Example

OptionalstartRotation?: Constant | RandomBetweenTwoConstants | LifetimeCurve

Default

Example

OptionalstartSize?: Constant | RandomBetweenTwoConstants | LifetimeCurve

Default

Example

OptionalstartSpeed?: Constant | RandomBetweenTwoConstants | LifetimeCurve

Default

Example

OptionaltextureSheetAnimation?: TextureSheetAnimation

See

Default

Optionaltransform?: Transform

See

Default

OptionalvelocityOverLifetime?: VelocityOverLifetime

See

Default

Settings

`Optional`duration?: number

`Optional`emission?: Emission

`Optional`gravity?: Constant

`Optional`looping?: boolean

`Optional`map?: THREE.Texture

`Optional`maxParticles?: Constant

`Optional`noise?: NoiseConfig

`Optional`onComplete?: () => void

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

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

`Optional`renderer?: Renderer

`Optional`rotationOverLifetime?: { isActive: boolean } & RandomBetweenTwoConstants

`Optional`shape?: ShapeConfig

`Optional`simulationSpace?: SimulationSpace

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

`Optional`startColor?: MinMaxColor

`Optional`startDelay?: Constant | RandomBetweenTwoConstants

`Optional`startLifetime?: Constant | RandomBetweenTwoConstants | LifetimeCurve

`Optional`startOpacity?: Constant | RandomBetweenTwoConstants | LifetimeCurve

`Optional`startRotation?: Constant | RandomBetweenTwoConstants | LifetimeCurve

`Optional`startSize?: Constant | RandomBetweenTwoConstants | LifetimeCurve

`Optional`startSpeed?: Constant | RandomBetweenTwoConstants | LifetimeCurve

`Optional`textureSheetAnimation?: TextureSheetAnimation

`Optional`transform?: Transform

`Optional`velocityOverLifetime?: VelocityOverLifetime