Materials

/**
 * Mirror reflection material with blur and resolution control
 * @param props - Reflector material configuration
 * @returns JSX element for the reflector material
 */
function MeshReflectorMaterial(props: MeshReflectorMaterialProps): JSX.Element;

interface MeshReflectorMaterialProps extends MaterialProps {
  /** Reflection resolution, 256 */
  resolution?: number;
  /** Blur amount [horizontal, vertical], [0, 0] */
  blur?: [number, number] | number;
  /** Mix with original material, 0 */
  mixBlur?: number;
  /** Mirror reflectivity, 0 */
  mirror?: number;
  /** Minimum blur amount, 0 */
  minDepthThreshold?: number;
  /** Maximum blur amount, 1 */
  maxDepthThreshold?: number;
  /** Depth scale, 0 */
  depthScale?: number;
  /** Depth to blur ratio, 0.25 */
  depthToBlurRatioBias?: number;
  /** Distortion map */
  distortion?: number;
  /** Distortion texture */
  distortionMap?: Texture;
  /** Fresnel coefficient, 0 */
  mixContrast?: number;
  /** Reflection roughness, 0 */
  roughness?: number;
  /** Reflection metalness, 0 */
  metalness?: number;
  /** Normal map */
  normalMap?: Texture;
  /** Normal scale, [1, 1] */
  normalScale?: [number, number];
  /** Plane normal, [0, 1, 0] */
  planeNormal?: [number, number, number];
}

import { MeshReflectorMaterial } from '@react-three/drei';

// Basic mirror floor
<mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, -1, 0]}>
  <planeGeometry args={[10, 10]} />
  <MeshReflectorMaterial
    blur={[300, 100]}
    resolution={2048}
    mixBlur={1}
    mixStrength={40}
    roughness={1}
    depthScale={1.2}
    minDepthThreshold={0.4}
    maxDepthThreshold={1.4}
    color="#050505"
    metalness={0.5}
  />
</mesh>

// Water reflection
<mesh>
  <planeGeometry args={[20, 20]} />
  <MeshReflectorMaterial
    resolution={1024}
    blur={[512, 512]}
    mixBlur={0.15}
    mirror={0.5}
    color="#1e4d72"
    roughness={0.6}
    normalMap={waterNormalTexture}
    normalScale={[0.15, 0.15]}
  />
</mesh>

/**
 * Glass transmission material with thickness and roughness control
 * @param props - Transmission material configuration
 * @returns JSX element for the transmission material
 */
function MeshTransmissionMaterial(props: MeshTransmissionMaterialProps): JSX.Element;

interface MeshTransmissionMaterialProps extends MaterialProps {
  /** Material thickness, 0 */
  thickness?: number;
  /** Roughness, 0 */
  roughness?: number;
  /** Transmission, 1 */
  transmission?: number;
  /** Index of refraction, 1.5 */
  ior?: number;
  /** Chromatic aberration, 0.03 */
  chromaticAberration?: number;
  /** Anisotropic blur, 0.1 */
  anisotropicBlur?: number;
  /** Distortion, 0 */
  distortion?: number;
  /** Distortion scale, 1 */
  distortionScale?: number;
  /** Temporal distortion, 0 */
  temporalDistortion?: number;
  /** Buffer resolution, 2048 */
  buffer?: number;
  /** Background color */
  background?: Texture;
  /** Background blur, 0 */
  backside?: boolean;
  /** Sample count, 10 */
  samples?: number;
  /** Resolution, 2048 */
  resolution?: number;
  /** Clearcoat, 1 */
  clearcoat?: number;
  /** Clearcoat roughness, 0 */
  clearcoatRoughness?: number;
  /** Clearcoat normal map */
  clearcoatNormalMap?: Texture;
  /** Clearcoat normal scale, [1, 1] */
  clearcoatNormalScale?: [number, number];
  /** Attenuation color, white */
  attenuationColor?: ReactThreeFiber.Color;
  /** Attenuation distance, Infinity */
  attenuationDistance?: number;
}

import { MeshTransmissionMaterial } from '@react-three/drei';

// Basic glass sphere
<mesh>
  <sphereGeometry />
  <MeshTransmissionMaterial
    thickness={2}
    roughness={0}
    transmission={1}
    ior={1.5}
    chromaticAberration={0.02}
    backside
  />
</mesh>

// Advanced glass material
<mesh>
  <torusGeometry args={[1, 0.4, 16, 100]} />
  <MeshTransmissionMaterial
    thickness={0.2}
    roughness={0.4}
    transmission={1}
    ior={1.2}
    chromaticAberration={0.02}
    anisotropicBlur={0.1}
    distortion={0.0}
    distortionScale={0.3}
    temporalDistortion={0.5}
    clearcoat={1}
    attenuationDistance={0.5}
    attenuationColor="#ffffff"
    color="#c9ffa1"
    bg={backgroundTexture}
  />
</mesh>

/**
 * Vertex distortion material with noise-based deformation
 * @param props - Distort material configuration
 * @returns JSX element for the distortion material
 */
function MeshDistortMaterial(props: MeshDistortMaterialProps): JSX.Element;

interface MeshDistortMaterialProps extends MaterialProps {
  /** Distortion strength, 1 */
  distort?: number;
  /** Animation speed, 1 */
  speed?: number;
  /** Noise frequency, 0.4 */
  factor?: number;
  /** Time offset, 0 */
  time?: number;
  /** Noise radius, 1 */
  radius?: number;
}

import { MeshDistortMaterial } from '@react-three/drei';

