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

React 三光纖核心設置、畫布配置、場景層次結構、相機系統、照明、渲染循環和 React 集成模式。在設置新的 R3F 項目、配置 Canvas 組件、管理場景結構或理解聲明式 Three.js-in-React 範例時使用。所有其他 R3F 技能所依賴的基礎技能。 來源：bbeierle12/skill-mcp-claude。

查看原文