{"enrichment":{"faq":[{"a":"react-three-fiber bridges React and Three.js, letting you compose 3D scenes declaratively using familiar component patterns. Define complex 3D environments through JSON specifications and React's component model, then render them efficiently in the browser. Perfect for building interactive visualizations, games, and immersive web experiences.","q":"What is react-three-fiber and how does it work?"},{"a":"Yes. react-three-fiber is designed to render 3D scenes from JSON specifications using React and Three.js. You define scene structure, geometry, lighting, and materials declaratively, then the library converts those specifications into efficient Three.js rendering calls. This approach integrates seamlessly with the json-render catalog system.","q":"Can react-three-fiber render 3D scenes from JSON specifications?"},{"a":"react-three-fiber lets you build 3D components with primitives, lights, and models declaratively. Use component syntax to define boxes, spheres, cylinders, and other shapes, then compose them with lighting elements. Configure materials, shadows, and camera controls to achieve your desired visual effect within the component tree.","q":"How do I build 3D components with primitives and lighting?"},{"a":"Yes. react-three-fiber supports loading and rendering GLTF/GLB models with environment maps. You can integrate pre-built 3D models into your scenes, apply HDRI environment maps for realistic lighting, and control how models interact with shadows and materials in your declarative component structure.","q":"Does react-three-fiber support loading GLTF and GLB models?"},{"a":"react-three-fiber provides orbit controls for camera navigation, grid helpers and fog effects for scene composition, and full control over materials and shadows. You can configure text rendering with SDF, apply environment maps, and build complex interactive 3D scenes using React's familiar component patterns and lifecycle management.","q":"What 3D controls and features does react-three-fiber provide?"},{"a":"Yes. react-three-fiber is distributed under the Apache-2.0 license, making it free and open-source for commercial and personal use with appropriate attribution.","q":"Is react-three-fiber licensed under Apache-2.0?"}],"shadow_tags":["declarative-3d","mesh-rendering","scene-composition","graphics-framework","model-loading","lighting-system","camera-controls","material-system","json-driven-graphics","webgl-abstraction"],"summary_rewrite":"react-three-fiber bridges React and Three.js, letting you compose 3D scenes declaratively using familiar component patterns. Define complex 3D environments through JSON specifications and React's component model, then render them efficiently in the browser. Perfect for building interactive visualizations, games, and immersive web experiences."},"files":[{"bytes":5301,"path":"skills/react-three-fiber/SKILL.md","sha256":"f1120aeaf7cf695838b4daa37879403b007014babaf7ec3fed1eaafc7fb61593","url":"https://skillfed.io/files/vercel-labs/json-render/react-three-fiber/7e0c8587/SKILL.md"}],"id":"vercel-labs/json-render/react-three-fiber","links":{"html":"https://skillfed.io/vercel-labs/json-render/react-three-fiber","md":"https://skillfed.io/vercel-labs/json-render/react-three-fiber.md","repo":"https://github.com/vercel-labs/json-render"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":850,"language":"TypeScript","last_updated":"2026-07-08","license":"Apache-2.0","name":"react-three-fiber","publisher":"vercel-labs","stars":15776},"relations":{"similar":[{"id":"organvm/a-i--skills/react-three-fiber-patterns"},{"id":"daffy0208/ai-dev-standards/3d-visualizer"},{"id":"freshtechbro/claudedesignskills/web3d-integration-patterns"},{"id":"freshtechbro/claudedesignskills/react-three-fiber"},{"id":"Mindrally/skills/react-native-r3f"},{"id":"freshtechbro/claudedesignskills/threejs-webgl"},{"id":"EnzeD/r3f-skills/r3f-lighting"},{"id":"EnzeD/r3f-skills/r3f-fundamentals"},{"id":"daffy0208/ai-dev-standards/spatial-developer"},{"id":"Bbeierle12/Skill-MCP-Claude/r3f-fundamentals"}]},"slug":{"owner":"vercel-labs","repo":"json-render","skill":"react-three-fiber"},"version":"7e0c8587"}