pmndrs · taeuscherpferd · Oct 13, 2025 · Oct 15, 2025 · Oct 15, 2025 · Oct 16, 2025
diff --git a/.github/workflows/static.yml b/.github/workflows/static.yml
@@ -132,6 +132,7 @@ jobs:
           mkdir -p public/examples/hit-testing
           mkdir -p public/examples/uikit
           mkdir -p public/examples/portal
+          mkdir -p public/examples/heads-up-display
           cp -r ./examples/minecraft/dist/* ./public/examples/minecraft
           cp -r ./examples/pingpong/dist/* ./public/examples/pingpong
           cp -r ./examples/rag-doll/dist/* ./public/examples/rag-doll
@@ -144,6 +145,7 @@ jobs:
           cp -r ./examples/hit-testing/dist/* ./public/examples/hit-testing
           cp -r ./examples/uikit/dist/* ./public/examples/uikit
           cp -r ./examples/portal/dist/* ./public/examples/portal
+          cp -r ./examples/heads-up-display/dist/* ./public/examples/heads-up-display
 
       - name: Upload Artifact
         uses: actions/upload-artifact@v4

diff --git a/docs/advanced/performance.md b/docs/advanced/performance.md
@@ -1,7 +1,7 @@
 ---
 title: Performance
 description: Important considerations for building performant immersive web applications with react-three/xr
-nav: 22
+nav: 23
 ---
 
 All performance optimizations for non-immersive 3D web applications are also applicable for immersive XR web applications. Relevant guides on the topic of performance for 3D web applications are the [R3F performance guide](https://docs.pmnd.rs/react-three-fiber/advanced/scaling-performance), [R3F performance pitfalls](https://docs.pmnd.rs/react-three-fiber/advanced/pitfalls), and the [Threejs tips and tricks](https://discoverthreejs.com/tips-and-tricks/#performance). In general, it is good to check if your web application's performance is GPU- or CPU-bound to select the correct optimization techniques.

diff --git a/docs/handles/handle-component.md b/docs/handles/handle-component.md
@@ -1,7 +1,7 @@
 ---
 title: Handle Component  
 description: The Handle and HandleTarget components and their properties  
-nav: 24  
+nav: 25  
 ---
 
 The `Handle` component is the core component of the `@react-three/handle` library, which is built on the `HandleStore`. This store provides developers with more control over the current state and user interactions.

diff --git a/docs/handles/introduction.md b/docs/handles/introduction.md
@@ -1,7 +1,7 @@
 ---
 title: Handles  
 description: Easily build 3D interactions using the concept of handles  
-nav: 23  
+nav: 24  
 ---
 
 Handles are everywhere, from scrollbar thumbs to window bars to door handles.

diff --git a/docs/handles/prebuild-handles.md b/docs/handles/prebuild-handles.md
@@ -1,7 +1,7 @@
 ---
 title: Prebuilt Handles for Editor Use Cases  
 description: The Handle and HandleTarget components and their properties  
-nav: 25  
+nav: 26  
 ---
 
 The `Handle` component allows for the orchestration of multiple handles together to achieve interactions typically found in 3D editors, such as the `TransformControls` offered by Three.js. Since these prebuilt handles are commonly used, `@react-three/handles` includes two of them: `TransformHandles` (based on TransformControls from Three.js) and `PivotHandles` (based on PivotControls from @react-three/drei). These prebuilt handles can be used in XR and non-XR environments, are highly configurable for use cases including multi-user editing, can be utilized through virtual screens, and respect the event system of the scene, preventing accidental interactions with multiple objects at once.

diff --git a/docs/handles/screen-handle-components.md b/docs/handles/screen-handle-components.md
@@ -1,7 +1,7 @@
 ---
 title: Screen Handles  
 description: Orbit and Map Handles as replacements for Orbit and Map controls  
-nav: 26  
+nav: 27  
 ---
 
 Screen handles are available for screen-based devices like smartphones and PCs and allow users to move the camera by dragging, swiping, and scrolling on the screen. Three.js directly offers `OrbitControls` and `MapControls`, which are built for this purpose, and we are building on top of their success. The main difference is that the `OrbitHandles` and `MapHandles` we provide use the event system of the scene, which means that interactions with objects in the scene prevent dragging the camera. Furthermore, the event system can forward the screen inputs on a virtual screen to a virtual camera inside a virtual scene, which is showcased in the [editor example](https://pmndrs.github.io/xr/examples/editor/).

diff --git a/docs/migration/from-natuerlich.md b/docs/migration/from-natuerlich.md
@@ -1,7 +1,7 @@
 ---
 title: from Natuerlich
 description: Migrate your application from natuerlich
-nav: 24
+nav: 25
 ---
 
 @react-three/xr is inspired by natuerlich, and therefore, many things are similar, especially the way interactions are handled. However, a few things have been changed and renamed.

diff --git a/docs/migration/from-react-three-xr-5.md b/docs/migration/from-react-three-xr-5.md
@@ -1,7 +1,7 @@
 ---
 title: from @react-three/xr v5
 description: Migrate your application from @react-three/xr v5
-nav: 23
+nav: 24
 ---
 
 The goal of @react-three/xr v6 is to align this library closer to the react-three ecosystem. We, therefore, focussed on supporting the react-three/fiber event handlers. Another focus of v6 is to reduce boilerplate and provide more defaults while also giving developers more access to the lower-level WebXR primitives. In combination, these changes allow developers to build XR experiences that interoperate with the whole react-three ecosystem using only a few lines of code. 

diff --git a/docs/tutorials/HUD_example_3rd_person.gif b/docs/tutorials/HUD_example_3rd_person.gif
diff --git a/docs/tutorials/HUD_example_POV.png b/docs/tutorials/HUD_example_POV.png
diff --git a/docs/tutorials/anchors.md b/docs/tutorials/anchors.md
@@ -1,7 +1,7 @@
 ---
 title: Anchors
 description: How to create and manage anchors in your AR experience?
-nav: 17
+nav: 18
 ---
 
 Anchors allow to anchor virtual objects into the physical world in AR experiences. `react-three/xr` offers a multitude of ways to create and manage anchors. A simple solution is `useXRAnchor`, which works similarly to `useState` as it returns the current anchor and a function to request a new anchor as a tuple.

diff --git a/docs/tutorials/custom-inputs.md b/docs/tutorials/custom-inputs.md
@@ -1,7 +1,7 @@
 ---
 title: Custom Hands/Controllers/...
 description: Customize interactions and style of inputs such as hands, controllers, and more
-nav: 16
+nav: 17
 ---
 
 @react-three/xr provides a set of default hands, controllers, transient pointers, gazes, and screen input that can be configured and completely exchanged with your own implementation. The following example shows how to configure the ray color of the ray pointer in the users hand.

diff --git a/docs/tutorials/dom-overlay.md b/docs/tutorials/dom-overlay.md
@@ -1,7 +1,7 @@
 ---
 title: Dom Overlay
 description: How to add HTML elements for hand-held AR experiences with Dom overlay?
-nav: 18
+nav: 19
 ---
 
 For hand-held AR experiences, such as those using a Smartphone, WebXR offers the dom overlay capability, allowing developers to use HTML code overlayed over the experience. In case scene 3D overlays or overlays in non-handheld AR/VR experiences are needed, check out [pmndrs/uikit](https://github.com/pmndrs/uikit).

diff --git a/docs/tutorials/gamepad.md b/docs/tutorials/gamepad.md
@@ -1,7 +1,7 @@
 ---
 title: Gamepad
 description: How to use the XRControllers gamepad?
-nav: 13
+nav: 14
 ---
 
 All XR controllers are part of the state inside the xr store. The existing controllers can be read using the `useXR` hook. Alternatively, a specific xr controller can be retrived using `useXRInputSourceState("controller", "left")`.

diff --git a/docs/tutorials/guards.md b/docs/tutorials/guards.md
@@ -1,7 +1,7 @@
 ---
 title: Guards
 description: Render and show parts of your application conditionally using guards
-nav: 20
+nav: 21
 ---
 
 Guards allow to conditionally display or include content. For instance, the `IfInSessionMode` guard allows only displaying a background when the session is not an AR session. The `IfInSessionMode` can receive either a list of `allow` session modes or a list of `deny` session modes.