Agent Skills
› EnzeD/r3f-skills
EnzeD/r3f-skills
GitHubReact Three Fiber 动画技能，涵盖 useFrame、useAnimations、弹簧物理及关键帧动画，用于实现对象动画、GLTF 播放和程序化运动。
Install All Skills
npx skills add EnzeD/r3f-skills --all -g -y
Skills in Collection (11)
React Three Fiber 动画技能，涵盖 useFrame、useAnimations、弹簧物理及关键帧动画，用于实现对象动画、GLTF 播放和程序化运动。
需要为 3D 场景中的对象添加旋转或位置动画
播放 GLTF/GLB 模型内置动画
实现基于物理的弹簧运动效果
创建程序化生成的连续运动逻辑
npx skills add EnzeD/r3f-skills --skill r3f-animation -g -y
提供 React Three Fiber (R3F) 核心开发指南，涵盖 Canvas 配置、useFrame/useThree 钩子及事件处理。用于在 React 中搭建 WebGL 场景、创建 3D 组件及管理渲染循环。
需要初始化 R3F 场景
实现 3D 对象动画或帧更新逻辑
配置 WebGL 渲染器参数
npx skills add EnzeD/r3f-skills --skill r3f-fundamentals -g -y
提供 React Three Fiber 中各类内置几何体（如 Box、Sphere、Torus 等）的 JSX 用法及参数配置，支持高级形状与路径生成，辅助创建 3D 模型和网格。
需要创建 3D 几何体
查询 Three.js 几何体参数
在 R3F 中构建场景对象
npx skills add EnzeD/r3f-skills --skill r3f-geometry -g -y
提供 React Three Fiber 交互功能，包括指针事件、相机控制和手势处理。用于实现点击检测、悬停效果及创建交互式 3D 体验，覆盖前后端渲染中的用户输入逻辑。
实现 3D 模型点击或悬停交互
添加 OrbitControls 等相机控制
处理 WebGL/Canvas 中的鼠标和触摸事件
npx skills add EnzeD/r3f-skills --skill r3f-interaction -g -y
提供 React Three Fiber 中各类光源（环境、方向、点光等）的配置方法，涵盖阴影设置、光照类型对比及性能优化指南，用于场景照明搭建。
配置 3D 场景灯光
设置物体阴影
优化渲染性能
npx skills add EnzeD/r3f-skills --skill r3f-lighting -g -y
提供 React Three Fiber 中加载 3D 模型、纹理及 HDR 环境的最佳实践，涵盖 useGLTF 用法、Suspense 状态管理、预加载及 Draco 压缩处理。
需要在 React Three Fiber 场景中加载 GLTF/GLB 3D 模型
需要管理 3D 资源加载状态或使用 Suspense
需要对 3D 模型进行预加载或配置 Draco 解码器
npx skills add EnzeD/r3f-skills --skill r3f-loaders -g -y
提供 React Three Fiber 中各类材质（如 PBR、Shader）的配置方法与示例，涵盖纹理加载、物理属性及高级渲染效果，用于 3D 场景的视觉表现与着色开发。
需要为 Three.js 网格设置材质
实现 PBR 物理渲染效果
创建自定义 Shader 或特殊视觉效果
npx skills add EnzeD/r3f-skills --skill r3f-materials -g -y
为React Three Fiber集成Rapier物理引擎，支持刚体、碰撞器、力和关节。用于添加物理模拟、碰撞检测及创建交互式3D体验。
需要在R3F场景中实现物体运动与碰撞
构建基于物理的交互游戏或仿真
配置重力、摩擦力和反弹效果
npx skills add EnzeD/r3f-skills --skill r3f-physics -g -y
用于 React Three Fiber 添加后处理效果，如泛光、景深和屏幕特效。支持自定义着色器、颜色分级及选择性发光，适用于需要视觉增强和渲染优化的前端 3D 场景开发。
为 3D 场景添加 Bloom 或 Vignette 等后处理效果
实现自定义屏幕空间着色器或颜色分级
配置 EffectComposer 进行高级渲染优化
npx skills add EnzeD/r3f-skills --skill r3f-postprocessing -g -y
提供 React Three Fiber 中 GLSL 着色器、shaderMaterial 及 uniforms 的使用指南，帮助用户创建自定义视觉效果、修改顶点或编写片段着色器。
创建自定义视觉特效
编写 GLSL 着色器代码
在 R3F 中使用 shaderMaterial
npx skills add EnzeD/r3f-skills --skill r3f-shaders -g -y
React Three Fiber纹理加载技能，涵盖useTexture和useLoader的使用，支持单/多纹理、PBR材质配置及预加载。
需要加载3D模型纹理
配置PBR材质贴图
优化WebGL纹理性能
npx skills add EnzeD/r3f-skills --skill r3f-textures -g -y
