React Three Fiber
Render 3D scenes from json-render JSON specs using React Three Fiber with catalog definitions and the ThreeRenderer entry points.
Overview
React Three Fiber is an agent skill for the Build phase that explains how to render json-render JSON specs into Three.js scenes using @json-render/react-three-fiber and its 19 built-in 3D components.
Install
npx skills add https://github.com/vercel-labs/json-render --skill react-three-fiberWhat is this skill?
- 19 built-in 3D components in @json-render/react-three-fiber
- Split entry: catalog definitions (server-safe) vs R3F implementations
- defineCatalog + defineRegistry pattern with ThreeCanvas and ThreeRenderer
- Standard primitives: Box, Sphere, AmbientLight, DirectionalLight, OrbitControls
- TypeScript-first integration with @json-render/core and react schema
Adoption & trust: 1.1k installs on skills.sh; 15k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You have json-render scene JSON but no clear map from catalog definitions to R3F components, canvas setup, and server-safe schema imports.
Who is it for?
Builders combining json-render with React who need documented catalog and registry wiring for 3D product views or AI-generated layouts.
Skip if: Pure 2D json-render apps, native mobile 3D outside React, or teams avoiding Three.js bundle weight entirely.
When should I use this skill?
Working with @json-render/react-three-fiber, building 3D scenes from JSON specs, rendering meshes/lights/models/environments, or integrating Three.js with json-render catalogs.
What do I get? / Deliverables
You can define a partial catalog, register threeComponents, and mount agent-generated 3D specs in a React app with the correct import split for server vs client.
- Catalog with selected 3D component definitions
- Mounted ThreeCanvas rendering JSON scene specs
Recommended Skills
Journey fit
json-render R3F integration is product UI work during implementation, canonical on the build frontend shelf. Meshes, lights, controls, and canvas wiring are client-side 3D frontend concerns.
How it compares
Skill package for json-render’s R3F renderer—not a standalone MCP server or generic Three.js tutorial.
Common Questions / FAQ
Who is react-three-fiber for?
Solo frontend developers using Vercel’s json-render stack who want React Three Fiber scenes driven by JSON catalogs and agent outputs.
When should I use react-three-fiber?
Use it during Build/frontend when integrating @json-render/react-three-fiber, picking mesh and light definitions, or mounting ThreeCanvas with defineRegistry for spec-driven 3D.
Is react-three-fiber safe to install?
Treat it as community-maintained documentation tied to @json-render packages; check this page’s Security Audits panel and your lockfile before installing in production repos.
SKILL.md
READMESKILL.md - React Three Fiber
# @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 catalog = defineCatalog(schema, { components: { Box: threeComponentDefinitions.Box, Sphere: threeComponentDefinitions.Sphere, AmbientLight: threeComponentDefinitions.AmbientLight, DirectionalLight: threeComponentDefinitions.DirectionalLight, OrbitControls: threeComponentDefinitions.OrbitControls, }, actions: {}, }); // Registry: pick matching implementations const { registry } = defineRegistry(catalog, { components: { Box: threeComponents.Box, Sphere: threeComponents.Sphere, AmbientLight: threeComponents.AmbientLight, DirectionalLight: threeComponents.DirectionalLight, OrbitControls: threeComponents.OrbitControls, }, }); ``` ## Rendering ### ThreeCanvas (convenience wrapper) ```tsx <ThreeCanvas spec={spec} registry={registry} shadows camera={{ position: [5, 5, 5], fov: 50 }} style={{ width: "100%", height: "100vh" }} /> ``` ### Manual Canvas setup ```tsx import { Canvas } from "@react-three/fiber"; import { ThreeRenderer } from "@json-render/react-three-fiber"; <Canvas shadows> <ThreeRenderer spec={spec} registry={registry}> {/* Additional R3F elements */} </ThreeRenderer> </Canvas> ``` ## Available Components (19) ### Primitives (7) - `Box` -- width, height, depth, material - `Sphere` -- radius, widthSegments, heightSegments, material - `Cylinder` -- radiusTop, radiusBottom, height, material - `Cone` -- radius, height, material - `Torus` -- radius, tube, material - `Plane` -- width, height, material - `Capsule` -- radius, length, material All primitives share: `position`, `rotation`, `scale`, `castShadow`, `receiveShadow`, `material`. ### Lights (4) - `AmbientLight` -- color, intensity - `DirectionalLight` -- position, color, intensity, castShadow - `PointLight` -- position, color, intensity, distance, decay - `SpotLight` -- position, color, intensity, angle, penumbra ### Other (8) - `Group` -- container with position/rotation/scale, supports children - `Model` -- GLTF/GLB loader via url prop - `Environment` -- HDRI environment map (preset, background, blur, intensity) - `Fog` -- linear fog (color, near, far) - `GridHelper` -- reference grid (size, divisions, color) - `Text3D` -- SDF text (text, fontSize, color, anchorX, anchorY) - `PerspectiveCamera` -- camera (position, fov, near, far, makeDefault) - `OrbitControls` -- orbit controls (enableDamping, enableZoom, autoRotate) ## Shared Schemas Reusable Zod schemas for custom 3D catalog definitions: ```typescript import { vector3Schema, materialSchema, transformProps, shadowProps } from "@json-render/react-three-fiber"; import { z } from "zod"; // Custom 3D component const myComponentDef = { props: z.object({ ...transformProps, ...shadowProps, material: materialSchema.nullable(), myCustomProp: z.string(),