React Three Fiber v9 + drei v10

Escenas 3D declarativas en React. Complementa la skill threejs (vanilla Three.js imperativo).

Modelo Mental

React y Three.js manejan dominios distintos que se comunican via refs:

• React es dueño del scene graph: monta, desmonta, reconcilia componentes JSX → objetos Three.js
• Three.js es dueño del render loop: useFrame corre cada frame, muta refs directamente
• Regla de oro: React para estado y estructura, refs para mutaciones per-frame

React tree (JSX, state, props)
      ↕ refs / props
useFrame callbacks (per-frame mutations)
      ↕ escribe en Three.js objects
WebGLRenderer (render en priority 0)