Flame

<Flame> draws a small flame where it is mounted, such as a lantern’s wick or a candle’s. It is one card turned about its height toward the camera, shaded as a painted teardrop of three bands: a pale core, the body’s color and a redder rim. Its tip sways, and its height and brightness flicker. It is unlit and brighter than white, so the look’s bloom takes it where the quality level draws bloom: Medium and High.

Give it the light the game keeps beside it as light, a ref to a three.js light, and the light’s intensity swings with the flame by flicker, as a share either side of the intensity the game set. A write of the game’s own to the light’s intensity becomes the new middle of the swing. Two flames that share a light swing it once, and a flame that unmounts puts the light back as the game set it. The flame owns no light: mounting a light compiles every lit material in the scene again, so a flame that comes and goes, such as a lamp lit at dusk, leaves the light mounted and changes its intensity.

Its props and their defaults are in FlameProps. A flicker of 0.04 keeps a lantern’s pool steady, and 0.3 is a torch in the wind.

To bloom the flame alone, keep the look’s bloom threshold above the brightest lit surface in the scene and the flame’s intensity above the threshold. A small glowing point that must stay in sight from far is a glow sprite, which a lantern can carry beside its flame.

Sample

A lantern’s flame and the light it flickers:

packages/engine/test/outside/LanternFlame.tsx

import { useRef } from "react";
import type { PointLight } from "three";
import { Flame } from "@spawnite/engine";

/** A lantern on a post: a flame at its wick, 1.55 m up, and the warm
 *  light the lantern keeps, which flickers with the flame by 4%, little
 *  enough that the pool round the post does not breathe. */
export function LanternFlame() {
    const lightRef = useRef<PointLight>(null);
    return (
        <group>
            <pointLight
                ref={lightRef}
                position={[0, 1.62, 0]}
                color="#ffb868"
                intensity={40}
                distance={9}
            />
            <Flame
                position={[0, 1.55, 0]}
                size={0.07}
                intensity={5}
                flicker={0.04}
                light={lightRef}
            />
        </group>
    );
}

What the other engines do

Roblox’s Fire is the one flame a creator places from a component, a particle effect with a size, a heat and two colours, and it owns no light either. Unity, Unreal and Godot ship flames as particle samples. A few sprites flicker realistically; one card with clean bands draws a painted flame, as Firewatch’s and Sea of Thieves’s lanterns do, in one draw with no sprite sheet. For a fire with smoke and sparks, use Particles beside it.

Where it runs

Client. A room draws none. Under WebGPU no flame draws and its light holds still, as the WebGPU page lists.