### Installing React Smoke with Yarn

Source: https://github.com/isoteriksoftware/react-smoke/blob/main/README.md

This command installs the `react-smoke` library and its peer dependencies, `three` and `@react-three/fiber`, using the Yarn package manager. It ensures all necessary packages are available for integrating realistic smoke effects into a React application.

```bash
yarn add react-smoke three @react-three/fiber
```

--------------------------------

### Installing React Smoke with npm

Source: https://github.com/isoteriksoftware/react-smoke/blob/main/README.md

This command installs the `react-smoke` library along with its peer dependencies, `three` (Three.js) and `@react-three/fiber` (React Three Fiber), using the npm package manager. These dependencies are essential for `react-smoke` to function correctly in a React project.

```bash
npm install react-smoke three @react-three/fiber
```

--------------------------------

### Basic Usage of SmokeScene Component in React

Source: https://github.com/isoteriksoftware/react-smoke/blob/main/README.md

This example demonstrates the basic integration of the `SmokeScene` component from `react-smoke` into a React application. `SmokeScene` acts as a wrapper around `@react-three/fiber`'s `Canvas` component, providing a simple way to render smoke effects with customizable properties like color and density, setting up a full-screen 3D scene.

```tsx
// App.tsx
import { SmokeScene } from "react-smoke";
import { useMemo } from "react";
import * as THREE from "three";

export default function App() {
  const smokeColor = useMemo(() => new THREE.Color("red"), []);
  
  return (
    <div
      style={{
        width: "100vw",
        height: "100vh",
        position: "fixed",
        top: 0,
        left: 0,
      }}
    >
      <SmokeScene
        smoke={{
          color: smokeColor,
          density: 50,
          enableRotation: true,
        }} 
      />
    </div>
  );
}
```

--------------------------------

### Advanced Usage of Smoke Component with Custom Canvas in React

Source: https://github.com/isoteriksoftware/react-smoke/blob/main/README.md

This example illustrates advanced usage of the `Smoke` component within an existing `@react-three/fiber` `Canvas`, offering more granular control over the 3D scene. It allows users to define custom camera settings and background color, and directly integrate the `Smoke` component for tailored effects. The `Suspense` component is used to handle asynchronous loading of 3D assets.

```tsx
// App.tsx
import { Smoke } from "react-smoke";
import { Canvas } from "@react-three/fiber";
import { Suspense, useMemo } from "react";
import * as THREE from "three";

export default function App() {
  const bgColor = useMemo(() => new THREE.Color("black"), []);
  const smokeColor = useMemo(() => new THREE.Color("white"), []);

  return (
    <div
      style={{
        width: "100vw",
        height: "100vh",
        position: "fixed",
        top: 0,
        left: 0,
      }}
    >
      <Canvas
        camera={{ fov: 60, position: [0, 0, 500], far: 6000 }}
        scene={{
          background: bgColor,
        }}
      >
        <Suspense fallback={null}>
          <Smoke
            color={smokeColor}
            density={50}
            enableRotation={true}
            rotation={[0, 0, 0.2]}
          />
        </Suspense>
      </Canvas>
    </div>
  );
}
```

--------------------------------

### Default Particle Material Generator in TSX

Source: https://github.com/isoteriksoftware/react-smoke/blob/main/README.md

Provides a default implementation of `ParticleMaterialGenerator` that creates and reuses `THREE.MeshLambertMaterial` instances. Materials are generated once for each texture, using the provided opacity and color, and then reused based on the particle index. This optimizes performance by avoiding redundant material creation.

```TSX
export const getDefaultParticleMaterialGenerator = (): ParticleMaterialGenerator => {
    let materials: THREE.MeshLambertMaterial[];

    return (index, textures, { opacity, color }) => {
      if (!materials) {
        materials = [];

        for (let i = 0; i < textures.length; i++) {
          materials.push(
            new THREE.MeshLambertMaterial({
              map: textures[i],
              transparent: true,
              opacity: opacity,
              depthWrite: false,
              color: color,
              polygonOffset: true,
              polygonOffsetFactor: 1,
              polygonOffsetUnits: 1,
            }),
          );
        }
      }

      return materials[index % materials.length];
    };
};
```

--------------------------------

### Defining Smoke Component Props in TypeScript

Source: https://github.com/isoteriksoftware/react-smoke/blob/main/README.md