// Animated distorted sphere
<mesh>
  <sphereGeometry args={[1, 64, 64]} />
  <MeshDistortMaterial
    color="#ff6090"
    distort={0.3}
    speed={2}
    roughness={0.4}
  />
</mesh>

// Custom distortion
<mesh>
  <planeGeometry args={[4, 4, 32, 32]} />
  <MeshDistortMaterial
    color="#8844aa"
    distort={0.6}
    speed={1.5}
    factor={0.2}
    metalness={0.1}
    roughness={0.75}
  />
</mesh>

/**
 * Wobble deformation material for wave-like animations
 * @param props - Wobble material configuration
 * @returns JSX element for the wobble material
 */
function MeshWobbleMaterial(props: MeshWobbleMaterialProps): JSX.Element;

interface MeshWobbleMaterialProps extends MaterialProps {
  /** Wobble strength, 1 */
  factor?: number;
  /** Animation speed, 1 */
  speed?: number;
  /** Time offset, 0 */
  time?: number;
}

import { MeshWobbleMaterial } from '@react-three/drei';

// Wobbling box
<mesh>
  <boxGeometry args={[2, 2, 2, 32, 32, 32]} />
  <MeshWobbleMaterial
    color="hotpink"
    factor={1}
    speed={2}
  />
</mesh>

/**
 * Refraction material for crystal and glass effects
 * @param props - Refraction material configuration
 * @returns JSX element for the refraction material
 */
function MeshRefractionMaterial(props: MeshRefractionMaterialProps): JSX.Element;

interface MeshRefractionMaterialProps extends MaterialProps {
  /** Environment map */
  envMap: Texture;
  /** Bounces for internal reflections, 3 */
  bounces?: number;
  /** Index of refraction, 2.4 */
  ior?: number;
  /** Fresnel bias, 0 */
  fresnel?: number;
  /** Aberration strength, 0.01 */
  aberrationStrength?: number;
  /** Fast chroma, true */
  fastChroma?: boolean;
}

/**
 * Alpha discard material for cutout effects
 * @param props - Discard material configuration
 * @returns JSX element for the discard material
 */
function MeshDiscardMaterial(props: MeshDiscardMaterialProps): JSX.Element;

interface MeshDiscardMaterialProps extends MaterialProps {
  /** Alpha threshold, 0.1 */
  threshold?: number;
}

/**
 * Point cloud material with size and color control
 * @param props - Point material configuration
 * @returns JSX element for the point material
 */
function PointMaterial(props: PointMaterialProps): JSX.Element;

interface PointMaterialProps extends MaterialProps {
  /** Point size, 1 */
  size?: number;
  /** Size attenuation, true */
  sizeAttenuation?: boolean;
  /** Vertex colors, false */
  vertexColors?: boolean;
  /** Alpha test, 0 */
  alphaTest?: number;
  /** Alpha map */
  alphaMap?: Texture;
}

/**
 * Multi-material for applying different materials to geometry faces
 * @param props - Multi-material configuration
 * @returns JSX element for the multi-material
 */
function MultiMaterial(props: MultiMaterialProps): JSX.Element;

interface MultiMaterialProps extends Omit<ThreeElements['group'], 'ref'> {
  /** Array of materials to apply */
  materials: Material[];
}

/**
 * Utility function for creating custom shader materials
 * @param uniforms - Shader uniforms object
 * @param vertexShader - Vertex shader source
 * @param fragmentShader - Fragment shader source
 * @returns Custom shader material class
 */
function shaderMaterial(
  uniforms: { [key: string]: { value: any } },
  vertexShader: string,
  fragmentShader: string
): typeof Material;

import { shaderMaterial } from '@react-three/drei';
import { extend } from '@react-three/fiber';

// Create custom material
const CustomMaterial = shaderMaterial(
  {
    time: { value: 0 },
    color: { value: new Color('#ff0000') }
  },
  // Vertex shader
  `
    varying vec2 vUv;
    void main() {
      vUv = uv;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  `,
  // Fragment shader
  `
    uniform float time;
    uniform vec3 color;
    varying vec2 vUv;
    void main() {
      float strength = sin(vUv.x * 10.0 + time) * 0.5 + 0.5;
      gl_FragColor = vec4(color * strength, 1.0);
    }
  `
);

// Extend for React Three Fiber
extend({ CustomMaterial });

// Use in component
<mesh>
  <planeGeometry />
  <customMaterial time={clock.elapsedTime} color="#00ff00" />
</mesh>

import { useFrame } from '@react-three/fiber';

function AnimatedMaterial() {
  const materialRef = useRef();
  
  useFrame((state) => {
    if (materialRef.current) {
      materialRef.current.time = state.clock.elapsedTime;
    }
  });
  
  return (
    <mesh>
      <sphereGeometry />
      <MeshDistortMaterial
        ref={materialRef}
        distort={0.3}
        speed={2}
        color="hotpink"
      />
    </mesh>
  );
}

import { Environment, MeshRefractionMaterial } from '@react-three/drei';

function RefractiveObject() {
  const envMap = useEnvironment({ preset: 'city' });
  
  return (
    <>
      <Environment preset="city" />
      <mesh>
        <icosahedronGeometry />
        <MeshRefractionMaterial
          envMap={envMap}
          bounces={3}
          ior={2.4}
          aberrationStrength={0.02}
        />
      </mesh>
    </>
  );
}

// Use useMemo for expensive material creation
const material = useMemo(() => new MeshTransmissionMaterial({
  thickness: 2,
  roughness: 0.4,
  transmission: 1,
  ior: 1.5,
  chromaticAberration: 0.02,
}), []);

// Dispose materials on unmount
useEffect(() => {
  return () => material.dispose();
}, [material]);