Getting Started
Quick Start

Quick Start

Create your first particle system in minutes.

Basic Setup

import * as THREE from "three";
import { Particles } from "@threeparticles/core";
 
// Create your Three.js scene
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
 
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
 
// Create particle system
const particles = new Particles({
  particles: {
    count: 500,
  },
  emitter: {
    loop: true,
    lifetime: [1, 3],
    speed: [1, 2],
    size: [0.05, 0.1],
  },
});
 
scene.add(particles);
particles.start();
 
// Animation loop
const clock = new THREE.Clock();
function animate() {
  requestAnimationFrame(animate);
  particles.update(clock.getDelta());
  renderer.render(scene, camera);
}
 
animate();

Next Steps