pmndrs/xr

最近记录的来源活动: 2026年10月13日 23:17

SkillsMP 收录数据更新: 2026年11月12日 12:52

已收集 skills: 5

GitHub 星标: 2,622
GitHub Forks: 206

用 AI 助手安装

复制这段 Prompt，发给你正在使用的 AI 助手。

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

仓库 README

仓库 README 来源：README.md

查看 README 源文件

展开完整 README

<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)

正在加载仓库 README…

这个仓库中的 skills

职业分类待补全

skill

职业分类

描述

更新

pmndrs-handle

未分类

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…

原文语言：英语

2026-10-13

pmndrs-pointer-events

未分类

Use @pmndrs/pointer-events to give a plain three.js scene DOM-style pointer events (click, hover, drag with pointer capture) from mouse/touch, XR controllers, hands, or custom inputs, and to forward events through render-target screens or portals. Use when…

原文语言：英语

2026-10-13

react-three-handle

未分类

Use @react-three/handle to let users move, rotate, and scale objects or the camera in React Three Fiber, with mouse, touch, XR controllers, and hands alike — draggable objects, door/lever-style constrained handles, editor gizmos (TransformHandles,…

原文语言：英语

2026-10-13

react-three-xr

未分类

Use @react-three/xr to build or convert React Three Fiber apps into VR/AR (WebXR) experiences — session setup, controller/hand/gaze input and its customization, pointer interactions, moving the user (origin, teleport, thumbstick locomotion), AR features (hit…

原文语言：英语

2026-10-13

pmndrs-xr

未分类

Use @pmndrs/xr to turn a plain three.js app into a VR/AR (WebXR) experience — session setup, default controllers/hands/gaze with pointer interactions, custom inputs, origin and teleport, controller locomotion, AR hit test and anchors, and layers. Use for…

原文语言：英语

2026-10-13

已展示 5 / 5 个已收集 Skill。