@wolffo/three-fire 1.0.1

package/dist/index.js

@@ -0,0 +1,463 @@
+'use strict';
+
+var three = require('three');
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var fiber = require('@react-three/fiber');
+
+/**
+ * Volumetric fire shader using ray marching and simplex noise
+ *
+ * Based on "Real-Time procedural volumetric fire" by Alfred et al.
+ * Uses simplex noise for turbulence and ray marching for volume rendering.
+ *
+ * @example
+ * ```ts
+ * const material = new ShaderMaterial({
+ *   defines: FireShader.defines,
+ *   uniforms: FireShader.uniforms,
+ *   vertexShader: FireShader.vertexShader,
+ *   fragmentShader: FireShader.fragmentShader,
+ *   transparent: true
+ * })
+ * ```
+ */
+const FireShader = {
+    defines: {
+        ITERATIONS: '20',
+        OCTAVES: '3',
+    },
+    uniforms: {
+        fireTex: { value: null },
+        color: { value: new three.Color(0xeeeeee) },
+        time: { value: 0.0 },
+        seed: { value: 0.0 },
+        invModelMatrix: { value: new three.Matrix4() },
+        scale: { value: new three.Vector3(1, 1, 1) },
+        noiseScale: { value: new three.Vector4(1, 2, 1, 0.3) },
+        magnitude: { value: 1.3 },
+        lacunarity: { value: 2.0 },
+        gain: { value: 0.5 },
+    },
+    vertexShader: /* glsl */ `
+    varying vec3 vWorldPos;
+
+    void main() {
+      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+      vWorldPos = (modelMatrix * vec4(position, 1.0)).xyz;
+    }
+  `,
+    fragmentShader: /* glsl */ `
+    uniform vec3 color;
+    uniform float time;
+    uniform float seed;
+    uniform mat4 invModelMatrix;
+    uniform vec3 scale;
+    uniform vec4 noiseScale;
+    uniform float magnitude;
+    uniform float lacunarity;
+    uniform float gain;
+    uniform sampler2D fireTex;
+
+    varying vec3 vWorldPos;
+
+    // GLSL simplex noise function by ashima
+    vec3 mod289(vec3 x) {
+      return x - floor(x * (1.0 / 289.0)) * 289.0;
+    }
+
+    vec4 mod289(vec4 x) {
+      return x - floor(x * (1.0 / 289.0)) * 289.0;
+    }
+
+    vec4 permute(vec4 x) {
+      return mod289(((x * 34.0) + 1.0) * x);
+    }
+
+    vec4 taylorInvSqrt(vec4 r) {
+      return 1.79284291400159 - 0.85373472095314 * r;
+    }
+
+    float snoise(vec3 v) {
+      const vec2 C = vec2(1.0 / 6.0, 1.0 / 3.0);
+      const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);
+
+      vec3 i = floor(v + dot(v, C.yyy));
+      vec3 x0 = v - i + dot(i, C.xxx);
+
+      vec3 g = step(x0.yzx, x0.xyz);
+      vec3 l = 1.0 - g;
+      vec3 i1 = min(g.xyz, l.zxy);
+      vec3 i2 = max(g.xyz, l.zxy);
+
+      vec3 x1 = x0 - i1 + C.xxx;
+      vec3 x2 = x0 - i2 + C.yyy;
+      vec3 x3 = x0 - D.yyy;
+
+      i = mod289(i);
+      vec4 p = permute(permute(permute(
+        i.z + vec4(0.0, i1.z, i2.z, 1.0))
+        + i.y + vec4(0.0, i1.y, i2.y, 1.0))
+        + i.x + vec4(0.0, i1.x, i2.x, 1.0));
+
+      float n_ = 0.142857142857;
+      vec3 ns = n_ * D.wyz - D.xzx;
+
+      vec4 j = p - 49.0 * floor(p * ns.z * ns.z);
+
+      vec4 x_ = floor(j * ns.z);
+      vec4 y_ = floor(j - 7.0 * x_);
+
+      vec4 x = x_ * ns.x + ns.yyyy;
+      vec4 y = y_ * ns.x + ns.yyyy;
+      vec4 h = 1.0 - abs(x) - abs(y);
+
+      vec4 b0 = vec4(x.xy, y.xy);
+      vec4 b1 = vec4(x.zw, y.zw);
+
+      vec4 s0 = floor(b0) * 2.0 + 1.0;
+      vec4 s1 = floor(b1) * 2.0 + 1.0;
+      vec4 sh = -step(h, vec4(0.0));
+
+      vec4 a0 = b0.xzyw + s0.xzyw * sh.xxyy;
+      vec4 a1 = b1.xzyw + s1.xzyw * sh.zzww;
+
+      vec3 p0 = vec3(a0.xy, h.x);
+      vec3 p1 = vec3(a0.zw, h.y);
+      vec3 p2 = vec3(a1.xy, h.z);
+      vec3 p3 = vec3(a1.zw, h.w);
+
+      vec4 norm = taylorInvSqrt(vec4(dot(p0, p0), dot(p1, p1), dot(p2, p2), dot(p3, p3)));
+      p0 *= norm.x;
+      p1 *= norm.y;
+      p2 *= norm.z;
+      p3 *= norm.w;
+
+      vec4 m = max(0.6 - vec4(dot(x0, x0), dot(x1, x1), dot(x2, x2), dot(x3, x3)), 0.0);
+      m = m * m;
+      return 42.0 * dot(m * m, vec4(dot(p0, x0), dot(p1, x1), dot(p2, x2), dot(p3, x3)));
+    }
+
+    float turbulence(vec3 p) {
+      float sum = 0.0;
+      float freq = 1.0;
+      float amp = 1.0;
+
+      for(int i = 0; i < OCTAVES; i++) {
+        sum += abs(snoise(p * freq)) * amp;
+        freq *= lacunarity;
+        amp *= gain;
+      }
+
+      return sum;
+    }
+
+    vec4 samplerFire(vec3 p, vec4 scale) {
+      vec2 st = vec2(sqrt(dot(p.xz, p.xz)), p.y);
+
+      if(st.x <= 0.0 || st.x >= 1.0 || st.y <= 0.0 || st.y >= 1.0) {
+        return vec4(0.0);
+      }
+
+      p.y -= (seed + time) * scale.w;
+      p *= scale.xyz;
+
+      st.y += sqrt(st.y) * magnitude * turbulence(p);
+
+      if(st.y <= 0.0 || st.y >= 1.0) {
+        return vec4(0.0);
+      }
+
+      return texture2D(fireTex, st);
+    }
+
+    vec3 localize(vec3 p) {
+      return (invModelMatrix * vec4(p, 1.0)).xyz;
+    }
+
+    void main() {
+      vec3 rayPos = vWorldPos;
+      vec3 rayDir = normalize(rayPos - cameraPosition);
+      float rayLen = 0.0288 * length(scale.xyz);
+
+      vec4 col = vec4(0.0);
+
+      for(int i = 0; i < ITERATIONS; i++) {
+        rayPos += rayDir * rayLen;
+        vec3 lp = localize(rayPos);
+        lp.y += 0.5;
+        lp.xz *= 2.0;
+        col += samplerFire(lp, noiseScale);
+      }
+
+      // Apply color tint to the fire
+      col.rgb *= color;
+      col.a = col.r;
+      gl_FragColor = col;
+    }
+  `,
+};
+
+/**
+ * Volumetric fire effect using ray marching shaders
+ *
+ * Creates a procedural fire effect that renders as a translucent volume.
+ * The fire shape is defined by a grayscale texture, with white areas being
+ * the most dense part of the fire.
+ *
+ * @example
+ * ```ts
+ * const texture = textureLoader.load('fire.png')
+ * const fire = new Fire({
+ *   fireTex: texture,
+ *   color: 0xff4400,
+ *   magnitude: 1.5
+ * })
+ * scene.add(fire)
+ *
+ * // In animation loop
+ * fire.update(time)
+ * ```
+ */
+class Fire extends three.Mesh {
+    /**
+     * Creates a new Fire instance
+     *
+     * @param props - Configuration options for the fire effect
+     */
+    constructor({ fireTex, color = 0xeeeeee, iterations = 20, octaves = 3, noiseScale = [1, 2, 1, 0.3], magnitude = 1.3, lacunarity = 2.0, gain = 0.5, }) {
+        const geometry = new three.BoxGeometry(1, 1, 1);
+        const material = new three.ShaderMaterial({
+            defines: {
+                ITERATIONS: iterations.toString(),
+                OCTAVES: octaves.toString(),
+            },
+            uniforms: {
+                fireTex: { value: fireTex },
+                color: { value: color instanceof three.Color ? color : new three.Color(color) },
+                time: { value: 0.0 },
+                seed: { value: Math.random() * 19.19 },
+                invModelMatrix: { value: new three.Matrix4() },
+                scale: { value: new three.Vector3(1, 1, 1) },
+                noiseScale: { value: new three.Vector4(...noiseScale) },
+                magnitude: { value: magnitude },
+                lacunarity: { value: lacunarity },
+                gain: { value: gain },
+            },
+            vertexShader: FireShader.vertexShader,
+            fragmentShader: FireShader.fragmentShader,
+            transparent: true,
+            depthWrite: false,
+            depthTest: false,
+        });
+        super(geometry, material);
+        this._time = 0;
+        // Configure texture
+        fireTex.magFilter = fireTex.minFilter = three.LinearFilter;
+        fireTex.wrapS = fireTex.wrapT = three.ClampToEdgeWrapping;
+    }
+    /**
+     * Updates the fire animation and matrix uniforms
+     *
+     * Call this method in your animation loop to animate the fire effect.
+     *
+     * @param time - Current time in seconds (optional)
+     *
+     * @example
+     * ```ts
+     * function animate() {
+     *   fire.update(performance.now() / 1000)
+     *   renderer.render(scene, camera)
+     *   requestAnimationFrame(animate)
+     * }
+     * ```
+     */
+    update(time) {
+        if (time !== undefined) {
+            this._time = time;
+            this.material.uniforms.time.value = time;
+        }
+        this.updateMatrixWorld();
+        this.material.uniforms.invModelMatrix.value.copy(this.matrixWorld).invert();
+        this.material.uniforms.scale.value.copy(this.scale);
+    }
+    /**
+     * Current animation time in seconds
+     */
+    get time() {
+        return this._time;
+    }
+    set time(value) {
+        this._time = value;
+        this.material.uniforms.time.value = value;
+    }
+    /**
+     * Fire color tint
+     *
+     * @example
+     * ```ts
+     * fire.fireColor = 'orange'
+     * fire.fireColor = 0xff4400
+     * fire.fireColor = new Color(1, 0.5, 0)
+     * ```
+     */
+    get fireColor() {
+        return this.material.uniforms.color.value;
+    }
+    set fireColor(color) {
+        this.material.uniforms.color.value = color instanceof three.Color ? color : new three.Color(color);
+    }
+    /**
+     * Fire shape intensity
+     *
+     * Higher values create more dramatic fire shapes.
+     * Range: 0.5 - 3.0, Default: 1.3
+     */
+    get magnitude() {
+        return this.material.uniforms.magnitude.value;
+    }
+    set magnitude(value) {
+        this.material.uniforms.magnitude.value = value;
+    }
+    /**
+     * Noise lacunarity (frequency multiplier)
+     *
+     * Controls how much the frequency increases for each noise octave.
+     * Range: 1.0 - 4.0, Default: 2.0
+     */
+    get lacunarity() {
+        return this.material.uniforms.lacunarity.value;
+    }
+    set lacunarity(value) {
+        this.material.uniforms.lacunarity.value = value;
+    }
+    /**
+     * Noise gain (amplitude multiplier)
+     *
+     * Controls how much the amplitude decreases for each noise octave.
+     * Range: 0.1 - 1.0, Default: 0.5
+     */
+    get gain() {
+        return this.material.uniforms.gain.value;
+    }
+    set gain(value) {
+        this.material.uniforms.gain.value = value;
+    }
+}
+
+/**
+ * Helper hook for texture loading (alternative to @react-three/drei)
+ */
+const useTexture = (url) => fiber.useLoader(three.TextureLoader, url);
+// Extend R3F with our Fire class
+fiber.extend({ Fire: Fire });
+/**
+ * React Three Fiber component for volumetric fire effect
+ *
+ * Creates a procedural fire effect that can be easily integrated into R3F scenes.
+ * The component automatically handles texture loading, animation updates, and
+ * provides props for all fire parameters.
+ *
+ * @example
+ * ```tsx
+ * <Canvas>
+ *   <Fire
+ *     texture="/fire.png"
+ *     color="orange"
+ *     magnitude={1.5}
+ *     scale={[2, 3, 2]}
+ *     position={[0, 0, 0]}
+ *   />
+ * </Canvas>
+ * ```
+ *
+ * @example With custom animation
+ * ```tsx
+ * <Fire
+ *   texture="/fire.png"
+ *   onUpdate={(fire, time) => {
+ *     fire.fireColor.setHSL((time * 0.1) % 1, 1, 0.5)
+ *   }}
+ * />
+ * ```
+ */
+const FireComponent = react.forwardRef(({ texture, color = 0xeeeeee, iterations = 20, octaves = 3, noiseScale = [1, 2, 1, 0.3], magnitude = 1.3, lacunarity = 2.0, gain = 0.5, autoUpdate = true, onUpdate, children, ...props }, ref) => {
+    const fireRef = react.useRef(null);
+    // Load texture if string is provided
+    const loadedTexture = useTexture(typeof texture === 'string' ? texture : '');
+    const finalTexture = typeof texture === 'string' ? loadedTexture : texture;
+    // Memoize fire props to prevent unnecessary recreations
+    const fireProps = react.useMemo(() => ({
+        fireTex: finalTexture,
+        color: color instanceof three.Color ? color : new three.Color(color),
+        iterations,
+        octaves,
+        noiseScale,
+        magnitude,
+        lacunarity,
+        gain,
+    }), [finalTexture, color, iterations, octaves, noiseScale, magnitude, lacunarity, gain]);
+    // Auto-update with useFrame
+    fiber.useFrame((state) => {
+        if (fireRef.current && autoUpdate) {
+            const time = state.clock.getElapsedTime();
+            fireRef.current.update(time);
+            onUpdate?.(fireRef.current, time);
+        }
+    });
+    // Expose imperative handle
+    react.useImperativeHandle(ref, () => ({
+        get fire() {
+            return fireRef.current;
+        },
+        update: (time) => {
+            if (fireRef.current) {
+                fireRef.current.update(time);
+            }
+        },
+    }), []);
+    return (jsxRuntime.jsx("fire", { ref: fireRef, args: [fireProps], ...props, children: children }));
+});
+FireComponent.displayName = 'Fire';
+/**
+ * Hook for easier access to fire instance and controls
+ *
+ * Provides a ref and helper methods for controlling fire imperatively.
+ *
+ * @returns Object with ref, fire instance, and update method
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const fireRef = useFire()
+ *
+ *   const handleClick = () => {
+ *     if (fireRef.fire) {
+ *       fireRef.fire.magnitude = 2.0
+ *     }
+ *   }
+ *
+ *   return (
+ *     <Fire ref={fireRef.ref} texture="/fire.png" />
+ *   )
+ * }
+ * ```
+ */
+const useFire = () => {
+    const ref = react.useRef(null);
+    return {
+        /** Ref to pass to Fire component */
+        ref,
+        /** Fire mesh instance (null until mounted) */
+        fire: ref.current?.fire || null,
+        /** Update fire animation manually */
+        update: (time) => ref.current?.update(time),
+    };
+};
+
+exports.Fire = FireComponent;
+exports.FireComponent = FireComponent;
+exports.FireMesh = Fire;
+exports.FireShader = FireShader;
+exports.useFire = useFire;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/FireShader.ts","../src/Fire.ts","../src/FireComponent.tsx"],"sourcesContent":[null,null,null],"names":["Color","Matrix4","Vector3","Vector4","Mesh","BoxGeometry","ShaderMaterial","LinearFilter","ClampToEdgeWrapping","useLoader","TextureLoader","extend","FireMesh","forwardRef","useRef","useMemo","useFrame","useImperativeHandle","_jsx"],"mappings":"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"}

