---
id: vercel-labs/json-render/react-three-fiber
version: "7e0c8587"
license: Apache-2.0
install: manual
updated: 2026-07-08
---

# 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.

Publisher: vercel-labs · Stars: 15776 · Updated: 2026-07-08

Install (manual): `git clone https://github.com/vercel-labs/json-render`

## SKILL.md

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

## Material Schema

```typescript
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:

```json
{
  "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


[View on SkillFed](https://skillfed.io/vercel-labs/json-render/react-three-fiber) · [View on GitHub](https://github.com/vercel-labs/json-render)