1.7 KiB
1.7 KiB
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/a11ywhen 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.mdreact-three-fiber-starter.mdgltf-loading-starter.mdrapier-integration-starter.mdweb-3d-asset-pipeline.mdwebgl-debugging-and-performance.md