This snippet defines the `SmokeProps` interface, which specifies the configurable properties for a React `Smoke` component. It includes properties for particle behavior (e.g., `turbulenceStrength`, `maxVelocity`, `windStrength`), appearance (e.g., `opacity`, `color`, `size`, `textures`), and rendering options (e.g., `castShadow`, `receiveShadow`). Each property has a JSDoc comment explaining its purpose and default value.

```tsx
/**
 * A three-axis value.
 */
export type ThreeAxisValue = [x: number, y: number, z: number];

export type SmokeProps = {
  /**
   * Whether to enable frustum culling. When enabled, particles outside the camera's view will not be updated.
   * @default true
   */
  enableFrustumCulling?: boolean;

  /**
   * The turbulence strength.
   * This value determines the strength of the turbulence applied to the particles.
   * @default [0.01, 0.01, 0.01]
   */
  turbulenceStrength?: ThreeAxisValue;

  /**
   * Whether to enable turbulence.
   * @default false
   */
  enableTurbulence?: boolean;

  /**
   * The maximum velocity.
   * This value determines the maximum velocity of the particles on each axis.
   * @default [30, 30, 0]
   */
  maxVelocity?: ThreeAxisValue;

  /**
   * The velocity reset factor.
   * This factor is used to reset the velocity of particles that exceed the bounds of the smoke effect particles.
   * @default 10
   */
  velocityResetFactor?: number;

  /**
   * The minimum bounds.
   * This value determines the minimum bounds of the particles.
   * @default [-800, -800, -800]
   */
  minBounds?: ThreeAxisValue;

  /**
   * The maximum bounds.
   * This value determines the maximum bounds of the particles.
   * @default [800, 800, 800]
   */
  maxBounds?: ThreeAxisValue;

  /**
   * The opacity of the particles.
   * @default 0.5
   */
  opacity?: number;

  /**
   * The color of the particles.
   * @default THREE.Color(0xffffff)
   */
  color?: Color;

  /**
   * The density of the particles.
   * This value determines the number of particles to generate.
   * @default 50
   */
  density?: number;

  /**
   * The size of the particles.
   * This value determines the size of each particle.
   * @default [1000, 1000, 1000]
   */
  size?: ThreeAxisValue;

  /**
   * Whether to cast shadows.
   * @default false
   */
  castShadow?: boolean;

  /**
   * Whether to receive shadows.
   * @default false
   */
  receiveShadow?: boolean;

  /**
   * The strength of the wind.
   * This value determines the strength of the wind applied to the particles.
   * @default [0.01, 0.01, 0.01]
   */
  windStrength?: ThreeAxisValue;

  /**
   * The direction of the wind.
   * This value determines the direction of the wind applied to the particles.
   * @default [1, 0, 0]
   */
  windDirection?: ThreeAxisValue;

  /**
   * Whether to enable wind.
   * @default false
   */
  enableWind?: boolean;

  /**
   * Whether to enable rotation.
   * @default false
   */
  enableRotation?: boolean;

  /**
   * The rotation of the particles.
   * This value determines the rotation of the particles on each axis.
   * @default [0, 0, 0.1]
   */
  rotation?: ThreeAxisValue;

  /**
   * The paths of the textures to use for the particles.
   * @default [defaultSmokeImage]
   */
  textures?: [string, ...rest: string[]];

  /**
   * The particle geometry generator function.
   * @default getDefaultParticleGeometryGenerator()
   */
  particleGeometry?: ParticleGeometryGenerator;

  /**
   * The particle material generator function.
   * @default getDefaultParticleMaterialGenerator()
   */
  particleMaterial?: ParticleMaterialGenerator;
};
```

--------------------------------

### Multi-Color Particle Material Generator in TSX

Source: https://github.com/isoteriksoftware/react-smoke/blob/main/README.md

Implements a particle material generator that supports multiple colors, enhancing visual variety. It generates materials based on an array of colors and a `sizeDeterminant` (colors, textures, or density), cycling through textures and colors to create unique `THREE.MeshLambertMaterial` instances. This allows for more complex and visually appealing smoke effects.

