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.
By vercel-labs · 2,046 installs
npx skills add vercel-labs/json-render --skill react-three-fiber
Source repository · Upstream listing
@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:
Rendering
ThreeCanvas (convenience wrapper)
Manual Canvas setup
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:
Material Schema
Spec Format
3D specs use the standard json render flat element format:
Dependencies
Peer dependencies required:
@react three/fiber = 8.0.0
@react three/drei = 9.0.0
three = 0.160.0
react ^19.0.0
zod ^4.0.0