R3F Quick Start

npm install @threeparticles/core @react-three/fiber react three

import * as THREE from "three/webgpu";
import { Canvas } from "@react-three/fiber";
import { Particles } from "@threeparticles/core/react";
 
function App() {
  return (
    <Canvas
      gl={async (props) => {
        const renderer = new THREE.WebGPURenderer({ ...props, antialias: true });
        await renderer.init();
        return renderer;
      }}
      camera={{ position: [0, 0, 5], fov: 75 }}
    >
      <Particles
        config={{
          particles: {
            count: 10000,
            intensity: 2,
            colors: [
              [
                { color: "cyan", stop: 0 },
                { color: "purple", stop: 1 },
              ],
            ],
          },
          render: {
            blendingMode: THREE.AdditiveBlending,
          },
          emitter: {
            loop: true,
            rate: 1000,
            lifetime: [2, 4],
            speed: [0.5, 1],
            size: [0.05, 0.4],
            directionMin: [-1, -1, -1],
            directionMax: [1, 1, 1],
          },
        }}
      />
    </Canvas>
  );
}

import { useRef } from "react";
import { Particles } from "@threeparticles/core/react";
import type { Particles as ParticlesCore } from "@threeparticles/core";
 
function ControlledParticles() {
  const particlesRef = useRef<ParticlesCore>(null);
 
  const handleBurst = () => {
    particlesRef.current?.start();
  };
 
  return (
    <>
      <Particles ref={particlesRef} config={config} autoStart={false} />
      <button onClick={handleBurst}>Burst</button>
    </>
  );
}