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?

1. const store = createXRStore() create a xr store
2. store.enterAR() call enter AR when clicking on a button
3. <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
• 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!