package/dist/types/Fire.d.ts

@@ -0,0 +1,115 @@
+import { Mesh, ShaderMaterial, Texture, Color } from 'three';
+import { FireShaderUniforms } from './FireShader';
+/**
+ * Properties for creating a Fire instance
+ */
+export interface FireProps {
+    /** Fire texture (grayscale mask defining fire shape) */
+    fireTex: Texture;
+    /** Fire color tint (default: 0xeeeeee) */
+    color?: Color | string | number;
+    /** Ray marching iterations - higher = better quality, lower performance (default: 20) */
+    iterations?: number;
+    /** Noise octaves for turbulence (default: 3) */
+    octaves?: number;
+    /** Noise scaling parameters [x, y, z, time] (default: [1, 2, 1, 0.3]) */
+    noiseScale?: [number, number, number, number];
+    /** Fire shape intensity (default: 1.3) */
+    magnitude?: number;
+    /** Noise lacunarity - frequency multiplier (default: 2.0) */
+    lacunarity?: number;
+    /** Noise gain - amplitude multiplier (default: 0.5) */
+    gain?: number;
+}
+/**
+ * Volumetric fire effect using ray marching shaders
+ *
+ * Creates a procedural fire effect that renders as a translucent volume.
+ * The fire shape is defined by a grayscale texture, with white areas being
+ * the most dense part of the fire.
+ *
+ * @example
+ * ```ts
+ * const texture = textureLoader.load('fire.png')
+ * const fire = new Fire({
+ *   fireTex: texture,
+ *   color: 0xff4400,
+ *   magnitude: 1.5
+ * })
+ * scene.add(fire)
+ *
+ * // In animation loop
+ * fire.update(time)
+ * ```
+ */
+export declare class Fire extends Mesh {
+    material: ShaderMaterial & {
+        uniforms: FireShaderUniforms;
+    };
+    private _time;
+    /**
+     * Creates a new Fire instance
+     *
+     * @param props - Configuration options for the fire effect
+     */
+    constructor({ fireTex, color, iterations, octaves, noiseScale, magnitude, lacunarity, gain, }: FireProps);
+    /**
+     * Updates the fire animation and matrix uniforms
+     *
+     * Call this method in your animation loop to animate the fire effect.
+     *
+     * @param time - Current time in seconds (optional)
+     *
+     * @example
+     * ```ts
+     * function animate() {
+     *   fire.update(performance.now() / 1000)
+     *   renderer.render(scene, camera)
+     *   requestAnimationFrame(animate)
+     * }
+     * ```
+     */
+    update(time?: number): void;
+    /**
+     * Current animation time in seconds
+     */
+    get time(): number;
+    set time(value: number);
+    /**
+     * Fire color tint
+     *
+     * @example
+     * ```ts
+     * fire.fireColor = 'orange'
+     * fire.fireColor = 0xff4400
+     * fire.fireColor = new Color(1, 0.5, 0)
+     * ```
+     */
+    get fireColor(): Color;
+    set fireColor(color: Color | string | number);
+    /**
+     * Fire shape intensity
+     *
+     * Higher values create more dramatic fire shapes.
+     * Range: 0.5 - 3.0, Default: 1.3
+     */
+    get magnitude(): number;
+    set magnitude(value: number);
+    /**
+     * Noise lacunarity (frequency multiplier)
+     *
+     * Controls how much the frequency increases for each noise octave.
+     * Range: 1.0 - 4.0, Default: 2.0
+     */
+    get lacunarity(): number;
+    set lacunarity(value: number);
+    /**
+     * Noise gain (amplitude multiplier)
+     *
+     * Controls how much the amplitude decreases for each noise octave.
+     * Range: 0.1 - 1.0, Default: 0.5
+     */
+    get gain(): number;
+    set gain(value: number);
+}
+//# sourceMappingURL=Fire.d.ts.map

