skills.rest
abhinaaaavvv
abhinaaaavvvCOMMUNITY
Explore all skills by this author →
Website𝕏@abhinaaaavvvGitHub

react-three-fiber

Renders 3D scenes from JSON specs using React Three Fiber components.

Updated Mar 12, 2026
Search Tags:#react#catalog#three.js#react-three-fiber#3d rendering#json-render#scene graph
One-click install
npx skills add https://github.com/abhinaaaavvv/dotfiles --skill react-three-fiber-abhinaaaavvv
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-three-fiber
Source: https://github.com/abhinaaaavvv/dotfiles/tree/main/.agents/skills/react-three-fiber
Command: npx skills add https://github.com/abhinaaaavvv/dotfiles --skill react-three-fiber-abhinaaaavvv

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @react-three/fiber, @react-three/drei, three, react, zod.

What problem does it solve? Building 3D scenes from declarative JSON specifications requires bridging json-render catalogs with Three.js rendering, which normally demands manual wiring of components, schemas, and renderers. ## Core Features & Use Cases - 19 Built-in 3D Components: Primitives (Box, Sphere, Cylinder), lights (Ambient, Directional, Point, Spot), and utilities (Model, Environment, Text3D, OrbitControls) ready for catalog registration. - Dual Entry Points: Use the catalog entry for server-safe schema definitions without an R3F dependency, and the main entry for actual R3F implementations and renderers. - Shared Zod Schemas: Reuse vector3, material, transform, and shadow schemas to define custom 3D components consistently. - Use Case: An AI agent generates a JSON spec describing a product showcase scene with a rotating model, spot lighting, and orbit controls; this Skill renders it directly via ThreeCanvas. ## Quick Start Render a 3D scene from my JSON spec using ThreeCanvas with shadows and a perspective camera.

Frequently Asked Questions about react-three-fiber

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I render a 3D scene from a JSON spec in React?▼

Define a catalog with threeComponentDefinitions, build a registry with threeComponents, then pass the spec and registry to ThreeCanvas. The spec uses a flat element format with root, elements, type, props, and children fields.

What 3D components are available in json-render react-three-fiber?▼

There are 19 built-in components: 7 primitives (Box, Sphere, Cylinder, Cone, Torus, Plane, Capsule), 4 lights (Ambient, Directional, Point, Spot), and 8 others including Group, Model, Environment, Fog, Text3D, and OrbitControls.

Can I use the 3D catalog definitions on the server without Three.js?▼

Yes, import threeComponentDefinitions from @json-render/react-three-fiber/catalog. This entry point has no R3F dependency and is safe for server-side schema validation, while the main entry provides the actual renderers.

How do I load GLTF or GLB models in a json-render 3D scene?▼

Use the Model component with a url prop pointing to your GLTF or GLB file. It handles loading through the standard drei loaders and can be positioned like any other element in the spec.

What peer dependencies does react-three-fiber rendering require?▼

You need @react-three/fiber 8+, @react-three/drei 9+, three 0.160+, react 19, and zod 4. All five must be installed alongside @json-render/react-three-fiber for rendering to work.

Related Skills

Explore More Software Engineering Skills→
StormHubStormHub

json-render

Generate and render UIs from JSON specs into React and Next.js apps.

Community
Advanced
Gekkos-techGekkos-tech
4

react-three-fiber

Create declarative 3D scenes in React applications using JSX components.

Official
Intermediate
vercel-labsvercel-labs
16.1k

react-three-fiber

Renders 3D scenes from JSON specs using React Three Fiber components.

Official
Intermediate
ByronWilliamsCPAByronWilliamsCPA

meta-harness

Runs an evolutionary Pareto search over harness code around a fixed LLM using native agent workflows.

Official
Advanced