xr

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. | !recording of interacting with the code below |
| ---------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- |

`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 (
<>
store.enterAR()}>Enter AR


setRed(!red)} position={[0, 1, -1]}>






)
}
`

$3

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.

Tutorials

- 💾 Store
- 👆 Interactions
- 👌 Handles
- 🔧 Options
- 🧊 Object Detection
- ✴ Origin
- 🪄 Teleport
- 🕹️ Gamepad
- ➕ Secondary Input Sources
- 📺 Layers
- 🎮 Custom Controller/Hands/...
- ⚓️ Anchors
- 📱 Dom Overlays
- 🎯 Hit Test
- ⛨ Guards

External Tutorials

- 🥇 WebXR First Steps React by Meta Quest

Roadmap

- 🤳 XR Gestures
- 🕺 Tracked Body

Migration guides

- from @react-three/xr v5
- from natuerlich

Sponsors

This project is supported by a few companies and individuals building cutting-edge 3D Web & XR experiences. Check them out!

!Sponsors Overview