```TSX
export const getMultiColorParticleMaterialGenerator = (
    colors: [THREE.Color, THREE.Color, ...rest: THREE.Color[]],
    sizeDeterminant: "colors" | "textures" | "density" = "colors",
  ): ParticleMaterialGenerator => {
    let materials: THREE.MeshLambertMaterial[];

    return (index, textures, { opacity, density }) => {
      if (!materials) {
        materials = [];

        const commonProps = {
          transparent: true,
          opacity: opacity,
          depthWrite: false,
          polygonOffset: true,
          polygonOffsetFactor: 1,
          polygonOffsetUnits: 1,
        };

        if (sizeDeterminant === "textures") {
          for (let i = 0; i < textures.length; i++) {
            materials.push(
              new THREE.MeshLambertMaterial({
                map: textures[i],
                color: colors[i % colors.length],
                ...commonProps,
              }),
            );
          }
        } else if (sizeDeterminant === "colors") {
          for (let i = 0; i < colors.length; i++) {
            materials.push(
              new THREE.MeshLambertMaterial({
                map: textures[i % textures.length],
                color: colors[i],
                ...commonProps,
              }),
            );
          }
        } else {
          for (let i = 0; i < density; i++) {
            materials.push(
              new THREE.MeshLambertMaterial({
                map: textures[i % textures.length],
                color: colors[i % colors.length],
                ...commonProps,
              }),
            );
          }
        }
      }

      return materials[index % materials.length];
    };
  };
```

--------------------------------

### Default Particle Geometry Generator Implementation (TypeScript)

Source: https://github.com/isoteriksoftware/react-smoke/blob/main/README.md

This function provides a default implementation for `ParticleGeometryGenerator`. It generates and reuses a single `THREE.PlaneGeometry` for all particles, ensuring efficiency. The geometry's dimensions are determined by the `size` property from the smoke configuration.

```tsx
/**
 * Returns a default particle geometry generator function.
 * This generator preserves and reuses a single geometry for all particles.
 * @returns A particle geometry generator function.
 */
export const getDefaultParticleGeometryGenerator = (): ParticleGeometryGenerator => {
    let geometry: THREE.PlaneGeometry;

    return (_, { size }) => {
      if (!geometry) {
        geometry = new THREE.PlaneGeometry(size[0], size[1]);
      }

      return geometry;
    };
  };
```

--------------------------------

### Defining SmokeSceneProps Type - TypeScript

Source: https://github.com/isoteriksoftware/react-smoke/blob/main/README.md

This TypeScript type definition, `SmokeSceneProps`, extends `CanvasProps` (excluding children) and adds specific properties for configuring a smoke scene. It allows customization of smoke effects via `smoke` properties, provides a `suspenseFallback` for loading states, and offers control over default lights, ambient light, and directional light settings.

```tsx
/**
 * The smoke scene properties. Supports all properties from the Canvas component.
 */
export type SmokeSceneProps = Omit<CanvasProps, "children"> &
  PropsWithChildren<{
    /**
     * The smoke properties.
     * This will be used to render the smoke component.
     */
    smoke?: SmokeProps;

    /**
     * The fallback component to display while the smoke component is loading.
     */
    suspenseFallback?: ReactNode;

    /**
     * Whether to disable the default lights.
     * @default false
     */
    disableDefaultLights?: boolean;

    /**
     * The ambient light properties.
     */
    ambientLightProps?: AmbientLightProps;

    /**
     * The directional light properties.
     */
    directionalLightProps?: DirectionalLightProps;
  }>;
```

--------------------------------

### Defining Particle Geometry Generator Type (TypeScript)

Source: https://github.com/isoteriksoftware/react-smoke/blob/main/README.md

This type definition outlines the signature for a `ParticleGeometryGenerator` function. It takes the particle's index and smoke properties (specifically size and density) as input, returning a `BufferGeometry` to allow for custom particle shapes in smoke effects.

```tsx
/**
 * A particle geometry generator function.
 * @param index The index of the particle.
 * @param props The smoke properties.
 *
 * @returns A buffer geometry.
 */
export type ParticleGeometryGenerator = (
  index: number,
  props: Required<Pick<SmokeProps, "size" | "density">>,
) => BufferGeometry;
```

--------------------------------

### Defining Particle Material Generator Type in TSX

Source: https://github.com/isoteriksoftware/react-smoke/blob/main/README.md

Defines the `ParticleMaterialGenerator` type, a function signature for generating particle materials. It takes the particle index, an array of textures, and smoke properties (opacity, density, color) as input, returning a Three.js `Material` object. This type allows for flexible customization of particle appearance.

```TSX
export type ParticleMaterialGenerator = (
  index: number,
  textures: Texture[],
  props: Required<Pick<SmokeProps, "opacity" | "density" | "color">>,
) => Material;
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.