用途:在用 React 构建 3D 场景时使用 React Three Fiber(R3F),以声明式 JSX 方式组织 Three.js 场景图,避免把命令式 Three.js 代码与 R3F 声明式树混用导致的不同步问题。
主要能力:提供 Canvas 组件属性速查(gl、camera、scene、shadows、raycaster、frameloop、resize、orthographic、dpr、onCreated、fallback 等);frameloop 的 always/demand/never 三种模式;JSX 到 Three.js 的映射规则(小写标签对应类、args 为构造参数、attach 绑定父级属性、点号/短横线路径、.set() 简写、标量简写);Hooks 包括 useFrame、useThree、useLoader、useGraph,以及 useLoader.preload;primitive 与 extend() 注册自定义类;指针事件系统与事件对象属性;性能模式(自动 dispose、dispose={null}、静态场景用 demand + invalidate、createPortal、useMemo 管理命令式几何与材质)。
使用方式:按照默认声明式写法组织场景;需要单属性时使用选择器,例如 useThree((s) => s.camera);动画使用 useFrame 的 delta;加载资源用 useLoader 并包在 <Suspense> 中;扩展自定义类用 extend({ OrbitControls }),随后可用 <orbitControls args={[camera, domElement]} />。
限制与注意:不要混用 scene.add() 与 R3F 声明式树;不要在 useFrame 中创建对象;同一 Three.js 对象不能多次加入场景(只能有一个父级);priority 大于 0 时 R3F 关闭自动渲染,最高优先级订阅者必须手动调用 render;primitive 不自动销毁,需自行管理生命周期。参考资料见 references/methods.md、references/examples.md、references/anti-patterns.md,官方文档为 https://r3f.docs.pmnd.rs/。