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
- Learn about Basic Concepts
- Explore the API Reference
- Check out Examples