@react-three/xr NPM | npm.io

6.6.17 • Published 6 months ago

Install

Weekly downloads

169

License

SEE LICENSE IN LI...

Repository

Last release

6 months ago

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

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!

Sponsors Overview

r3f xr ar vr three.js react typescript

suspend-react tunnel-rat zustand @pmndrs/pointer-events @pmndrs/xr

10 months ago

6.4.12-alpha.36

10 months ago

6.4.12-alpha.33

10 months ago

6.4.12-alpha.31

10 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

8 months ago

9 months ago

8 months ago

8 months ago

6.4.12-alpha.54

10 months ago

6.4.12-alpha.48

10 months ago

6.4.12-alpha.46

10 months ago

10 months ago

8 months ago

7 months ago

7 months ago

7 months ago

6 months ago

6 months ago

6 months ago

1 year ago

1 year ago

12 months ago

12 months ago

12 months ago

8 months ago

12 months ago

12 months ago

11 months ago

11 months ago

10 months ago

10 months ago

9 months ago

10 months ago

9 months ago

9 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago