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 Three Fiber コアのセットアップ、Canvas 構成、シーン階層、カメラ システム、ライティング、レンダー ループ、および React 統合パターン。新しい R3F プロジェクトのセットアップ、Canvas コンポーネントの構成、シーン構造の管理、または宣言型 Three.js-in-React パラダイムを理解するときに使用します。他のすべての R3F スキルが依存する基本的なスキル。 ソース: bbeierle12/skill-mcp-claude。

原文を見る