react-three-fiber

Name: react-three-fiber
Author: vercel-labs

1.6kinstalls849forks

How to install react-three-fiber?

vercel-labs/json-render/react-three-fiber

$npx -y skills add vercel-labs/json-render --skill react-three-fiber

Installs into the current project.

Summary

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.

Files · 1

View on GitHub

SKILL.md

1	# @json-render/react-three-fiber
2
3	React Three Fiber renderer for json-render. 19 built-in 3D components.
4
5	## Two Entry Points
6
7	\| Entry Point \| Exports \| Use For \|
8	\|-------------\|---------\|---------\|
9	\| `@json-render/react-three-fiber/catalog` \| `threeComponentDefinitions` \| Catalog schemas (no R3F dependency, safe for server) \|
10	\| `@json-render/react-three-fiber` \| `threeComponents`, `ThreeRenderer`, `ThreeCanvas`, schemas \| R3F implementations and renderer \|
11
12	## Usage Pattern
13
14	Pick the 3D components you need from the standard definitions:
15
16	```typescript
17	import { defineCatalog } from "@json-render/core";
18	import { schema } from "@json-render/react/schema";
19	import { threeComponentDefinitions } from "@json-render/react-three-fiber/catalog";
20	import { defineRegistry } from "@json-render/react";
21	import { threeComponents, ThreeCanvas } from "@json-render/react-three-fiber";
22
23	// Catalog: pick definitions
24	const catalog = defineCatalog(schema, {
25	components: {
26	Box: threeComponentDefinitions.Box,
27	Sphere: threeComponentDefinitions.Sphere,
28	AmbientLight: threeComponentDefinitions.AmbientLight,
29	DirectionalLight: threeComponentDefinitions.DirectionalLight,
30	OrbitControls: threeComponentDefinitions.OrbitControls,
31	},
32	actions: {},
33	});
34
35	// Registry: pick matching implementations
36	const { registry } = defineRegistry(catalog, {
37	components: {
38	Box: threeComponents.Box,
39	Sphere: threeComponents.Sphere,
40	AmbientLight: threeComponents.AmbientLight,
41	DirectionalLight: threeComponents.DirectionalLight,
42	OrbitControls: threeComponents.OrbitControls,
43	},
44	});
45	```
46
47	## Rendering
48
49	### ThreeCanvas (convenience wrapper)
50
51	```tsx
52	<ThreeCanvas
53	spec={spec}
54	registry={registry}
55	shadows
56	camera={{ position: [5, 5, 5], fov: 50 }}
57	style={{ width: "100%", height: "100vh" }}
58	/>
59	```
60
61	### Manual Canvas setup
62
63	```tsx
64	import { Canvas } from "@react-three/fiber";
65	import { ThreeRenderer } from "@json-render/react-three-fiber";
66
67	<Canvas shadows>
68	<ThreeRenderer spec={spec} registry={registry}>
69	{/* Additional R3F elements */}
70	</ThreeRenderer>
71	</Canvas>
72	```
73
74	## Available Components (19)
75
76	### Primitives (7)
77	- `Box` -- width, height, depth, material
78	- `Sphere` -- radius, widthSegments, heightSegments, material
79	- `Cylinder` -- radiusTop, radiusBottom, height, material
80	- `Cone` -- radius, height, material
81	- `Torus` -- radius, tube, material
82	- `Plane` -- width, height, material
83	- `Capsule` -- radius, length, material
84
85	All primitives share: `position`, `rotation`, `scale`, `castShadow`, `receiveShadow`, `material`.
86
87	### Lights (4)
88	- `AmbientLight` -- color, intensity
89	- `DirectionalLight` -- position, color, intensity, castShadow
90	- `PointLight` -- position, color, intensity, distance, decay
91	- `SpotLight` -- position, color, intensity, angle, penumbra
92
93	### Other (8)
94	- `Group` -- container with position/rotation/scale, supports children
95	- `Model` -- GLTF/GLB loader via url prop
96	- `Environment` -- HDRI environment map (preset, background, blur, intensity)
97	- `Fog` -- linear fog (color, near, far)
98	- `GridHelper` -- reference grid (size, divisions, color)
99	- `Text3D` -- SDF text (text, fontSize, color, anchorX, anchorY)
100	- `PerspectiveCamera` -- camera (position, fov, near, far, makeDefault)
101	- `OrbitControls` -- orbit controls (enableDamping, enableZoom, autoRotate)
102
103	## Shared Schemas
104
105	Reusable Zod schemas for custom 3D catalog definitions:
106
107	```typescript
108	import { vector3Schema, materialSchema, transformProps, shadowProps } from "@json-render/react-three-fiber";
109	import { z } from "zod";
110
111	// Custom 3D component
112	const myComponentDef = {
113	props: z.object({
114	...transformProps,
115	...shadowProps,
116	material: materialSchema.nullable(),
117	myCustomProp: z.string(),
118	}),
119	description: "My custom 3D component",
120	};
121	```
122
123	## Material Schema
124
125	```typescript
126	materialSchema = z.object({
127	color: z.string().nullable(), // default "#ffffff"
128	metalness: z.number().nullable(), // default 0
129	roughness: z.number().nullable(), // default 1
130	emissive: z.string().nullable(), // default "#000000"
131	emissiveIntensity: z.number().nullable(), // default 1
132	opacity: z.number().nullable(), // default 1
133	transparent: z.boolean().nullable(), // default false
134	wireframe: z.boolean().nullable(), // default false
135	});
136	```
137
138	## Spec Format
139
140	3D specs use the standard json-render flat element format:
141
142	```json
143	{
144	"root": "scene",
145	"elements": {
146	"scene": {
147	"type": "Group",
148	"props": { "position": [0, 0, 0] },
149	"children": ["light", "box"]
150	},
151	"light": {
152	"type": "AmbientLight",
153	"props": { "intensity": 0.5 },
154	"children": []
155	},
156	"box": {
157	"type": "Box",
158	"props": {
159	"position":

People who liked this also viewed

6 picks

Type

react-three-fiber

1.6kinstalls849forks

View on GitHub

How to install react-three-fiber?

vercel-labs/json-render/react-three-fiber

$npx -y skills add vercel-labs/json-render --skill react-three-fiber

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# @json-render/react-three-fiber
2
3	React Three Fiber renderer for json-render. 19 built-in 3D components.
4
5	## Two Entry Points
6
7	\| Entry Point \| Exports \| Use For \|
8	\|-------------\|---------\|---------\|
9	\| `@json-render/react-three-fiber/catalog` \| `threeComponentDefinitions` \| Catalog schemas (no R3F dependency, safe for server) \|
10	\| `@json-render/react-three-fiber` \| `threeComponents`, `ThreeRenderer`, `ThreeCanvas`, schemas \| R3F implementations and renderer \|
11
12	## Usage Pattern
13
14	Pick the 3D components you need from the standard definitions:
15
16	```typescript
17	import { defineCatalog } from "@json-render/core";
18	import { schema } from "@json-render/react/schema";
19	import { threeComponentDefinitions } from "@json-render/react-three-fiber/catalog";
20	import { defineRegistry } from "@json-render/react";
21	import { threeComponents, ThreeCanvas } from "@json-render/react-three-fiber";
22
23	// Catalog: pick definitions
24	const catalog = defineCatalog(schema, {
25	components: {
26	Box: threeComponentDefinitions.Box,
27	Sphere: threeComponentDefinitions.Sphere,
28	AmbientLight: threeComponentDefinitions.AmbientLight,
29	DirectionalLight: threeComponentDefinitions.DirectionalLight,
30	OrbitControls: threeComponentDefinitions.OrbitControls,
31	},
32	actions: {},
33	});
34
35	// Registry: pick matching implementations
36	const { registry } = defineRegistry(catalog, {
37	components: {
38	Box: threeComponents.Box,
39	Sphere: threeComponents.Sphere,
40	AmbientLight: threeComponents.AmbientLight,
41	DirectionalLight: threeComponents.DirectionalLight,
42	OrbitControls: threeComponents.OrbitControls,
43	},
44	});
45	```
46
47	## Rendering
48
49	### ThreeCanvas (convenience wrapper)
50
51	```tsx
52	<ThreeCanvas
53	spec={spec}
54	registry={registry}
55	shadows
56	camera={{ position: [5, 5, 5], fov: 50 }}
57	style={{ width: "100%", height: "100vh" }}
58	/>
59	```
60
61	### Manual Canvas setup
62
63	```tsx
64	import { Canvas } from "@react-three/fiber";
65	import { ThreeRenderer } from "@json-render/react-three-fiber";
66
67	<Canvas shadows>
68	<ThreeRenderer spec={spec} registry={registry}>
69	{/* Additional R3F elements */}
70	</ThreeRenderer>
71	</Canvas>
72	```
73
74	## Available Components (19)
75
76	### Primitives (7)
77	- `Box` -- width, height, depth, material
78	- `Sphere` -- radius, widthSegments, heightSegments, material
79	- `Cylinder` -- radiusTop, radiusBottom, height, material
80	- `Cone` -- radius, height, material
81	- `Torus` -- radius, tube, material
82	- `Plane` -- width, height, material
83	- `Capsule` -- radius, length, material
84
85	All primitives share: `position`, `rotation`, `scale`, `castShadow`, `receiveShadow`, `material`.
86
87	### Lights (4)
88	- `AmbientLight` -- color, intensity
89	- `DirectionalLight` -- position, color, intensity, castShadow
90	- `PointLight` -- position, color, intensity, distance, decay
91	- `SpotLight` -- position, color, intensity, angle, penumbra
92
93	### Other (8)
94	- `Group` -- container with position/rotation/scale, supports children
95	- `Model` -- GLTF/GLB loader via url prop
96	- `Environment` -- HDRI environment map (preset, background, blur, intensity)
97	- `Fog` -- linear fog (color, near, far)
98	- `GridHelper` -- reference grid (size, divisions, color)
99	- `Text3D` -- SDF text (text, fontSize, color, anchorX, anchorY)
100	- `PerspectiveCamera` -- camera (position, fov, near, far, makeDefault)
101	- `OrbitControls` -- orbit controls (enableDamping, enableZoom, autoRotate)
102
103	## Shared Schemas
104
105	Reusable Zod schemas for custom 3D catalog definitions:
106
107	```typescript
108	import { vector3Schema, materialSchema, transformProps, shadowProps } from "@json-render/react-three-fiber";
109	import { z } from "zod";
110
111	// Custom 3D component
112	const myComponentDef = {
113	props: z.object({
114	...transformProps,
115	...shadowProps,
116	material: materialSchema.nullable(),
117	myCustomProp: z.string(),
118	}),
119	description: "My custom 3D component",
120	};
121	```
122
123	## Material Schema
124
125	```typescript
126	materialSchema = z.object({
127	color: z.string().nullable(), // default "#ffffff"
128	metalness: z.number().nullable(), // default 0
129	roughness: z.number().nullable(), // default 1
130	emissive: z.string().nullable(), // default "#000000"
131	emissiveIntensity: z.number().nullable(), // default 1
132	opacity: z.number().nullable(), // default 1
133	transparent: z.boolean().nullable(), // default false
134	wireframe: z.boolean().nullable(), // default false
135	});
136	```
137
138	## Spec Format
139
140	3D specs use the standard json-render flat element format:
141
142	```json
143	{
144	"root": "scene",
145	"elements": {
146	"scene": {
147	"type": "Group",
148	"props": { "position": [0, 0, 0] },
149	"children": ["light", "box"]
150	},
151	"light": {
152	"type": "AmbientLight",
153	"props": { "intensity": 0.5 },
154	"children": []
155	},
156	"box": {
157	"type": "Box",
158	"props": {
159	"position":

People who liked this also viewed

6 picks

Type