r3f
React Three Fiber v9 + drei v10: escenas 3D declarativas en React. Complementa la skill threejs (vanilla Three.js imperativo).
Triggers
| Frases que activan el skill |
|---|
| “R3F” / “react three fiber” / “three.js en React” |
| “escena 3D en React” / “render 3D con React” / “Canvas de r3f” |
| “useFrame” / “useThree” / “extend()” / “primitive” |
| “drei” / “OrbitControls drei” / “CameraControls” / “PivotControls” |
| “useGLTF” / “cargar modelo GLTF en React” / “Environment drei” |
| “react-three/csg” / “CSG operations” / “boolean geometry” |
| “MeshTransmissionMaterial” / “Instances drei” / “instanciar objetos 3D” |
| “frameloop demand” / “invalidate()” / “performance 3D React” |
Qué hace
Patrones declarativos R3F. Modelo mental: React es dueño del scene graph (monta/desmonta/ reconcilia JSX → objetos Three.js); Three.js es dueño del render loop (useFrame muta refs per-frame). Regla de oro: React para estado y estructura, refs para mutaciones per-frame.
Complementa la skill threejs: aquélla cubre Three.js vanilla imperativo, ésta cubre exclusivamente los patrones declarativos de
@react-three/fiber,@react-three/dreiy@react-three/csg.