[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6EG08HT64QGE58JJESRFJCZ":3,"skill-same:01M6EG08HT64QGE58JJESRFJCZ":71},{"skillNo":4,"name":5,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":22,"publishedAt":26,"linkOnly":27,"markdownContent":28,"markdownBody":28,"frontMatter":29,"refName":30,"commitSha":31,"skillDirectory":32,"forksCount":33,"repositoryHtmlUrl":34,"repositoryHomepageUrl":35,"ownerHtmlUrl":36,"ownerBlogUrl":6,"ownerDescription":37,"updatedAt":38,"install":39,"resources":52},"01M6EG08HT64QGE58JJESRFJCZ","react-three-fiber",null,"ComeOnOliver\u002Fskillshub","ComeOnOliver","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F43215937?v=4","01M6E5JNFECJAAVFE0W7SMWWD2","Haoran Shu","01M6E5JNNDQS7AJZDYFQ8TPZCK",67,"MIT","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002FTerminalSkills\u002Fskills\u002Freact-three-fiber\u002FSKILL.md",[17],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",[23,24,25],"react","three","react three fiber","2026-11-10 10:12:30",false,"# React Three Fiber — Declarative Three.js for React\n\nYou are an expert in React Three Fiber (R3F), the React renderer for Three.js that lets developers build 3D scenes using JSX components. You help teams create interactive 3D websites, product configurators, data visualizations, games, and immersive experiences — using React patterns (hooks, state, props, suspense) instead of imperative Three.js code, with full access to the Three.js ecosystem.\n\n## Core Capabilities\n\n### Canvas and Scene Setup\n\n```tsx\nimport { Canvas } from \"@react-three\u002Ffiber\";\n\nfunction App() {\n  return (\n    \u003CCanvas\n      camera={{ position: [0, 2, 5], fov: 50 }}\n      dpr={[1, 2]}                        \u002F\u002F Adaptive pixel ratio\n      gl={{ antialias: true, alpha: true }}\n      shadows                             \u002F\u002F Enable shadow maps\n    >\n      \u003CambientLight intensity={0.4} \u002F>\n      \u003CdirectionalLight position={[5, 5, 5]} castShadow \u002F>\n      \u003Cmesh position={[0, 1, 0]} castShadow>\n        \u003CboxGeometry args={[1, 1, 1]} \u002F>\n        \u003CmeshStandardMaterial color=\"orange\" \u002F>\n      \u003C\u002Fmesh>\n      \u003Cmesh rotation={[-Math.PI \u002F 2, 0, 0]} receiveShadow>\n        \u003CplaneGeometry args={[10, 10]} \u002F>\n        \u003CmeshStandardMaterial color=\"#444\" \u002F>\n      \u003C\u002Fmesh>\n    \u003C\u002FCanvas>\n  );\n}\n```\n\n### Hooks\n\n```tsx\nimport { useFrame, useThree, useLoader } from \"@react-three\u002Ffiber\";\nimport { useRef } from \"react\";\nimport * as THREE from \"three\";\n\nfunction SpinningBox() {\n  const meshRef = useRef\u003CTHREE.Mesh>(null);\n  const { viewport, camera } = useThree();   \u002F\u002F Access Three.js internals\n\n  \u002F\u002F Runs every frame (60fps game loop)\n  useFrame((state, delta) => {\n    if (meshRef.current) {\n      meshRef.current.rotation.y += delta;    \u002F\u002F Frame-rate independent\n      \u002F\u002F Hover effect: follow mouse\n      meshRef.current.position.x = THREE.MathUtils.lerp(\n        meshRef.current.position.x,\n        (state.pointer.x * viewport.width) \u002F 2,\n        0.1,\n      );\n    }\n  });\n\n  return (\n    \u003Cmesh ref={meshRef}>\n      \u003CboxGeometry \u002F>\n      \u003CmeshStandardMaterial color=\"hotpink\" \u002F>\n    \u003C\u002Fmesh>\n  );\n}\n```\n\n### Loading 3D Models\n\n```tsx\nimport { useGLTF, useAnimations } from \"@react-three\u002Fdrei\";\nimport { useEffect } from \"react\";\n\nfunction Character({ animation = \"idle\" }) {\n  const { scene, animations } = useGLTF(\"\u002Fmodels\u002Fcharacter.glb\");\n  const { actions } = useAnimations(animations, scene);\n\n  useEffect(() => {\n    actions[animation]?.reset().fadeIn(0.3).play();\n    return () => { actions[animation]?.fadeOut(0.3); };\n  }, [animation, actions]);\n\n  return \u003Cprimitive object={scene} scale={1.5} \u002F>;\n}\n\nuseGLTF.preload(\"\u002Fmodels\u002Fcharacter.glb\");\n```\n\n### Events and Interaction\n\n```tsx\nfunction InteractiveBox() {\n  const [hovered, setHovered] = useState(false);\n  const [clicked, setClicked] = useState(false);\n\n  return (\n    \u003Cmesh\n      scale={clicked ? 1.5 : 1}\n      onClick={() => setClicked(!clicked)}\n      onPointerOver={() => setHovered(true)}\n      onPointerOut={() => setHovered(false)}\n    >\n      \u003CboxGeometry \u002F>\n      \u003CmeshStandardMaterial color={hovered ? \"hotpink\" : \"orange\"} \u002F>\n    \u003C\u002Fmesh>\n  );\n}\n\u002F\u002F R3F raycasts pointer events automatically — same API as DOM events\n```\n\n## Installation\n\n```bash\nnpm install three @react-three\u002Ffiber\nnpm install @react-three\u002Fdrei           # Essential helpers\nnpm install @react-three\u002Fpostprocessing # Visual effects\n```\n\n## Best Practices\n\n1. **Everything is a component** — Meshes, lights, cameras, groups are all JSX; compose scenes like React UIs\n2. **useFrame for animation** — Never use `requestAnimationFrame`; `useFrame` integrates with R3F's render loop\n3. **Drei for shortcuts** — Use `@react-three\u002Fdrei` for OrbitControls, Environment, Text, Html, loaders; saves weeks of work\n4. **Suspense for loading** — Wrap `\u003CCanvas>` children in `\u003CSuspense fallback={...}>` for loading states\n5. **GLTF for models** — Use `.glb` format; compress with Draco (`npx gltfjsx model.glb --draco`); preload with `useGLTF.preload`\n6. **Adaptive performance** — Use `\u003CAdaptiveDpr>` and `\u003CPerformanceMonitor>` from Drei; degrade quality on slow devices\n7. **Pointer events** — R3F raycasts automatically; `onClick`, `onPointerOver` work like DOM events on any mesh\n8. **Instances for performance** — Use `\u003CInstances>` or `\u003CInstancedMesh>` for 100+ identical objects (trees, particles, stars)\n",{},"main","def8531e65114c0fca8fb8551c1871ee0eed705c","skills\u002FTerminalSkills\u002Fskills\u002Freact-three-fiber",24,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub","https:\u002F\u002Fskillshub.wtf","https:\u002F\u002Fgithub.com\u002FComeOnOliver","AI & Blockchain Engineer\r\n","2026-06-24 22:07:19",{"source":7,"skillName":5,"commands":40,"prompt":50,"zipAvailable":51},[41,44,47],{"tool":42,"command":43},"npx","npx skills add ComeOnOliver\u002Fskillshub --skill react-three-fiber",{"tool":45,"command":46},"bunx","bunx skills add ComeOnOliver\u002Fskillshub --skill react-three-fiber",{"tool":48,"command":49},"pnpm","pnpm dlx skills add ComeOnOliver\u002Fskillshub --skill react-three-fiber","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002FTerminalSkills\u002Fskills\u002Freact-three-fiber\u002FSKILL.md",true,[53,59,63,67],{"path":54,"resourceType":55,"resourceTypeDesc":56,"sizeBytes":57,"sourceHtmlUrl":58},"core-animations.md","REFERENCE","参考文档",8345,"https:\u002F\u002Fgithub.com\u002Fvitalikpestov\u002FSkills-Catalog\u002Fblob\u002Fmain\u002F_Mobile-Dev\u002Ffrom-article-18-ui-ux\u002Fclaude-code-apple-skills\u002Fskills\u002Fdesign\u002Fanimation-patterns\u002Fcore-animations.md",{"path":60,"resourceType":55,"resourceTypeDesc":56,"sizeBytes":61,"sourceHtmlUrl":62},"phase-keyframe-animators.md",10830,"https:\u002F\u002Fgithub.com\u002Fvitalikpestov\u002FSkills-Catalog\u002Fblob\u002Fmain\u002F_Mobile-Dev\u002Ffrom-article-18-ui-ux\u002Fclaude-code-apple-skills\u002Fskills\u002Fdesign\u002Fanimation-patterns\u002Fphase-keyframe-animators.md",{"path":64,"resourceType":55,"resourceTypeDesc":56,"sizeBytes":65,"sourceHtmlUrl":66},"symbol-effects.md",5028,"https:\u002F\u002Fgithub.com\u002Fvitalikpestov\u002FSkills-Catalog\u002Fblob\u002Fmain\u002F_Mobile-Dev\u002Ffrom-article-18-ui-ux\u002Fclaude-code-apple-skills\u002Fskills\u002Fdesign\u002Fanimation-patterns\u002Fsymbol-effects.md",{"path":68,"resourceType":55,"resourceTypeDesc":56,"sizeBytes":69,"sourceHtmlUrl":70},"transitions.md",9692,"https:\u002F\u002Fgithub.com\u002Fvitalikpestov\u002FSkills-Catalog\u002Fblob\u002Fmain\u002F_Mobile-Dev\u002Ffrom-article-18-ui-ux\u002Fclaude-code-apple-skills\u002Fskills\u002Fdesign\u002Fanimation-patterns\u002Ftransitions.md",[72,84,94,103,109,116],{"skillNo":73,"name":74,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":75,"categories":76,"keywords":80,"publishedAt":26},"01M6FKJN13GMG4KY57J3QD8GY5","model-hierarchy-skill","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzscole\u002Fmodel-hierarchy-skill\u002Fmodel-hierarchy-skill\u002FSKILL.md",[77],{"categoryNo":78,"categoryName":79,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000023","Skill与智能体开发",[81,82,83],"model","model hierarchy","model hierarchy skill",{"skillNo":85,"name":86,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":87,"categories":88,"keywords":90,"publishedAt":26},"01M6FKJJJ6GCAMR4PPPRD12M5X","zoom-mcp","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-mcp\u002FSKILL.md",[89],{"categoryNo":78,"categoryName":79,"taxonomyType":20,"taxonomyTypeDesc":21},[91,92,93],"MCP","zoom","zoom mcp",{"skillNo":95,"name":96,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":97,"categories":98,"keywords":99,"publishedAt":26},"01M6FKJE3KYT3KPEZMEEHYKA6K","zoom-apps-sdk","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-apps-sdk\u002FSKILL.md",[],[100,101,102,92],"sdk","zoom apps sdk","apps",{"skillNo":104,"name":105,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":106,"categories":107,"keywords":108,"publishedAt":26},"01M6FKJ9EDH9Q5VWDF8HAJRSP0","windows","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwindows\u002FSKILL.md",[],[105],{"skillNo":110,"name":111,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":112,"categories":113,"keywords":115,"publishedAt":26},"01M6FKJ666BEEFC3AE9GJ72Q93","whiteboard","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwhiteboard\u002FSKILL.md",[114],{"categoryNo":78,"categoryName":79,"taxonomyType":20,"taxonomyTypeDesc":21},[111],{"skillNo":117,"name":118,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":119,"categories":120,"keywords":121,"publishedAt":26},"01M6FKJ21WFCDGTJQ2Q91T9DVW","websockets","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwebsockets\u002FSKILL.md",[],[118]]