ThreeVolumetricFire

A high-quality, parametric volumetric fire rendering library for Three.js using volumetric free-form deformation.

Launch Live Demo

Usage

ThreeVolumetricFire is designed to be a drop-in object for your Three.js scenes. It requires a noise texture and a fire profile texture to function.

import * as THREE from 'three';
import { VolumetricFire } from './src/ThreeVolumetricFire.js';

// 1. Load Textures
const loader = new THREE.TextureLoader();
const texNoise = loader.load('./assets/nzw.png');
const texProfile = loader.load('./assets/firetex.png');

// Configure textures
[texNoise, texProfile].forEach(t => {
    t.wrapS = t.wrapT = THREE.RepeatWrapping;
    t.minFilter = t.magFilter = THREE.LinearFilter;
});
texProfile.wrapS = texProfile.wrapT = THREE.ClampToEdgeWrapping;

// 2. Create Fire
const fire = new VolumetricFire({
    camera: camera,             // Required for view-aligned slicing
    textureNoise: texNoise,     // Required
    textureProfile: texProfile, // Required
    width: 1.0,
    height: 3.0,
    depth: 1.0,
    sliceSpacing: 0.1           // Lower = higher quality, more GPU cost
});

scene.add(fire);

// 3. Animation Loop
const clock = new THREE.Clock();

function animate() {
    requestAnimationFrame(animate);
    
    const elapsed = clock.getElapsedTime();
    fire.update(elapsed);

    renderer.render(scene, camera);
}
animate();

API

Constructor new VolumetricFire( options )

Parameter	Type	Default	Description
camera	THREE.Camera	Required	The active camera. Used to calculate view-aligned slices.
textureNoise	THREE.Texture	Required	Perlin noise texture for turbulence.
textureProfile	THREE.Texture	Required	Gradient texture defining the fire's color ramp.
width	Number	1.0	Initial width of the fire base.
height	Number	2.0	Initial height of the fire.
depth	Number	1.0	Initial depth of the fire base.
sliceSpacing	Number	0.1	World-space distance between rendering slices. Smaller values create smoother volumetric effects but increase vertex count.
segments	Number	32	Number of segments along the vertical spline. Higher values allow for smoother curves.
debug	Boolean	false	If true, renders the wireframe lattice helper.

Methods

update( elapsed )

Updates the internal simulation. Must be called every frame.

elapsed: Total elapsed time in seconds (e.g., clock.getElapsedTime()).

setControlPoints( points )

Deforms the fire along a custom spline.

points: An array of objects defining the spine of the fire:

[
    { 
        pos: new THREE.Vector3(0, 0, 0),    // Position
        scale: new THREE.Vector3(1, 1, 1),  // Width (x) and Depth (z) of section
        rot: new THREE.Quaternion(...)      // Orientation of section
    },
    // ... more points
]

setRectangularShape( width, height, depth )

Resets the fire to a simple vertical column with the specified dimensions.

References & Credits

This library is a modern Three.js implementation based on the following works:

Code Reference: Ported and adapted from yomotsu/VolumetricFire.

Scientific Principles: Fuller, Alfred R., et al. "Real-time procedural volumetric fire." Proceedings of the 2007 symposium on Interactive 3D graphics and games. 2007.