Genarrative/.codex/plugins/game-studio/references/react-three-fiber-stack.md

React Three Fiber Stack

This is the default React-native 3D stack for the plugin.

Primary components

• React Three Fiber for declarative Three.js rendering in React.
• Drei for controls, loaders, helpers, environments, and common scene utilities.
• React Postprocessing for effect composition in React-hosted scenes.
• React Three Rapier for physics integration.
• React Three A11y when scene interaction benefits from accessibility-aware patterns.
• glTF Transform and the glTF 2.0 specification for shipped assets.

Default stack choices

• Runtime: @react-three/fiber + three
• Helper ecosystem: @react-three/drei
• Physics: @react-three/rapier
• Effects: @react-three/postprocessing
• Accessibility: @react-three/a11y when appropriate
• Assets: GLB or glTF 2.0

Choose this stack when

• the 3D scene lives inside a React app
• the UI shell, settings, or product flow already uses React
• the team benefits from declarative scene composition
• the scene must share app state with non-canvas UI

Avoid this stack when

• the project wants a cleaner imperative loop with minimal React coordination
• the whole game runtime would be easier to reason about in plain TypeScript

Companion references

• threejs-stack.md
• react-three-fiber-starter.md
• gltf-loading-starter.md
• rapier-integration-starter.md
• web-3d-asset-pipeline.md
• webgl-debugging-and-performance.md