Skip to content

Collection of two interactive fire particle simulations: a 3D version using React Three Fiber with bloom and orbit controls, and a lightweight 2D version using Canvas 2D with radial gradients and trails.

Notifications You must be signed in to change notification settings

saskaZs/Fire-Simulation

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

23 Commits
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

πŸ”₯ Fire Simulations Collection

This repository contains two independent implementations of interactive fire particle simulations, both built to explore real-time flame effects:

  1. 3D Version – Powered by React Three Fiber (Three.js)
    A full 3D scene with orbiting camera, bloom post-processing, soft particles, and a glowing fire pit.

  2. 2D Version – Pure React + Canvas 2D
    A lightweight 2D simulation using native canvas drawing, radial gradients, and trail effects β€” no 3D libraries required.

Both versions feature:

  • Adjustable "energy" slider (10–100%) that controls flame intensity, height, spread, and color.
  • Gaussian-distributed particle spawning for natural, organic flame shapes.
  • Physics-based motion (buoyancy, turbulence, drag, random bursts).
  • Realistic color progression from hot white/yellow to cool red/orange.

πŸš€ Quick Start

Each project is a standalone Vite + React app.

For the 3D version:

cd 3d-fire-r3f
npm install
npm run dev

For the 2D version:

cd 2d-fire-canvas
npm install
npm run dev

About

Collection of two interactive fire particle simulations: a 3D version using React Three Fiber with bloom and orbit controls, and a lightweight 2D version using Canvas 2D with radial gradients and trails.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published