package/dist/types/Fire.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Fire.d.ts","sourceRoot":"","sources":["../../src/Fire.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EAEJ,cAAc,EACd,OAAO,EACP,KAAK,EAMN,MAAM,OAAO,CAAA;AACd,OAAO,EAAc,kBAAkB,EAAE,MAAM,cAAc,CAAA;AAE7D;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB,wDAAwD;IACxD,OAAO,EAAE,OAAO,CAAA;IAChB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,MAAM,CAAA;IAC/B,yFAAyF;IACzF,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,gDAAgD;IAChD,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,yEAAyE;IACzE,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;IAC7C,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,6DAA6D;IAC7D,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBAAa,IAAK,SAAQ,IAAI;IACb,QAAQ,EAAE,cAAc,GAAG;QAAE,QAAQ,EAAE,kBAAkB,CAAA;KAAE,CAAA;IAC1E,OAAO,CAAC,KAAK,CAAI;IAEjB;;;;OAIG;gBACS,EACV,OAAO,EACP,KAAgB,EAChB,UAAe,EACf,OAAW,EACX,UAA2B,EAC3B,SAAe,EACf,UAAgB,EAChB,IAAU,GACX,EAAE,SAAS;IAkCZ;;;;;;;;;;;;;;;OAeG;IACI,MAAM,CAAC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI;IAWlC;;OAEG;IACH,IAAW,IAAI,IAAI,MAAM,CAExB;IAED,IAAW,IAAI,CAAC,KAAK,EAAE,MAAM,EAG5B;IAED;;;;;;;;;OASG;IACH,IAAW,SAAS,IAAI,KAAK,CAE5B;IAED,IAAW,SAAS,CAAC,KAAK,EAAE,KAAK,GAAG,MAAM,GAAG,MAAM,EAElD;IAED;;;;;OAKG;IACH,IAAW,SAAS,IAAI,MAAM,CAE7B;IAED,IAAW,SAAS,CAAC,KAAK,EAAE,MAAM,EAEjC;IAED;;;;;OAKG;IACH,IAAW,UAAU,IAAI,MAAM,CAE9B;IAED,IAAW,UAAU,CAAC,KAAK,EAAE,MAAM,EAElC;IAED;;;;;OAKG;IACH,IAAW,IAAI,IAAI,MAAM,CAExB;IAED,IAAW,IAAI,CAAC,KAAK,EAAE,MAAM,EAE5B;CACF"}

