/xr

🤳 VR/AR for react-three-fiber

Primary LanguageTypeScriptOtherNOASSERTION

xr

Turn any R3F app into an interactive immersive experience.


NPM NPM Twitter Discord

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

Roadmap

  • 🤳 XR Gestures
  • 🕺 Tracked Body
  • ↕ react-three/controls

Migration guides

Sponsors

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

Sponsors Overview