@react-three/xr
v6.2.15 r3f xr ar vr three.js react typescript
xr
Turn any R3F app into an interactive immersive experience.
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!
npm i @react-three/xr
Metadata
- SEE LICENSE IN LICENSE
- Whatever
- Bela Bohlender
- released 10/17/2024