package/dist/types/FireComponent.d.ts

@@ -0,0 +1,101 @@
+import React from 'react';
+import { ReactThreeFiber } from '@react-three/fiber';
+import { Fire as FireMesh, FireProps as FireMeshProps } from './Fire';
+import { Texture } from 'three';
+declare module '@react-three/fiber' {
+    interface ThreeElements {
+        fire: ReactThreeFiber.Object3DNode<FireMesh, typeof FireMesh>;
+    }
+}
+/**
+ * Props for the Fire React component
+ */
+export interface FireProps extends Omit<FireMeshProps, 'fireTex'> {
+    /** Fire texture URL or Three.js Texture object */
+    texture: string | Texture;
+    /** Auto-update time from useFrame (default: true) */
+    autoUpdate?: boolean;
+    /** Custom update function called each frame */
+    onUpdate?: (fire: FireMesh, time: number) => void;
+    /** Child components */
+    children?: React.ReactNode;
+    /** Position in 3D space */
+    position?: [number, number, number];
+    /** Rotation in radians */
+    rotation?: [number, number, number];
+    /** Scale factor (uniform or per-axis) */
+    scale?: [number, number, number] | number;
+}
+/**
+ * Ref interface for imperative fire control
+ */
+export interface FireRef {
+    /** Fire mesh instance */
+    fire: FireMesh | null;
+    /** Update fire animation manually */
+    update: (time?: number) => void;
+}
+/**
+ * React Three Fiber component for volumetric fire effect
+ *
+ * Creates a procedural fire effect that can be easily integrated into R3F scenes.
+ * The component automatically handles texture loading, animation updates, and
+ * provides props for all fire parameters.
+ *
+ * @example
+ * ```tsx
+ * <Canvas>
+ *   <Fire
+ *     texture="/fire.png"
+ *     color="orange"
+ *     magnitude={1.5}
+ *     scale={[2, 3, 2]}
+ *     position={[0, 0, 0]}
+ *   />
+ * </Canvas>
+ * ```
+ *
+ * @example With custom animation
+ * ```tsx
+ * <Fire
+ *   texture="/fire.png"
+ *   onUpdate={(fire, time) => {
+ *     fire.fireColor.setHSL((time * 0.1) % 1, 1, 0.5)
+ *   }}
+ * />
+ * ```
+ */
+export declare const FireComponent: React.ForwardRefExoticComponent<FireProps & React.RefAttributes<FireRef>>;
+/**
+ * Hook for easier access to fire instance and controls
+ *
+ * Provides a ref and helper methods for controlling fire imperatively.
+ *
+ * @returns Object with ref, fire instance, and update method
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const fireRef = useFire()
+ *
+ *   const handleClick = () => {
+ *     if (fireRef.fire) {
+ *       fireRef.fire.magnitude = 2.0
+ *     }
+ *   }
+ *
+ *   return (
+ *     <Fire ref={fireRef.ref} texture="/fire.png" />
+ *   )
+ * }
+ * ```
+ */
+export declare const useFire: () => {
+    /** Ref to pass to Fire component */
+    ref: React.RefObject<FireRef>;
+    /** Fire mesh instance (null until mounted) */
+    fire: FireMesh | null;
+    /** Update fire animation manually */
+    update: (time?: number) => void | undefined;
+};
+//# sourceMappingURL=FireComponent.d.ts.map

