React Three Fiber

# React Three Fiber - Real-World Component Examples

A comprehensive collection of production-ready R3F component patterns and examples.

## Table of Contents

1. [GLTF Model Loading](#1-gltf-model-loading)
2. [Interactive Product Viewer](#2-interactive-product-viewer)
3. [Scroll-Based Animations](#3-scroll-based-animations)
4. [Particle System](#4-particle-system)
5. [Text 3D](#5-text-3d)
6. [Post-Processing Effects](#6-post-processing-effects)
7. [Physics Simulation](#7-physics-simulation)
8. [Camera Animations](#8-camera-animations)
9. [LOD (Level of Detail)](#9-lod-level-of-detail)
10. [Performance Monitoring](#10-performance-monitoring)

---

## 1. GLTF Model Loading

### Basic Model Loader

```jsx
import { useGLTF } from '@react-three/drei'
import { Suspense } from 'react'

function Model({ url, ...props }) {
  const { scene } = useGLTF(url)
  return <primitive object={scene} {...props} />
}

// Preload for faster initial load
useGLTF.preload('/models/scene.glb')

export default function Scene() {
  return (
    <Suspense fallback={<Loader />}>
      <Model url="/models/scene.glb" position={[0, 0, 0]} scale={0.5} />
    </Suspense>
  )
}

function Loader() {
  return (
    <mesh>
      <boxGeometry args={[1, 1, 1]} />
      <meshBasicMaterial wireframe color="white" />
    </mesh>
  )
}
```

### Model with Animations

```jsx
import { useGLTF, useAnimations } from '@react-three/drei'
import { useEffect, useRef } from 'react'

function AnimatedModel({ url }) {
  const group = useRef()
  const { scene, animations } = useGLTF(url)
  const { actions, names } = useAnimations(animations, group)

  useEffect(() => {
    // Play first animation
    actions[names[0]]?.play()
  }, [actions, names])

  return <primitive ref={group} object={scene} />
}

useGLTF.preload('/models/animated.glb')
```

### Model with Material Override

```jsx
import { useGLTF } from '@react-three/drei'
import { useEffect } from 'react'
import * as THREE from 'three'

function ModelWithCustomMaterial({ url }) {
  const { scene } = useGLTF(url)

  useEffect(() => {
    const customMaterial = new THREE.MeshStandardMaterial({
      color: '#ff6b6b',
      metalness: 0.8,
      roughness: 0.2,
    })

    scene.traverse((child) => {
      if (child.isMesh) {
        child.material = customMaterial
        child.castShadow = true
        child.receiveShadow = true
      }
    })
  }, [scene])

  return <primitive object={scene} />
}
```

---

## 2. Interactive Product Viewer

```jsx
import { useRef, useState } from 'react'
import { Canvas, useFrame } from '@react-three/fiber'
import { OrbitControls, Environment, useGLTF, Center, Bounds } from '@react-three/drei'
import { useControls } from 'leva'

function Product({ url }) {
  const { scene } = useGLTF(url)
  const meshRef = useRef()
  const [hovered, setHovered] = useState(false)

  // Material controls
  const { metalness, roughness, color } = useControls({
    metalness: { value: 0.9, min: 0, max: 1, step: 0.01 },
    roughness: { value: 0.1, min: 0, max: 1, step: 0.01 },
    color: '#ffffff',
  })

  useFrame((state) => {
    if (hovered) {
      meshRef.current.rotation.y += 0.01
    }
  })

  return (
    <Center>
      <primitive
        ref={meshRef}
        object={scene}
        onPointerOver={() => setHovered(true)}
        onPointerOut={() => setHovered(false)}
        onClick={(e) => {
          e.stopPropagation()
          console.log('Product clicked:', e.object.name)
        }}
      />
    </Center>
  )
}

export default function ProductViewer() {
  return (
    <Canvas camera={{ position: [0, 0, 5], fov: 45 }}>
      <color attach="background" args={['#f0f0f0']} />

      <ambientLight intensity={0.5} />
      <directionalLight position={[5, 5, 5]} intensity={1} />

      <Suspense fallback={null}>
        <Bounds fit clip observe margin={1.2}>
          <Product url="/models/product.glb" />
        </Bounds>
        <Environment preset="studio" />
      </Suspense>

      <OrbitControls