react-three-game

Generates 3D scenes, games, and physics simulations from JSON prefabs using React Three Fiber.

Updated Jun 30, 2026
One-click install
npx skills add https://github.com/kaitoartz/dotfiles --skill react-three-game-kaitoartz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-three-game
Source: https://github.com/kaitoartz/dotfiles/tree/main/dot_gemini/config/skills/react-three-game
Command: npx skills add https://github.com/kaitoartz/dotfiles --skill react-three-game-kaitoartz

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react-three-game, @react-three/fiber, @react-three/rapier, @react-three/drei, and includes references (resource) components.

What problem does it solve? Building 3D scenes and games in React typically requires writing verbose imperative Three.js code by hand. This Skill lets you define entire 3D scenes, physics simulations, and game levels as declarative JSON prefabs that render through React Three Fiber, WebGPU, and Rapier Physics. ## Core Features & Use Cases - JSON-First Scene Definition: Describe GameObjects with Transform, Geometry, Material, Physics, Model, Light, and Text components in a simple JSON schema, then render them with PrefabEditor or PrefabRoot. - Physics & Game Events: Configure Rapier rigid bodies (dynamic, fixed, kinematic), sensors, and collision events, and wire gameplay logic through a typed game event system. - GLB Export & Editor Tooling: Author scenes visually with transform gizmos, then export the result to GLB format programmatically via exportGLBData. - Use Case: Ask the agent to generate a JSON prefab for a platformer level with a floor, walls, a bouncy ball, and a coin pickup sensor, then export the rendered scene as a GLB asset. ## Quick Start Ask the agent to generate a JSON prefab for a 3D scene with a textured floor, a red box with dynamic physics, and a spotlight, then render it with PrefabEditor.

Frequently Asked Questions about react-three-game

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

FAQPage Schema
How do I create a 3D scene with React Three Fiber using JSON?▼

Define a JSON prefab with a root GameObject containing children, each with components like Transform, Geometry, and Material. Pass it to PrefabEditor or PrefabRoot from react-three-game to render the Three.js scene without writing imperative code.

How to add physics to objects in a React Three Fiber game?▼

Add a Physics component to the GameObject with a type of dynamic, fixed, kinematicPosition, or kinematicVelocity, plus properties like mass, restitution, and friction. The engine uses Rapier Physics, and fixed bodies are cheapest for static objects like floors and walls.

Can I export a React Three Fiber scene to GLB format?▼

Yes, use the exportGLBData function from react-three-game with the scene root obtained via the PrefabEditor ref. It returns an ArrayBuffer containing the GLB data, ready for upload or storage.

Why do physics objects slide off tilted walls in Rapier?▼

Tilted surfaces do not contain dynamic objects because gravity pulls them along the slope. Build containers from walls perpendicular to gravity instead, using fixed physics bodies positioned on each side of the play area.

How do I detect collisions and trigger zones in a 3D game?▼

Set sensor: true on a Physics component to create a trigger zone, then subscribe with useGameEvent to sensor:enter and sensor:exit events. Add activeCollisionTypes: 'all' if kinematic bodies need to detect walls or floors.

When should I use instanced models versus regular physics objects?▼

Use instanced: true for many copies of the same static model like trees or rocks, since all instances share one draw call. Avoid it for objects needing individual force control or dynamic behavior, as instanced bodies are not individually accessible.