@react-three/xr v6.4.3
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. | ![]() |
---|
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 (
<>
<button onClick={() => store.enterAR()}>Enter AR</button>
<Canvas>
<XR store={store}>
<mesh pointerEventsType={{ deny: 'grab' }} onClick={() => setRed(!red)} position={[0, 1, -1]}>
<boxGeometry />
<meshBasicMaterial color={red ? 'red' : 'blue'} />
</mesh>
</XR>
</Canvas>
</>
)
}
How to enable XR for your @react-three/fiber app?
const store = createXRStore()
create a xr storestore.enterAR()
call enter AR when clicking on a button<XR>...</XR>
wrap your content with the XR component
... or read this guide for converting a react-three/fiber app to XR.
Tutorials
- đž Store
- đ Interactions
- đ§ Options
- đ§ Object Detection
- â´ Origin
- đĒ Teleport
- đšī¸ Gamepad
- â Secondary Input Sources
- đē Layers
- đŽ Custom Controller/Hands/...
- âī¸ Anchors
- đą Dom Overlays
- đ¯ Hit Test
- ⨠Guards
Roadmap
- đ¤ŗ XR Gestures
- đē Tracked Body
- â react-three/controls
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!
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
12 months ago
11 months ago
11 months ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago