react-three-fiber
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.
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.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-07-08
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.
Use it when
- Yes.
- react-three-fiber lets you build 3D components with primitives, lights, and models declaratively.
Verify before relying
Read SKILL.md below before installing (1 file). Open directory: indexed for reading, not audited.
Install
vercel-labs/json-render/react-three-fiber · repository language: TypeScript
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What is react-three-fiber and how does it work?
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.
Can react-three-fiber render 3D scenes from JSON specifications?
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.
How do I build 3D components with primitives and lighting?
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.
Does react-three-fiber support loading GLTF and GLB models?
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.
What 3D controls and features does react-three-fiber provide?
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.
Is react-three-fiber licensed under Apache-2.0?
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.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
@json-render/react-three-fiber
React Three Fiber renderer for json-render. 19 built-in 3D components.
Two Entry Points
| Entry Point | Exports | Use For |
|---|---|---|
@json-render/react-three-fiber/catalog |
threeComponentDefinitions |
Catalog schemas (no R3F dependency, safe for server) |
@json-render/react-three-fiber |
threeComponents, ThreeRenderer, ThreeCanvas, schemas |
R3F implementations and renderer |
Usage Pattern
Pick the 3D components you need from the standard definitions:
```typescript import { defineCatalog } from "@json-render/core"; import { schema } from "@json-render/react/schema"; import { threeComponentDefinitions } from "@json-render/react-three-fiber/catalog"; import { defineRegistry } from "@json-render/react"; import { threeComponents, ThreeCanvas } from "@json-render/react-three-fiber";
// Catalog: pick definitions const
(truncated - see the full file via the links below)
File tree — 1 file
skills/react-three-fiber/SKILL.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Render 3D scenes from JSON specifications using React and Three.js”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
This skill equips developers with proven architectural patterns for integrating multiple 3D rendering and animation frameworks into cohesive web applications. Learn how to combine Three.js, Babylon.js, React Three Fiber, and GSAP effectively while managing complexity and performance across modern web stacks.
threejs-webgl equips Claude Code with a comprehensive toolkit for creating immersive 3D graphics and WebGL-powered experiences. This skillstack integrates Three.js alongside complementary libraries like GSAP and Babylon.js, enabling developers to craft sophisticated animations and interactive visualizations for modern web applications.
R3f Lighting teaches you how to implement and fine-tune lighting systems within React Three Fiber environments. Discover techniques for creating realistic illumination effects, managing light sources, and optimizing performance in interactive 3D web scenes.
Spatial Developer equips you with patterns and code for AR/VR applications across web and Vision Pro. It covers WebXR setup, hand tracking, spatial audio, gaze-based selection, and 3D interactions using Three.js and React Three Fiber.
Master the essentials of React Three Fiber by configuring your first Canvas component and establishing a foundational 3D environment. This skill walks you through the core setup patterns and scene architecture needed to begin rendering interactive 3D graphics in React.
This adapter bridges Jotai atoms into json-render's state layer, letting you manage UI state through Jotai's atom system. Pass an atom and optional Jotai store to the jotaiStateStore function, then wrap your json-render components in StateProvider to route all state reads and writes through Jotai.
More skills core (Apache-2.0) · 3d Web Experience (unlicensed) · xstate (Apache-2.0) · threejs-builder (MIT) · React Google Maps (unlicensed) · R3f Shaders (unlicensed)