react-three-fiber

Convert json-render 3D scene specifications into React Three Fiber components.

Updated May 18, 2026

Search Tags:#react #ecs #three-js #react-three-fiber #glb #json-render #3d scene rendering

Ready to run

npx skills add https://github.com/yogaprasetya22/mmorpg --skill react-three-fiber-yogaprasetya22

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the problem of turning structured JSON scene descriptions into working, interactive 3D renders without manually writing repetitive Three.js boilerplate.

Core Features & Use Cases

JSON-to-Scene Rendering: Render complete Three.js/scene graphs from json-render specs, including transforms and shared component schemas.
Catalog + Registry Workflow: Use @json-render/react-three-fiber/catalog for schema definitions (safe/server-friendly) and @json-render/react-three-fiber for client-side R3F implementations.
Common Scene Building Blocks: Compose primitives, lights, environments, fog, camera/controls, models (GLTF/GLB), and text (SDF) as 3D elements.
Use Case: Generate an in-browser MMORPG/editor view from server-provided map and entity JSON, so artists/devs can update layouts by changing specs rather than rewriting rendering code.

Quick Start

Use the react-three-fiber Skill to render your json-render spec by providing spec and a matching registry to ThreeCanvas.

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 specifications in React?▼

To render 3D scenes from JSON specifications in React, you map json-render scene specs to React Three Fiber components using a paired catalog and registry, passing both the spec and registry to a ThreeCanvas component for browser-based visualization.

Can I load GLTF and GLB models using a JSON-to-scene rendering workflow?▼

Yes, you can load GLTF and GLB models using this JSON-to-scene rendering workflow. The implementation supports composing primitives, lighting, environments, and GLTF/GLB models directly from structured json-render scene specifications.

What is the best way to update Three.js scene layouts without rewriting rendering code?▼

The best way to update Three.js layouts without rewriting rendering code is using a catalog and registry workflow. Developers and artists update server-provided JSON specs, which automatically re-render the scene graphs without manual boilerplate changes.

Does react-three-fiber support rendering environments, fog, and camera controls from JSON?▼

Yes, react-three-fiber supports rendering environments, fog, and camera controls from JSON. You can compose these common scene building blocks alongside meshes, materials, and text as 3D elements within your json-render specifications.

How to build an in-browser MMORPG editor view from server-provided map JSON?▼

To build an in-browser MMORPG editor view, you convert server-provided map and entity JSON into React Three Fiber rendered components. This applies a catalog of schema definitions paired with client-side implementations to visualize interactive scenes.

Do I need a separate catalog definition to render json-render specs with React Three Fiber?▼

Yes, you need a separate catalog definition. Rendering requires pairing @json-render/react-three-fiber/catalog schema definitions for server-friendly safety with @json-render/react-three-fiber client-side implementations to execute the ThreeCanvas or manual rendering flow.