react-three-fiber

Generate React Three Fiber scenes from JSON render specifications.

Updated May 4, 2026

Search Tags:#three.js #3d rendering #gltf #react three fiber #json-render #declarative scene

Ready to run

npx skills add https://github.com/jtgiron/portfolio --skill react-three-fiber-jtgiron

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-three-fiber
Source: https://github.com/jtgiron/portfolio/tree/main/.agents/skills/react-three-fiber
Command: npx skills add https://github.com/jtgiron/portfolio --skill react-three-fiber-jtgiron

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you build and render interactive 3D scenes from JSON specifications without manually wiring every Three.js object and control.

Core Features & Use Cases

Catalog-driven 3D rendering: Select only the scene primitives, lights, cameras, and controls you need.
Renderer integration: Use it with React Three Fiber to render JSON-defined scenes through ThreeCanvas or ThreeRenderer.
Production-friendly composition: Map schema definitions to implementations for meshes, environment lighting, GLTF models, text, fog, and orbit controls.
Use case: Turn a product configurator, architectural preview, or data-driven visualization into a declarative scene that can be reused across client and server boundaries.

Quick Start

Ask the assistant to convert your JSON scene specification into a React Three Fiber setup using the provided catalog and registry pattern.

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 3D scenes from JSON specs in React Three Fiber?▼

You can render 3D scenes from JSON specs by mapping a catalog of schema definitions to a registry of React Three Fiber implementations. This declarative approach generates meshes, lights, cameras, and controls without manual Three.js wiring.

Can I load GLTF models declaratively using JSON in React Three Fiber?▼

Yes, you can load GLTF models declaratively by defining them within your JSON specification. The Skill maps these JSON-render specs to your registered threeComponents, allowing you to integrate GLTF models alongside environment maps and meshes.

Do I need a specific catalog and registry setup to build declarative 3D scenes?▼

Yes, building declarative 3D scenes requires aligned catalog and registry definitions for threeComponentDefinitions and threeComponents. You also need @react-three/fiber, @react-three/drei, three, react, and zod available in your environment for rendering.

What is the best way to create a data-driven product configurator with Three.js?▼

The best way to create a data-driven product configurator is using catalog-driven 3D rendering. By defining your scene primitives in JSON specs, you can build reusable declarative scenes that work across client and server boundaries.

Does this approach support orbit controls and environment lighting for 3D visualization?▼

Yes, this JSON-based rendering approach supports orbit controls and environment lighting. You can select the specific scene primitives, lights, cameras, and controls you need from your catalog to render interactive 3D visualizations.

adryanmoldokkr32-pixel