pmndrs/xr

Dernière activité source enregistrée: 13 octobre 2026 à 23:17

Catalogue SkillsMP mis à jour: 12 novembre 2026 à 12:52

skills collectés: 5

Étoiles GitHub: 2 622
Forks GitHub: 206

Installer avec un assistant IA

Copiez ce prompt dans l’assistant IA que vous utilisez.

Follow https://skillsmp.com/skill-install/prompt.md to install Agent Skills from https://github.com/pmndrs/xr.

README du dépôt

Fichier source du README : README.md

Lire le README source

Afficher le README complet

<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> ```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 ( <> <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? 1. `const store = createXRStore()` create a xr store 2. `store.enterAR()` call enter AR when clicking on a button 3. `<XR>...</XR>` 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) - 🧊 [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) ## 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) ## Agent skills This package ships a usage skill for coding agents, matching the installed version. Install it with [skills-npm](https://github.com/antfu/skills-npm), which links the skills of your installed packages for your agent: ```bash 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! ![Sponsors Overview](https://bbohlender.github.io/sponsors/screenshot.png)

Chargement du README du dépôt…

Skills dans ce dépôt

classification en attente

skill

métier

description

mis à jour

pmndrs-handle

non classé

Use @pmndrs/handle to let users move, rotate, and scale objects or the camera in a plain three.js scene with mouse, touch, XR controllers, and hands — draggable objects, constrained handles (doors, levers), editor gizmos (TransformHandles, PivotHandles), and…