Integrations

import { useFrame } from "@react-three/fiber";
import { useRef, useEffect, useMemo } from "react";
import { Particles } from "@threeparticles/core";
 
function ParticleEffect() {
  const particlesRef = useRef<Particles | null>(null);
 
  const config = useMemo(
    () => ({
      particles: {
        count: 500,
      },
      emitter: {
        loop: true,
        lifetime: [1, 2],
        speed: [1, 3],
      },
    }),
    [],
  );
 
  useEffect(() => {
    const particles = new Particles(config);
    particlesRef.current = particles;
    particles.start();
 
    return () => {
      particles.stop();
      particles.dispose();
    };
  }, [config]);
 
  useFrame((_, delta) => {
    particlesRef.current?.update(delta);
  });
 
  return particlesRef.current ? <primitive object={particlesRef.current} /> : null;
}

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import { Particles } from "@threeparticles/core";
 
const particles = ref(null);
 
onMounted(() => {
  particles.value = new Particles({
    particles: {
      count: 500,
    },
    emitter: {
      loop: true,
      lifetime: [1, 2],
      speed: [1, 3],
    },
  });
  particles.value.start();
});
 
onUnmounted(() => {
  particles.value?.stop();
  particles.value?.dispose();
});
 
// Call particles.value.update(delta) in your render loop
</script>

import { World } from "@dimforge/rapier3d";
import { Particles } from "@threeparticles/core";
 
const world = new World({ x: 0, y: -9.81, z: 0 });
 
const particles = new Particles({
  particles: {
    count: 100,
  },
  emitter: {
    loop: true,
    lifetime: [3, 5],
    speed: [2, 4],
  },
});
 
scene.add(particles);
particles.start();
 
// Physics and particles updated in same loop
function animate() {
  world.step();
  particles.update(delta);
}

import * as THREE from "three";
import { EffectComposer, RenderPass, EffectPass, BloomEffect } from "postprocessing";
import { Particles } from "@threeparticles/core";
 
const composer = new EffectComposer(renderer);
composer.addPass(new RenderPass(scene, camera));
composer.addPass(
  new EffectPass(
    camera,
    new BloomEffect({
      intensity: 1.5,
      luminanceThreshold: 0.6,
    }),
  ),
);
 
const particles = new Particles({
  particles: {
    count: 500,
    colors: [
      [
        { color: "cyan", stop: 0 },
        { color: "white", stop: 1 },
      ],
    ],
  },
  render: {
    blendingMode: THREE.AdditiveBlending,
  },
  emitter: {
    loop: true,
    lifetime: [1, 2],
    speed: [1, 3],
  },
});
 
scene.add(particles);
particles.start();
 
function animate() {
  particles.update(delta);
  composer.render();
}