# xr **Repository Path**: mirrors_pmndrs/xr ## Basic Information - **Project Name**: xr - **Description**: đŸ¤ŗ VR/AR for react-three-fiber - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: main - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2024-07-18 - **Last Updated**: 2026-02-08 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README

xr

Turn any R3F app into an interactive immersive experience.


NPM NPM Twitter Discord

```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 ( <> 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) - 👌 [Handles](https://docs.pmnd.rs/xr/handles/introduction) - 🔧 [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) ## External Tutorials - đŸĨ‡ [**WebXR First Steps React** by Meta Quest](https://github.com/meta-quest/webxr-first-steps-react) ## Roadmap - đŸ¤ŗ XR Gestures - đŸ•ē Tracked Body ## 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)