·r3f-fundamentals
</>

r3f-fundamentals

bbeierle12/skill-mcp-claude

React 三光纤核心设置、画布配置、场景层次结构、相机系统、照明、渲染循环和 React 集成模式。在设置新的 R3F 项目、配置 Canvas 组件、管理场景结构或理解声明式 Three.js-in-React 范例时使用。所有其他 R3F 技能所依赖的基础技能。

31安装·2热度·@bbeierle12

安装

$npx skills add https://github.com/bbeierle12/skill-mcp-claude --skill 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。

查看原文

可引用信息

为搜索与 AI 引用准备的稳定字段与命令。

安装命令
npx skills add https://github.com/bbeierle12/skill-mcp-claude --skill r3f-fundamentals
分类
</>开发工具
认证
收录时间
2026-02-01
更新时间
2026-02-18

快速解答

什么是 r3f-fundamentals?

React 三光纤核心设置、画布配置、场景层次结构、相机系统、照明、渲染循环和 React 集成模式。在设置新的 R3F 项目、配置 Canvas 组件、管理场景结构或理解声明式 Three.js-in-React 范例时使用。所有其他 R3F 技能所依赖的基础技能。 来源:bbeierle12/skill-mcp-claude。

如何安装 r3f-fundamentals?

打开你的终端或命令行工具(如 Terminal、iTerm、Windows Terminal 等) 复制并运行以下命令:npx skills add https://github.com/bbeierle12/skill-mcp-claude --skill r3f-fundamentals 安装完成后,技能将自动配置到你的 AI 编程环境中,可以在 Claude Code 或 Cursor 中使用

这个 Skill 的源码在哪?

https://github.com/bbeierle12/skill-mcp-claude