43 lines
1.7 KiB
Markdown
43 lines
1.7 KiB
Markdown
# React Three Fiber Stack
|
|
|
|
This is the default React-native 3D stack for the plugin.
|
|
|
|
## Primary components
|
|
|
|
- [React Three Fiber](https://r3f.docs.pmnd.rs/getting-started/introduction) for declarative Three.js rendering in React.
|
|
- [Drei](https://drei.docs.pmnd.rs/controls/introduction) for controls, loaders, helpers, environments, and common scene utilities.
|
|
- [React Postprocessing](https://react-postprocessing.docs.pmnd.rs/introduction) for effect composition in React-hosted scenes.
|
|
- [React Three Rapier](https://pmndrs.github.io/react-three-rapier/) for physics integration.
|
|
- [React Three A11y](https://a11y.docs.pmnd.rs/introduction) when scene interaction benefits from accessibility-aware patterns.
|
|
- [glTF Transform](https://gltf-transform.dev/) and the [glTF 2.0 specification](https://registry.khronos.org/glTF/specs/2.0/glTF-2.0.html) 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`
|