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
Install
vercel-labs/json-render/react-three-fiber · repository language: TypeScript
git clone https://github.com/vercel-labs/json-render
cp -r json-render/skills/react-three-fiber ~/.claude/skills/react-three-fiberFrequently 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)
Read as markdown · JSON record · Browse the source repository
File tree — 1 file
skills/react-three-fiber/SKILL.md