Introduction

🤳 XR for react-three-fiber

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>
  </>
}

Turn any @react-three/fiber app into an XR experience

const store = createXRStore() create a xr store
store.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

Roadmap

🤳 XR Gestures
➕ Multimodal
📺 Layers
🕺 Tracked Body
↕ react-three/controls

Migration guides

from @react-three/xr v5
from natuerlich

What does it look like?

Turn any @react-three/fiber app into an XR experience

Tutorials

Roadmap

Migration guides

Sponsors