package/dist/types/FireComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FireComponent.d.ts","sourceRoot":"","sources":["../../src/FireComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2D,MAAM,OAAO,CAAA;AAC/E,OAAO,EAAoB,eAAe,EAAa,MAAM,oBAAoB,CAAA;AACjF,OAAO,EAAE,IAAI,IAAI,QAAQ,EAAE,SAAS,IAAI,aAAa,EAAE,MAAM,QAAQ,CAAA;AACrE,OAAO,EAAwB,OAAO,EAAE,MAAM,OAAO,CAAA;AAUrD,OAAO,QAAQ,oBAAoB,CAAC;IAClC,UAAU,aAAa;QACrB,IAAI,EAAE,eAAe,CAAC,YAAY,CAAC,QAAQ,EAAE,OAAO,QAAQ,CAAC,CAAA;KAC9D;CACF;AAED;;GAEG;AACH,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,aAAa,EAAE,SAAS,CAAC;IAC/D,kDAAkD;IAClD,OAAO,EAAE,MAAM,GAAG,OAAO,CAAA;IACzB,qDAAqD;IACrD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACjD,uBAAuB;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;IACnC,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;IACnC,yCAAyC;IACzC,KAAK,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,GAAG,MAAM,CAAA;CAC1C;AAED;;GAEG;AACH,MAAM,WAAW,OAAO;IACtB,yBAAyB;IACzB,IAAI,EAAE,QAAQ,GAAG,IAAI,CAAA;IACrB,qCAAqC;IACrC,MAAM,EAAE,CAAC,IAAI,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CAChC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,aAAa,2EAsEzB,CAAA;AAID;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,OAAO;IAGhB,oCAAoC;;IAEpC,8CAA8C;;IAE9C,qCAAqC;oBACrB,MAAM;CAEzB,CAAA"}