r3f-fundamentals

Declarative Three.js via React components. R3F maps Three.js objects to JSX elements with automatic disposal, reactive updates, and React lifecycle integration.

| new THREE.Mesh() | | | mesh.position.set(1, 2, 3) | | | scene.add(mesh) | JSX nesting handles hierarchy | | mesh.geometry.dispose() | Automatic on unmount |

| always | Continuous animation (games, simulations) | | demand | Static scenes, only re-render on state change | | never | Manual control via invalidate() |

Configurazione del core React Three Fiber, configurazione Canvas, gerarchia delle scene, sistemi di telecamere, illuminazione, loop di rendering e modelli di integrazione React. Da utilizzare durante l'impostazione di un nuovo progetto R3F, la configurazione del componente Canvas, la gestione della struttura della scena o la comprensione del paradigma dichiarativo Three.js-in-React. L'abilità fondamentale da cui dipendono tutte le altre abilità R3F. Fonte: bbeierle12/skill-mcp-claude.