Awesome

<p align="center"> <img src="./docs/getting-started/logo.svg" width="100" /> </p> <h1 align="center">xr</h1> <h3 align="center">Turn any R3F app into an interactive immersive experience.</h3> <br/> <p align="center"> <a href="https://npmjs.com/package/@react-three/xr" target="_blank"> <img src="https://img.shields.io/npm/v/@react-three/xr?style=flat&colorA=000000&colorB=000000" alt="NPM" /> </a> <a href="https://npmjs.com/package/@react-three/xr" target="_blank"> <img src="https://img.shields.io/npm/dt/@react-three/xr.svg?style=flat&colorA=000000&colorB=000000" alt="NPM" /> </a> <a href="https://twitter.com/pmndrs" target="_blank"> <img src="https://img.shields.io/twitter/follow/pmndrs?label=%40pmndrs&style=flat&colorA=000000&colorB=000000&logo=twitter&logoColor=000000" alt="Twitter" /> </a> <a href="https://discord.gg/ZZjjNvJ" target="_blank"> <img src="https://img.shields.io/discord/740090768164651008?style=flat&colorA=000000&colorB=000000&label=discord&logo=discord&logoColor=000000" alt="Discord" /> </a> </p>

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 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
🕺 Tracked Body
↕ react-three/controls

Migration guides

from @react-three/xr v5
from natuerlich