Turn any R3F app into an interactive immersive experience.
```bash
npm install three @react-three/fiber @react-three/xr@latest
```
## What does it look like?
| A simple scene with a mesh that toggles its material color between `"red"` and `"blue"` when clicked through touching or pointing. |  |
| ---------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- |
```tsx
import { Canvas } from '@react-three/fiber'
import { XR, createXRStore } from '@react-three/xr'
import { useState } from 'react'
const store = createXRStore()
export function App() {
const [red, setRed] = useState(false)
return (
<>
)
}
```
### How to enable XR for your @react-three/fiber app?
1. `const store = createXRStore()` create a xr store
2. `store.enterAR()` call enter AR when clicking on a button
3. `...` wrap your content with the XR component
... or read this guide for [converting a react-three/fiber app to XR](https://docs.pmnd.rs/xr/getting-started/convert-to-xr).
## Tutorials
- đž [Store](https://docs.pmnd.rs/xr/tutorials/store)
- đ [Interactions](https://docs.pmnd.rs/xr/tutorials/interactions)
- đ [Handles](https://docs.pmnd.rs/xr/handles/introduction)
- đ§ [Options](https://docs.pmnd.rs/xr/tutorials/options)
- đ§ [Object Detection](https://docs.pmnd.rs/xr/tutorials/object-detection)
- â´ [Origin](https://docs.pmnd.rs/xr/tutorials/origin)
- đĒ [Teleport](https://docs.pmnd.rs/xr/tutorials/teleport)
- đšī¸ [Gamepad](https://docs.pmnd.rs/xr/tutorials/gamepad)
- â [Secondary Input Sources](https://docs.pmnd.rs/xr/tutorials/secondary-input-sources)
- đē [Layers](https://docs.pmnd.rs/xr/tutorials/layers)
- đŽ [Custom Controller/Hands/...](https://docs.pmnd.rs/xr/tutorials/custom-inputs)
- âī¸ [Anchors](https://docs.pmnd.rs/xr/tutorials/anchors)
- đą [Dom Overlays](https://docs.pmnd.rs/xr/tutorials/dom-overlay)
- đ¯ [Hit Test](https://docs.pmnd.rs/xr/tutorials/hit-test)
- ⨠[Guards](https://docs.pmnd.rs/xr/tutorials/guards)
## External Tutorials
- đĨ [**WebXR First Steps React** by Meta Quest](https://github.com/meta-quest/webxr-first-steps-react)
## Roadmap
- đ¤ŗ XR Gestures
- đē Tracked Body
## Migration guides
- from [@react-three/xr v5](https://docs.pmnd.rs/xr/migration/from-react-three-xr-5)
- from [natuerlich](https://docs.pmnd.rs/xr/migration/from-natuerlich)
## Sponsors
This project is supported by a few companies and individuals building cutting-edge 3D Web & XR experiences. Check them out!
