Advanced Examples

import * as THREE from "three";
import { Particles } from "@threeparticles/core";
 
const movingObject = new THREE.Mesh(geometry, material);
 
const trail = new Particles({
  particles: {
    count: 200,
    colors: [
      [
        { color: "white", stop: 0 },
        { color: "#000000", stop: 1 },
      ],
    ],
    fadeSize: [1, 0],
    fadeAlpha: [1, 0],
  },
  emitter: {
    loop: true,
    spawnMode: "time",
    rate: 60,
    lifetime: [0.3, 0.5],
    speed: [0, 0.5],
    size: [0.1, 0.2],
  },
});
 
scene.add(trail);
trail.start();
 
// Update trail position in animation loop
function animate() {
  trail.position.copy(movingObject.position);
  trail.update(delta);
}

import * as THREE from "three";
import { Particles } from "@threeparticles/core";
 
const explosion = new Particles({
  particles: {
    count: 300,
    gravity: [0, -5, 0],
    colors: [
      [
        { color: "white", stop: 0 },
        { color: "orange", stop: 0.5 },
        { color: "red", stop: 1 },
      ],
    ],
    fadeAlpha: [1, 0],
    fadeSize: [1, 0.5],
  },
  render: {
    blendingMode: THREE.AdditiveBlending,
  },
  emitter: {
    spawnMode: "burst",
    loop: false,
    rate: 300,
    lifetime: [0.3, 1],
    speed: [5, 15],
    size: [0.1, 0.3],
    directionMin: [-1, -1, -1],
    directionMax: [1, 1, 1],
  },
});
 
scene.add(explosion);
 
// Trigger explosion
explosion.start();
 
// To replay, call start() again after stop()
function triggerExplosion() {
  explosion.stop();
  explosion.start();
}

import * as THREE from "three";
import { Particles } from "@threeparticles/core";
 
// Sparks - fast, bright
const sparks = new Particles({
  particles: {
    count: 200,
    gravity: [0, -2, 0],
    colors: [
      [
        { color: "yellow", stop: 0 },
        { color: "orange", stop: 1 },
      ],
    ],
  },
  render: {
    blendingMode: THREE.AdditiveBlending,
  },
  emitter: {
    loop: true,
    spawnMode: "time",
    rate: 30,
    lifetime: [0.2, 0.5],
    speed: [3, 8],
    size: [0.02, 0.05],
    directionMin: [-1, 0.5, -1],
    directionMax: [1, 1, 1],
  },
});
 
// Smoke - slow, fading
const smoke = new Particles({
  particles: {
    count: 100,
    gravity: [0, 0.5, 0],
    colors: [
      [
        { color: "#666666", stop: 0 },
        { color: "#333333", stop: 1 },
      ],
    ],
    fadeAlpha: [0.6, 0],
    fadeSize: [0.5, 2],
  },
  emitter: {
    loop: true,
    spawnMode: "time",
    rate: 10,
    lifetime: [2, 4],
    speed: [0.5, 1],
    size: [0.3, 0.5],
    directionMin: [-0.2, 1, -0.2],
    directionMax: [0.2, 1, 0.2],
  },
});
 
scene.add(sparks);
scene.add(smoke);
sparks.start();
smoke.start();
 
// Update both in animation loop
function animate() {
  sparks.update(delta);
  smoke.update(delta);
}