pmndrs/xr

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?

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 (
    <>
       store.enterAR()}>Enter AR
      
        
           setRed(!red)} position={[0, 1, -1]}>
            
            
          
        
      
    
  )
}

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. ... wrap your content with the XR component

… or read this guide for converting a react-three/fiber app to XR.

Tutorials

• 💾 Store
• 👆 Interactions
• 👌 Handles
• 🧊 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

Migration guides

• from @react-three/xr v5
• from natuerlich

Agent skills

This package ships a usage skill for coding agents, matching the installed version. Install it with skills-npm, which links the skills of your installed packages for your agent:

npm i -D skills-npm
npx skills-npm setup

Sponsors

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