React Three Fiber: De Imperativo a Declarativo en 3D

Para entender qué es React Three Fiber (R3F) y qué significa integrar 3D de forma "declarativa", primero debemos contrastarlo con la forma tradicional (imperativa) de usar Three.js.

Imperativo vs Declarativo

1. El Enfoque Imperativo (Vanilla Three.js)

En la programación imperativa, tú le dices al ordenador CÓMO hacer cada paso exacto. Si quisieras crear un simple cubo rojo en Three.js puro, tendrías que escribir un código manual paso a paso: instanciar la escena, la cámara, el motor de renderizado, la geometría, el material, crear el mesh, añadirlo a la escena y finalmente crear un bucle de animación.

El código resultante tiende a ser muy extenso y difícil de integrar de manera limpia en flujos de datos modernos (como el estado de React).

2. El Enfoque Declarativo (React Three Fiber)

Al usar React Three Fiber pasamos a un enfoque declarativo. En lugar de dar instrucciones matemáticas paso a paso, construyes tu escena 3D usando componentes, de la misma forma que construyes un botón o un formulario en HTML/JSX. Tú defines el QUÉ quieres, y la librería se encarga del cómo.

import { Canvas } from '@react-three/fiber'
import { Suspense } from 'react'
 
export function Escena3D({ colorSeleccionado }) {
  return (
    <Canvas>
      <ambientLight intensity={1.2} />
      <directionalLight position={[10, 10, 5]} intensity={2} />
      
      <Suspense fallback={null}>
        {/* Los componentes 3D responden al estado de React de forma natural */}
        <ModelFactory url="/models/t-shirt.obj" color={colorSeleccionado} />
      </Suspense>
    </Canvas>
  )
}

Ventajas del Enfoque Declarativo en 3D

1. Reutilización de Componentes: Puedes encapsular luces, modelos y comportamientos en componentes de React normales y reutilizarlos en cualquier parte de tu aplicación.
2. Reactividad Integrada: Las propiedades 3D (como la posición, la escala, o el color de un material) pueden vincularse directamente al estado de React (useState, Context, Zustand, etc.). Cuando el estado cambia, el modelo se actualiza automáticamente.
3. Gestión de Ciclos de Vida: R3F maneja la creación y destrucción de objetos en memoria de forma automática cuando los componentes se montan o desmontan, evitando memory leaks comunes en Vanilla Three.js.