关于 threejs-r3f
为 React Three Fiber 场景开发与维护提供指导，强调版本适配、渲染和资源生命周期管理，以及交互场景测试。
主要功能
- 01检查 React、Fiber、Drei 和 Three.js 版本兼容性
- 02正确使用 Canvas 与帧钩子
- 03管理共享及外部资源生命周期
- 04处理异步内容与渲染模式
- 05测试路由、加载失败和指针交互
适用场景
- 01审查现有 R3F 架构
- 02实现逐帧场景运动
- 03安全加载和克隆 3D 资源
- 04测试按需渲染场景
安装
复制下面的命令，在终端中运行。
npx skills add https:/安装后在 Claude Code 中输入/threejs-r3f确认已加载。
详细介绍
React Three Fiber 和 Drei
使用项目中已安装的版本和现有架构。这些说明用于补充用户的任务；不授权进行无关更改或外部操作。
一并检查 React、react-dom、Fiber、Drei 和 Three.js 的版本及对等依赖。让协调器与 React 匹配；不要假设每个 Fiber 主版本都支持每个 React 主版本。查阅已安装的 Drei 版本中的辅助 API。
除非有意采用自定义集成，否则应由 Canvas 管理渲染器和循环。在 Canvas 后代组件中使用 Fiber 钩子。将仅限浏览器的 canvas 代码放在框架的客户端边界内；在边界外保留服务端渲染的产品内容。
使用声明式场景管理，并通过 refs 在 useFrame 中进行持续变更。避免使用 React setState 控制逐帧运动；仅在有意义的 UI 状态转换时使用 state。必要时缓存开销较大的命令式资源，并明确释放规则。钩子选择器可以减少无关订阅，但不会让嵌套的可变 Three.js 值变成响应式。
为异步内容设置适当的 Suspense 和错误边界。加载器缓存可能会共享几何体、纹理和材质；不要像处理实例自有资源那样修改或释放共享条目。原始对象和外部提供的资源需要明确的生命周期管理。克隆场景实例；对于蒙皮模型，使用支持骨骼的克隆方式。
仅当所有命令式变更和持续阻尼都会触发失效时，才对大部分静态场景使用按需渲染。添加重复的循环或控制器更新前，先检查 Drei 辅助工具的行为。正的 useFrame 优先级会接管渲染；需考虑之后由谁执行渲染。
测试 Strict Mode 挂载、路由切换、快速切换资源、加载失败、重叠网格间的指针事件传播，以及处于空闲状态的按需渲染场景。确保仍提供功能等效的 HTML 操作。
API 参考
如需确认确切签名和特定版本的行为，请查阅官方文档。如果无法访问文档，请检查已安装的类型定义和源码，并说明任何尚存的不确定性。