Labsco
vercel-labs logo

react-three-fiber

★ 15,600

by vercel · part of vercel-labs/json-render

React Three Fiber 3D renderer for json-render. Use when working with @json-render/react-three-fiber, building 3D scenes from JSON specs, rendering…

🔥🔥🔥✓ VerifiedFreeQuick setup
#git#project-mgmt
🧰 Not standalone. This skill ships with vercel-labs/json-render and only works together with that tool — install the tool first, then add this skill.

This is the playbook your agent receives when the skill activates — you don't need to read it to use the skill, but it's here to audit before installing.

by vercel

React Three Fiber 3D renderer for json-render. Use when working with @json-render/react-three-fiber, building 3D scenes from JSON specs, rendering… npx skills add https://github.com/vercel-labs/json-render --skill react-three-fiber Download ZIPGitHub15.6k

@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

Rendering

ThreeCanvas (convenience wrapper)

Manual Canvas setup

import { Canvas } from "@react-three/fiber";
import { ThreeRenderer } from "@json-render/react-three-fiber";

 
 
 {/* Additional R3F elements */}

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:

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(),
 }),
 description: "My custom 3D component",
};

Material Schema

materialSchema = z.object({
 color: z.string().nullable(), // default "#ffffff"
 metalness: z.number().nullable(), // default 0
 roughness: z.number().nullable(), // default 1
 emissive: z.string().nullable(), // default "#000000"
 emissiveIntensity: z.number().nullable(), // default 1
 opacity: z.number().nullable(), // default 1
 transparent: z.boolean().nullable(), // default false
 wireframe: z.boolean().nullable(), // default false
});

Spec Format

3D specs use the standard json-render flat element format:

{
 "root": "scene",
 "elements": {
 "scene": {
 "type": "Group",
 "props": { "position": [0, 0, 0] },
 "children": ["light", "box"]
 },
 "light": {
 "type": "AmbientLight",
 "props": { "intensity": 0.5 },
 "children": []
 },
 "box": {
 "type": "Box",
 "props": {
 "position": [0, 0.5, 0],
 "material": { "color": "#4488ff", "metalness": 0.3, "roughness": 0.7 }
 },
 "children": []
 }
 }
}

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