skills.rest
jtgiron
jtgironCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/jtgiron/portfolio --skill react-three-fiber-jtgiron
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
adryanmoldokkr32-pixeladryanmoldokkr32-pixel
2

threejs-impl-drei

Integrate Drei components with React Three Fiber for 3D web development.

Community
Advanced
inpinitiinpiniti

react-three-fiber

Render interactive 3D scenes in React from JSON specifications.

Community
Advanced
oakossoakoss
1

zod

Validate runtime data against Zod v4 schemas in TypeScript projects.

Official
Intermediate
ayofemiadeayofemiade

threejs-fundamentals

Create basic Three.js 3D scenes with cameras, renderers, and objects.

Community
Basic