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

Configuración central de React Three Fiber, configuración de Canvas, jerarquía de escenas, sistemas de cámaras, iluminación, bucle de renderizado y patrones de integración de React. Úselo al configurar un nuevo proyecto R3F, configurar el componente Canvas, administrar la estructura de la escena o comprender el paradigma declarativo Three.js-in-React. La habilidad fundamental de la que dependen todas las demás habilidades de R3F. Fuente: bbeierle12/skill-mcp-claude.

Ver original