threejs-r3f 来自 cesartevisual/threejs-skills，用于构建或修复 React Three Fiber（Fiber）场景、Drei 辅助工具、Suspense 加载、事件以及 React 生命周期集成。其内容以补充用户任务为主，不构成对无关改动或外部操作的授权。
用途与定位 该技能面向在 React 中使用 Three.js 的场景开发与排错，核心活动包括：使用 Drei 提供的辅助组件，处理 Suspense 加载流程，处理事件，以及与 React 生命周期进行集成。
版本与依赖匹配 要求同时检查 React、react-dom、Fiber、Drei 与 Three.js 的版本及 peer 依赖。需要让 reconciler 与 React 匹配，不能假定每个 Fiber 主版本都支持每个 React 主版本。Drei 的辅助 API 应以已安装版本为准进行阅读。
渲染归属与边界 除非确实需要自定义集成，Canvas 应拥有 renderer 与渲染循环。Fiber 钩子应使用在 Canvas 的后代组件中。仅浏览器可用的 canvas 代码需置于框架的客户端边界之后，并保留边界之外的服务端渲染产品内容。
场景状态与变更方式 采用声明式场景归属，并在 useFrame 中使用 ref 进行持续变更。避免用 React setState 处理逐帧运动；state 应留给有意义的 UI 过渡。必要时对开销较大的命令式资源进行记忆化（memoize），并给出明确的释放规则。Hook selectors 可以减少无关订阅，但不会使嵌套的可变 Three.js 值变成响应式。
加载、错误与资源生命周期 在异步内容周围放置合适的 Suspense 与错误边界。Loader 缓存可能共享 geometry、texture 与 material；不应把共享条目当作实例私有来修改或释放。Primitives 与外部提供的资源需要显式的生命周期处理。场景实例应进行克隆，蒙皮模型应使用感知骨骼（skeleton-aware）的克隆。
按需渲染与控制 仅在所有命令式变更与持续阻尼都会触发失效时，对基本静态的场景使用按需渲染。添加重复循环或控制更新前，先检查 Drei 辅助工具的行为。正的 useFrame 优先级会接管渲染，需要弄清楚之后由谁渲染。
测试要点 需要测试 Strict Mode 挂载、路由切换、快速资源切换、加载失败、在重叠网格间的指针传播，以及空闲的按需渲染场景。同时应保留等价的 HTML 操作入口。
API 参考 API 的准确签名与特定修订版本的行为应以官方文档为准。若无法访问文档，应检查已安装的类型或源码，并说明仍然存在的不确定之处。