r3f-fundamentals

SKILL.md

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() |

Configuration du noyau React Three Fiber, configuration Canvas, hiérarchie des scènes, systèmes de caméras, éclairage, boucle de rendu et modèles d'intégration React. À utiliser lors de la configuration d'un nouveau projet R3F, de la configuration du composant Canvas, de la gestion de la structure de la scène ou de la compréhension du paradigme déclaratif Three.js-in-React. La compétence fondamentale dont dépendent toutes les autres compétences R3F. Source : bbeierle12/skill-mcp-claude.

Voir l'original