three.quarks

A powerful particle system SDK for three.js that enables you to create stunning visual effects, interactive simulations, and engaging game mechanics with dynamic particle effects.

Key Features

Batched Rendering - Combine multiple particle systems into single draw calls for optimal performance
Multiple Emitter Shapes - Point, Circle, Sphere, Cone, Rectangle, Grid, Hemisphere, Donut and Mesh Surface
Rich Behavior System - Over 20 built-in behaviors to control every aspect of particles
Value Generators - Control particle properties with constant values, intervals, curves or procedural generators
Trail Rendering - Create particle trails with dynamic width and color
JSON Serialization - Save and load complete particle systems
Sub-Emitters - Emit child particle systems from parent particles
Sprite Sheet Animation - Support for animated textures using sprite sheets

Getting Started

Get started with three.quarks in three simple steps:


# Install the library
npm install three.quarks three


// Import and initialize
import * as THREE from "three";
import * as QUARKS from "three.quarks";
 
// Setup the 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 a batched renderer for efficient drawing
const batchedRenderer = new QUARKS.BatchedRenderer();
scene.add(batchedRenderer);
 
// Create a simple particle system
const particleSystem = new QUARKS.ParticleSystem({
  duration: 2,
  looping: true,
  shape: new QUARKS.SphereEmitter({
    radius: 1,
    thickness: 1,
  }),
  startLife: new QUARKS.IntervalValue(1, 3),
  startSpeed: new QUARKS.ConstantValue(5),
  startSize: new QUARKS.ConstantValue(0.5),
  startColor: new QUARKS.ConstantColor(new THREE.Vector4(1, 0.5, 0.1, 1)),
  worldSpace: true,
 
  // Add behaviors
  behaviors: [
    new QUARKS.SizeOverLife(new QUARKS.PiecewiseBezier()),
    new QUARKS.ColorOverLife(
      new QUARKS.Gradient([
        [new THREE.Vector3(1, 0.5, 0.1), 0],
        [new THREE.Vector3(0.1, 0.1, 0.1), 1],
      ]),
    ),
  ],
});
 
// Add the particle system to the scene
scene.add(particleSystem.emitter);
 
// Add the particle system to the batched renderer
batchedRenderer.addSystem(particleSystem);
 
// Animation loop
function animate() {
  requestAnimationFrame(animate);
 
  // Update the batched renderer
  batchedRenderer.update(0.016); // Update with delta time in seconds
 
  renderer.render(scene, camera);
}
animate();

Examples

View All Examples →

Learn More

Installation Guide - Get started with installation and setup
Core Concepts - Learn about particle systems, emitters and behaviors
API Reference - Full API documentation for developers

Community

Join our community to get help, share your work, and contribute to the project:

License

three.quarks is licensed under the MIT License .