https://github.com/pmndrs/xr

🤳 VR/AR for react-three-fiber
https://github.com/pmndrs/xr

ar react react-three-fiber vr webxr

Last synced: 4 days ago
JSON representation

🤳 VR/AR for react-three-fiber

• Host: GitHub
• URL: https://github.com/pmndrs/xr
• Owner: pmndrs
• License: other
• Created: 2020-05-10T21:34:01.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2024-11-28T09:42:21.000Z (16 days ago)
• Last Synced: 2024-12-06T04:34:43.717Z (8 days ago)
• Topics: ar, react, react-three-fiber, vr, webxr
• Language: TypeScript
• Homepage: https://pmndrs.github.io/xr/docs/
• Size: 107 MB
• Stars: 2,220
• Watchers: 37
• Forks: 159
• Open Issues: 20
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

• awesome-list - react-xr - three-fiber | pmndrs | 777 | (JavaScript)

README

        


  



xr

Turn any R3F app into an interactive immersive experience.






  

    

  

  

    

  

  

    

  

  

    

  



```bash

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](./docs/getting-started/basic-example.gif) |

| ---------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- |

```tsx

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](https://docs.pmnd.rs/xr/getting-started/convert-to-xr).

## Tutorials

- 💾 [Store](https://docs.pmnd.rs/xr/tutorials/store)

- 👌 [Interactions](https://docs.pmnd.rs/xr/tutorials/interactions)

- 🔧 [Options](https://docs.pmnd.rs/xr/tutorials/options)

- 🧊 [Object Detection](https://docs.pmnd.rs/xr/tutorials/object-detection)

- ✴ [Origin](https://docs.pmnd.rs/xr/tutorials/origin)

- 🪄 [Teleport](https://docs.pmnd.rs/xr/tutorials/teleport)

- 🕹️ [Gamepad](https://docs.pmnd.rs/xr/tutorials/gamepad)

- ➕ [Secondary Input Sources](https://docs.pmnd.rs/xr/tutorials/secondary-input-sources)

- 📺 [Layers](https://docs.pmnd.rs/xr/tutorials/layers)

- 🎮 [Custom Controller/Hands/...](https://docs.pmnd.rs/xr/tutorials/custom-inputs)

- ⚓️ [Anchors](https://docs.pmnd.rs/xr/tutorials/anchors)

- 📱 [Dom Overlays](https://docs.pmnd.rs/xr/tutorials/dom-overlay)

- 🎯 [Hit Test](https://docs.pmnd.rs/xr/tutorials/hit-test)

- ⛨ [Guards](https://docs.pmnd.rs/xr/tutorials/guards)

## Roadmap

- 🤳 XR Gestures

- 🕺 Tracked Body

- ↕ react-three/controls

## Migration guides

- from [@react-three/xr v5](https://docs.pmnd.rs/xr/migration/from-react-three-xr-5)

- from [natuerlich](https://docs.pmnd.rs/xr/migration/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](https://bbohlender.github.io/sponsors/screenshot.png)