A simple and easy-to-use library for creating visual effects with vanilla Three.js and React Three Fiber.

🚀 Live Demo - 🎆 Fireworks Demo - 🧙 Wizard Game Demo

This powerful VFX particle system was developed as part of the comprehensive VFX & Advanced Rendering Chapter in my React Three Fiber: The Ultimate Guide to 3D Web Development course.

This monorepo contains two packages designed to work with different environments:

wawa-vfx-vanilla - Pure Three.js implementation

npm install wawa-vfx-vanilla

• ✅ No React dependencies
• ✅ Clean installation
• ✅ Works with any Three.js project

wawa-vfx - React Three Fiber components

npm install wawa-vfx

• ✅ Declarative React components
• ✅ Built-in Leva debug controls
• ✅ TypeScript support

Choose your implementation:

import { VFXEmitter, VFXParticles } from 'wawa-vfx-vanilla';

const particles = new VFXParticles('fire', {
  nbParticles: 1000,
  gravity: [0, -2, 0],
  renderMode: 'billboard'
});
scene.add(particles.getMesh());

const emitter = new VFXEmitter('fire', {
  duration: 2,
  nbParticles: 50
});
scene.add(emitter);

import { VFXEmitter, VFXParticles } from 'wawa-vfx';

<Canvas>
  <VFXParticles 
    name="fire"
    settings={{
      nbParticles: 1000,
      gravity: [0, -2, 0],
      renderMode: 'billboard'
    }}
  />
  <VFXEmitter 
    emitter="fire"
    settings={{
      duration: 2,
      nbParticles: 50
    }}
  />
</Canvas>

• Vanilla Three.js Documentation - Complete API reference, examples, and guides
• React Three Fiber Documentation - Component props, hooks, and React-specific features
• Migration Guide - Upgrading from single package structure

Explore the examples/ directory for complete implementations:

• React Three Fiber Examples - Interactive demos with source code
• Fire Effects - Realistic fire and smoke
• Fireworks - Explosive particle displays
• Magic Spells - Fantasy VFX effects
• Custom Geometry - Using 3D models as particles

• 🚀 Easy to Use: Create complex particle effects with minimal code
• ⚡ Performance Optimized: Instanced rendering for thousands of particles
• 🎨 Highly Customizable: 40+ settings for fine-tuning effects
• 🎯 Dual Architecture: Same API for both vanilla Three.js and React
• 📐 Advanced Rendering: Billboard, mesh, and stretch-billboard modes
• 🌊 Smooth Animations: 42 built-in easing functions
• 🔧 TypeScript: Full type definitions included
• 📦 Custom Geometry: Use any 3D model as particles

• Stretch Billboard Mode: Particles that stretch along velocity
• 42 Easing Functions: Smooth mathematical transitions
• Appearance Modes: Square and circular particle shapes
• Local Direction Control: Emit particles in local or world space
• Custom Geometry Support: Use any Three.js geometry

This project uses npm workspaces:

# Install all dependencies
npm install

# Build both packages
npm run build

# Build specific package
npm run build:vanilla
npm run build:react

# Development
npm run dev:vanilla
npm run dev:react

Contributions are welcome! Please feel free to submit issues and pull requests.

MIT © Wawa Sensei

Get started today: Choose vanilla or React and create amazing particle effects! 🎆