@wolffo/three-fire/dist/types/tsl/FireComponentTSL.d.ts

Modern TypeScript volumetric fire effect for Three.js and React Three Fiber with WebGPU support.

/**
 * @fileoverview React Three Fiber component for TSL Fire effect
 *
 * WebGPU-compatible version using Three.js Shading Language (TSL).
 * Provides the same API as the GLSL FireComponent but with TSL backend.
 */
import React from 'react';
import { ReactThreeFiber } from '@react-three/fiber';
import { FireTSL, FireTSLProps as FireTSLMeshProps } from './FireTSL';
import { Texture } from 'three';
declare module '@react-three/fiber' {
    interface ThreeElements {
        fireTSL: ReactThreeFiber.Object3DNode<FireTSL, typeof FireTSL>;
    }
}
/**
 * Props for the Fire TSL React component
 */
export interface FireProps extends Omit<FireTSLMeshProps, '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: FireTSL, 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;
}
export interface FireRef {
    fire: FireTSL | null;
    update: (time?: number) => void;
}
/**
 * React Three Fiber component for volumetric fire effect (TSL/WebGPU version)
 *
 * Creates a procedural fire effect using TSL (Three.js Shading Language)
 * for WebGPU compatibility. Uses Perlin noise instead of simplex noise.
 *
 * Note: This component requires WebGPURenderer or a compatible WebGL fallback.
 *
 * @example
 * ```tsx
 * import { Fire } from '@wolffo/three-fire/tsl/react'
 *
 * <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: React.RefObject<FireRef>;
    fire: FireTSL | null;
    update: (time?: number) => void | undefined;
};
//# sourceMappingURL=FireComponentTSL.d.ts.map