react-three-fiber
React Three Fiber 3D renderer for json-render. Use when 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.
Security Assessment
About react-three-fiber
This skill is developer documentation for `@json-render/react-three-fiber`, a React Three Fiber renderer that turns declarative JSON specifications into 3D scenes. It solves the problem of building Three.js scenes from serializable, data-driven specs (for example spec output from an LLM or a catalog) instead of hand-writing imperative Three.js code, by providing a catalog of 19 built-in 3D components and a renderer that maps a flat JSON element tree into a live canvas.
The skill explains the two entry points (a server-safe catalog of component definitions with no R3F dependency, and the full package with implementations, `ThreeRenderer`, and `ThreeCanvas`), the usage pattern of defining a catalog and matching registry, and rendering via the convenience `ThreeCanvas` wrapper or a manual `Canvas` setup. It documents all 19 components across primitives (Box, Sphere, Cylinder, Cone, Torus, Plane, Capsule), lights (Ambient, Directional, Point, Spot), and other elements (Group, Model/GLTF loader, Environment HDRI, Fog, GridHelper, Text3D, PerspectiveCamera, OrbitControls), the shared transform/shadow/material Zod schemas for building custom components, the flat JSON spec format, and the required peer dependencies.
Target users are frontend and 3D developers using the json-render ecosystem who want to render or generate 3D scenes from JSON, integrate Three.js with json-render catalogs, or define custom 3D components. It is purely a reference/library-usage skill with no scripts or side effects.
FAQ
What does this package do?
It renders 3D scenes from json-render JSON specs using React Three Fiber, providing 19 built-in 3D components (primitives, lights, cameras, controls, models, environments) and a renderer.
What is the difference between the two entry points?
`@json-render/react-three-fiber/catalog` exports only component definitions (schemas, no R3F dependency, safe for server use), while `@json-render/react-three-fiber` exports the R3F implementations plus `ThreeRenderer`, `ThreeCanvas`, and schemas.
What are the peer dependencies?
`@react-three/fiber` >= 8.0.0, `@react-three/drei` >= 9.0.0, `three` >= 0.160.0, `react` ^19.0.0, and `zod` ^4.0.0.
Can I define my own 3D components?
Yes. It exposes reusable Zod schemas (vector3Schema, materialSchema, transformProps, shadowProps) so you can compose custom 3D catalog definitions with shared transform, shadow, and material props.
How is a scene described?
As a standard json-render flat element format with a `root` id and an `elements` map, where each element has a `type`, `props`, and `children` list referencing other element ids.
Install react-three-fiber
Quick Setup:
- Copy the skill folder to
.claude/skills/ - Claude will automatically detect and use the skill
Repository
vercel-labs/json-render