22:I[874149,["$2","$3","$4","$5","$19","$1a","$1b","$1c","$1d"],"DocsContext"] 23:I[646441,["$2","$3","$4","$5","$19","$1a","$1b","$1c","$1d","$1e"],"Code"] 24:I[551435,["$2","$3","$4","$5","$19","$1a","$1b","$1c","$1d","$1e"],"Table"] 25:I[551435,["$2","$3","$4","$5","$19","$1a","$1b","$1c","$1d","$1e"],"TableHeader"] 26:I[551435,["$2","$3","$4","$5","$19","$1a","$1b","$1c","$1d","$1e"],"TableRow"] 27:I[551435,["$2","$3","$4","$5","$19","$1a","$1b","$1c","$1d","$1e"],"TableHead"] 49:T781, In case your app is already an R3F app build with natuerlich or @react-three/xr v5. Check out the migration guides for natuerlich and @react-three/xr v5. The first step is to install the latest version of react-three/xr. npm install @react-three/xr@latest Next, we import the createXRStore and create a xr store. import { createXRStore, XR } from '@react-three/xr' const store = createXRStore() Using the store, we can set up a way for the user to enter the XR experience. For this example, we will just add 2 HTML buttons above your canvas. <>

Lastly, use the store to setup the XR component to wrap your scene. <>

Your application is now useable with an AR or VR headset. If something did not work as expected, check out the FAQ, create an issue on github, or message us on Discord. With this basic XR setup, you can start expanding the features of your XR application. The following questions might help you in integrating those features. How do I move around in my scene? ↳ Checkout out the tutorial about XROrigin or Teleportation. How can I customize the way my hands/controllers/... feel, look, or interact with the scene? ↳ Check out the tutorial about Custom Hands/Controllers/.... How do interactions work in XR, and how can I build more advanced interactions? ↳ Check out the tutorial about Interactions How can I leverage the mixed reality features of my headset, such as Plane Detection? ↳ Check out the tutorial about Object Detection What else can I do? I need inspiration. ↳ Check out the examples.4d:T545, Developing WebXR experiences often requires testing WebXR-specific features, which either require an actual device or an emulator. An emulator allows testing without a specific device and without continuously switching a headset on and off. react-three/xr includes the iwer/devui emulator out of the box, which is in its 0.x status and very much experimental in its current stage. The emulator builds on IWER by Meta Quest and adds a easy to use overlay on top of your application. The emulator is automatically injected if the emulate config has inject set to true, or if the app is served on localhost and if no WebXR support is detected. In case the emulator was not injected automatically, the user can inject it by pressing Window/Command + Alt/Option + E. After the emulator is injected, the user can press the button to enter the XR experience provided by the application. The existing Immersive Web Emulator is a extension that provides similar emulation but its current version (1.x) is not supported because it does not comply to the WebXR spec. Starting with IWE 2.0, iwer/devui will be integrated into IWE, making it compatible with react-three/xr. If you have IWE 1.x installed and active, please turn them off, as it will prevent activiting the integrated iwer/devui. Another supported alternative is the Apple Vision Pro Simulator. 58:T14ca, When creating a xr store, there are a lot of options that can be used for configuration. For instance, we can use these options to disable the default controller on the left hand. createXRStore({ controller: { left: false }, }) The following tables show all the available options. Property Description Default Value controller Configures the or allows providing a custom implementation. You can set this for each handedness (e.g., left or right hand) individually. Setting this to false prevents the controllers from being used. true transientPointer Configures the or allows providing a custom implementation. This can be set individually for each handedness. Setting this to false prevents transient pointers from being used. N/A hand Configures the or allows providing a custom implementation. You can set this individually for each handedness. Setting this to false prevents hand tracking from being used. N/A gaze Configures the or allows providing a custom gaze implementation. Setting this to false prevents gaze-based interaction from being used. true screenInput Configures the or allows providing a custom screen input implementation. Setting this to false prevents screen input from being used. true emulate Emulates a specific device (e.g., "metaQuest3") using IWER if WebXR is not supported and running on "localhost" or pressing Window/Command + Alt/Option + E. It can also be set to false to disable emulation. "metaQuest3" frameRate Sets the session's framerate, with options such as "high" for smoother performance. "high" foveation Sets the WebXR foveation level between 0 (no foveation) and 1 (maximum foveation). If undefined, the device/browser's default foveation setting is used. undefined frameBufferScaling Adjusts the framebuffer scaling of the session. If undefined, the device/browser's default scaling is used (typically 1). undefined enterGrantedSession Automatically enters session modes when granted by the system without manually requesting a session. It can be an array of session modes or a boolean value to enable/disable this feature. true baseAssetPath Specifies the path to load the controller and hand models, and controller profiles from a CDN or local source. 'https://cdn.jsdelivr.net/npm/@webxr-input-profiles/assets@1.0/dist/profiles/' defaultControllerProfileId Specifies the fallback profile ID for the controller if no matching profile is found. It is useful for ensuring basic functionality when a specific controller profile isn't available. 'generic-trigger' defaultXRHandProfileId Specifies the fallback profile ID for hand tracking if no matching profile is found. It ensures basic hand-tracking functionality. 'generic-hand' bounded Enables or disables the session bounds. false means unbounded (only available in AR). true means bounded (allows to reference the bounding space). undefined means bounded but no access to bounding space. undefined anchors Enables or disables anchors, which are fixed points in the XR environment that can be used to attach virtual objects. true handTracking Enables or turns off hand-tracking in the session, allowing users to interact with the XR environment using their hands. true (false for Apple Vision Pro) layers Enables or turns off the use of layers in the session, which can enhance rendering performance by stacking visual content. true meshDetection Enables or turns off mesh detection, allowing the system to recognize and interact with real-world objects by detecting their mesh. true planeDetection Enables or turns off plane detection, allowing the system to recognize flat surfaces like floors and tables. true depthSensing Enables or disables depth sensing in the session, which can enhance realism by occluding virtual objects from real-world objects. Can also be an object with the depth sensing options (usagePreference, dataFormatPreference, depthTypeRequest, matchDepthView) and required, e.g. { depthTypeRequest: ['smooth'] }. false customSessionInit Overrides the session initialization object with custom settings. Use with caution, as it can significantly alter the behavior of the XR session. undefined hitTest Enables or turns off hit testing, which allows the system to detect where the user's input (e.g., a tap or gaze) intersects with objects in the XR environment. true domOverlay Enables or turns off DOM overlay in the session or provides a custom DOM element for the overlay, allowing HTML content to be rendered within the XR environment. true secondaryInputSources Enables non-primary (secondary input / tracked) sources. For example, when the device supports hands and controllers, the controllers can be used while the hands are tracked as primary input sources. This can allow to use the tracked controllers for other inputs. false offerSession If not set to false, a session request is automatically send to the browser which can provide a custom ui for the user to start the XR experience. If set to true the system will request an "immersive-ar" session if supported, else an "immersive-vr" session. Alterantively offer session can be directly configured to only enter a "immersive-vr" or "immersive-vr" session. true 59:Ta92, The xr store provides a large set of functions to modify and control the xr store. For instance, key functions are the store.enterAR and store.enterVR functions. The following table gives an overview of the complete set of functions that the xr store provides. Function Description destroy() Irreversibly destroys the XR store. enterXR(mode) Initiates an XR session in the specified mode (such as immersive-ar or immersive-vr). The function returns a promise that eventually resolves with the XR session or undefined if the session fails to start. enterAR() Starts an Augmented Reality (AR) session. The function returns a promise that eventually resolves with the AR session or undefined if AR is not supported. enterVR() Starts a Virtual Reality (VR) session. The function returns a promise that eventually resolves with the VR session or undefined if VR is not supported. onSessionEnd(callback) Subscribes to the session ending, whether through calling session.end() or through hardware/OS triggered termination (e.g. the user removing the headset, the browser closing the session, ...). Returns a function to unsubscribe. Prefer this over session.addEventListener('end', ...), since the session reference can go stale across re-renders. setHand(implementation, handedness?) Updates the hand tracking configuration or implementation. You can target both hands or specify the handedness (left or right). This allows customization or updates to the hand implementation or configuration during runtime. setController(implementation, handedness?) Updates the controller configuration or implementation. You can target both hands or specify the handedness (left or right). This enables dynamic updates to the controller setup. setGaze(implementation) Updates the gaze-based interaction configuration or implementation. This function is used to modify the gaze implementation or configuration. setScreenInput(implementation) Updates the screen input configuration or implementation. This function modifies how screen inputs are handled within the XR session. setTransientPointer(implementation, handedness?) Updates the transient pointer configuration or implementation. You can target both hands or specify the handedness. setFrameRate(value) Sets the framerate of the XR session, adjusting the session's performance and visual smoothness. Higher framerates can improve user experience but may require more processing power. requestFrame() Returns a promise that resolves with the XR frame on the next render. This function is useful for synchronizing actions or processing data in the next render cycle, especially for tasks that need to be aligned with the rendering loop. 5a:T761, Alongside a set of functions, the xr store also provides the state of the current experience. For instance, the state of the xr store contains the current XRSession inside state.session. The following table provides a list of properties available in the state of the xr store. State Property Description session Represents the current XRSession. This object contains all the details and state information about the active XR session. originReferenceSpace Refers to the XRReferenceSpace of the origin in the current session. This space is typically set at the floor level and serves as the reference point for the user's position in the XR environment. origin Represents the 3D object that defines the session's origin. If this object is undefined, the origin is implicitly set at the world position (0,0,0). domOverlayRoot The HTML element used for DOM overlays in handheld AR experiences. This is where any content will be overlayed over the handheld AR session. visibilityState Indicates the session's visibility state, such as "visible-blurred" when the user sees an Operating System overlay. This property helps manage how the XR experience adjusts to different visibility conditions. frameRate Represents the configured framerate for the XR session. Note that the actual framerate might be lower if the system cannot maintain the desired performance level. mode Specifies the current XR session mode, such as immersive-vr, immersive-ar, or inline. If no session is active, this will be null. detectedPlanes A read-only array of XRPlane objects representing the planes detected in the XR environment. These could include surfaces like floors, walls, and tables. detectedMeshes A read-only array of XRMesh objects representing the meshes detected in the XR environment. These are typically 3D objects that have been identified and tracked during the session. 5e:T97c, On this page, you can learn the basics behind pointer events and interactions in react-three/xr. From experience, we found that many people are interested in more high level interactions, which can be build with the concept of handles. Check out the handles pages to learn more about the concept and the library we built for it. @react-three/xr uses the same pointer events as @react-three/fiber, which allows building interactions that work on non-XR devices as well as XR devices. So, just like you'd expect from @react-three/fiber and everywhere else in react, interactions are built using onPointerMove onPointerCancel onPointerDown onPointerUp onPointerEnter onPointerLeave onPointerOver onPointerOut onClick onDblClick onContextMenu onWheel The following example shows how to bind an onClick handler to a mesh that gets executed when the mesh is clicked. This interaction will work in non-XR devices as well as in XR devices using @react-three/xr. console.log("I've been clicked", event)}> The event object provided to the onClick handler contains useful information, such as the intersection point in world space. The way pointer events are handled can be configured using the pointerEvents, pointerEventsType, and pointerEventsOrder properties, which are available on all threejs objects. The pointerEvents property corresponds to the pointerEvents property of CSS, which allows to completely disable pointer events for an element and its children. However, children can also re-enable pointer events by setting pointerEvents="auto". The pointerEventsType property allows to blacklist or whitelist pointer events for specific pointer types. For instance, setting pointerEventsType={{ deny: "grab" }} prevents triggering pointer events from grabbing the object or any of its children. The pointerEventsOrder allows to overwrite the sorting order, similar to how renderOrder allows to overwrite the rendering order in threejs. The default pointer events order is 0. Setting it to a value greater than 0 will ensure it is intersected before anything with a lower pointer events order. Setting pointerEventsOrder is helpful for building an interactive x-ray object that is always rendered above anything else and should, therefore, always be interacted with first. For instance, this can be used to build controls that are overlayed over the object that they control. 5f:T4a2, Another concept that @react-three/fiber leverages from the web is pointer captures. Pointer captures allow to force all consecutive events to be emitted to a specific object, even if that object is not intersected. This is useful for building dragging interactions without a complex global state. Typically, a pointer capture is set using object.setPointerCapture in the event handler of onPointerDown with the pointerId of the pointer that pressed on the object. .The following example illustrates how pointer events can be built to create a simple dragging implementation (that only works if the mesh is not inside a transformed group). function DraggableCube() { const isDraggingRef = useRef(false) const meshRef = useRef(null) return ( { if (isDraggingRef.current) { return } isDraggingRef.current = true meshRef.position.copy(e.point) }} onPointerMove={(e) => { if (!isDraggingRef.current) { return } meshRef.position.copy(e.point) }} onPointerUp={(e) => (isDraggingRef.current = false)} > ) } 66:T478, Since the XROrigin is a react component, it can be placed anywhere, including moving objects. In the following example, we'll create an XR roller coaster. const store = createXRStore({ controller: false, }) export function App() { return ( <>

) } function RollerCoaster() { const gltf = useGLTF('rollercoaster.glb') const mixer = useMemo(() => new AnimationMixer(gltf.scene), []) useEffect(() => { for (const animation of gltf.animations) { mixer.clipAction(animation).play() } }, [gltf, mixer]) useFrame((state, delta) => mixer.update(delta)) return ( <> {createPortal( , gltf.scene.getObjectByName('Sessel')!, )} ) } 6a:T6fb, First we need to enable the teleport pointer inside the hands and controllers. const store = createXRStore({ hand: { teleportPointer: true }, controller: { teleportPointer: true }, }) Secondly, we need to control out own state because that gives us the complete control when teleportation should be mixed with more complex behaviors. Therefore we're using useState to store the current position. But we can also use any other local or global state manager. const [position, setPosition] = useState(new Vector3()) Next, we need to use the position to control the user's origin. Lastly, we need to add a teleport target to our scene. In this case, we're using a simple 10x10 meter green box. We need to bind our setPosition function to the onTeleport handler of the TeleportTarget to update the user's position whenever the user teleports. Combined, this example looks like this. const store = createXRStore({ hand: { teleportPointer: true }, controller: { teleportPointer: true }, }) export function App() { const [position, setPosition] = useState(new Vector3()) return ( <>

) } 6e:T73d, 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"). The xr controller state contains the gamepad state. Based on the name of one specific component, its state can be polled every frame. The following example shows how to read the thumbstick of the right controller to implement locomotion in combination with the XROrigin. To keep the code snipped focussed on the gamepad API, the locomotion does not happen relative to the users head rotation. This can be added by retrieving the users head position from reading the camera world quaternion and extracting the users rotation on the y axis. (There is also a useXRControllerLocomotion hook available to help avoid implementing locomotion from scratch if that is the end goal). const store = createXRStore() export function App() { return ( <>

) } function Locomotion() { const controller = useXRInputSourceState('controller', 'right') const ref = useRef(null) useFrame((_, delta) => { if (ref.current == null || controller == null) { return } const thumstickState = controller.gamepad['xr-standard-thumbstick'] if (thumstickState == null) { return } ref.current.position.x += (thumstickState.xAxis ?? 0) * delta ref.current.position.z += (thumstickState.yAxis ?? 0) * delta }) return } 72:T45b, Most standalone XR headsets support hand and controller tracking. While typical XR experiences often support both input methods, they only use the primary inputs, which refers to one input per hand and limits the inputs to 2. However, the headset often also tracks the secondary input sources. By enabling the secondaryInputSources flag when creating an xr store, we can access the secondary input sources and use them to track real-world objects, for example. createXRStore({ secondaryInputSources: true }) Secondary input sources are exposed to the developer just like primary input sources, with the exception of the isPrimary flat, which is false. The following example illustrates how to show the primary input controllers using the default controller components while rendering the secondary input controllers as simple cubes. createXRStore({ secondaryInputSources: true, controller: () => { const { isPrimary } = useXRInputSourceStateContext('controller') if (isPrimary) { return } return ( ) }, }) 76:T648, Layers allow to render videos, images, and complete scenes with higher performance and higher quality while preserving battery life and latency for quad, cylinder, and equirect shapes using the WebXR Layer API. Layers are perfect for use cases that display flat, high-quality content, such as videos, images, and user interfaces. The following example illustrates how to create a layer that renders a video. First, we create a layer at 0, 1.5, -0.5 with a scale of 0.5 that displays a video assigned to src and starts that video when clicked. video.play()} scale={0.5} src={video} /> The assigned video is an HTML video element that is loaded from test.mp4. const video = useMemo(() => { const result = document.createElement('video') result.src = 'test.mp4' return result }, []) Combined, the final app looks like this export function App() { const video = useMemo(() => { const result = document.createElement('video') result.src = 'test.mp4' return result }, []) return (

) } Instead of images and videos, Layers can also be used to display dynamically rendered content. The following example illustrates how to render a red cube onto the layer. This scene will be re-rendered every frame, allowing for fully dynamic content. 7a:T57f, Let's build our own hand implementation which renders the normal hand model but only has a touch interaction which works using the middle finger. First we're getting the state of the hand, creating a reference to the position of the middle finger, and creating a touch pointer. const state = useXRInputSourceStateContext('hand') const middleFingerRef = useRef(null) const pointer = useTouchPointer(middleFingerRef, state) Next, we use the state to place an XRSpace for setting up the middleFingerRef and add an XRHandModel and PointerCursorModel to render the hand and a cursor visualization. Full Code export function CustomHand() { const state = useXRInputSourceStateContext('hand') const middleFingerRef = useRef(null) const pointer = useTouchPointer(middleFingerRef, state) return ( <> ) } This tutorial also applies to building custom controllers, transient pointers, gaze, and screen input implementations.7e:T69a, 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. const [anchor, requestAnchor] = useXRAnchor() With the requestAnchor function, we can request an anchor relative to the "world", a "space", or a "hitTestResult" requestAnchor({ relativeTo: "space", space: ... }) Once the anchor is created, the useXRAnchor hook exposes it as anchor. We can now use this anchor to put content into it using the component. ...your content The following example shows a Anchor component that uses the useXRAnchor hook and the XRSpace component to anchor a Box to the position of the right hand or controller when the respective hand or controller is selected (pinch/trigger). export function Anchor() { const [anchor, requestAnchor] = useXRAnchor() const controllerState = useXRInputSourceState('controller', 'right') const handState = useXRInputSourceState('hand', 'right') const inputSource = controllerState?.inputSource ?? handState?.inputSource useXRInputSourceEvent( inputSource, 'select', async () => { if (inputSource == null) { return } requestAnchor({ relativeTo: 'space', space: inputSource.targetRaySpace }) }, [requestAnchor, inputSource], ) if (anchor == null) { return null } return ( ) } 82:T5e0, 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. We can add dom overlay content to an experience using the XRDomOverlay component, which allows to write html code inside it. This HTML code will be overlayed over the hand-held AR experience.

Hello World

The following shows the complete code for a simple AR experience with a Hello World button that can toggle its color when clicked on. const store = createXRStore() export function App() { const [bool, setBool] = useState(false) return ( <>

) } 86:T6d2, The useXRHitTest hook is the most commonly used hook for hit testing in the library. It automatically performs hit tests every frame and calls your callback function with the results. What it does: Sets up continuous hit testing that runs every frame, providing real-time intersection data with the real world. When to use it: Use this when you need continuous tracking of where a ray intersects with real-world surfaces, such as for cursor positioning, object placement previews, or interactive AR elements. Parameters: fn - Callback function that receives hit test results and a function to retrieve the world matrix relativeTo - The object, XR space, or reference space to cast rays from. This reference must be static in your scene. trackableType - Optional parameter specifying what types of surfaces to hit test against const matrixHelper = new Matrix4() const hitTestPosition = new Vector3() function ContinuousHitTest() { const previewRef = useRef(null) useXRHitTest( (results, getWorldMatrix) => { if (results.length === 0) return getWorldMatrix(matrixHelper, results[0]) hitTestPosition.setFromMatrixPosition(matrixHelper) }, 'viewer', // Cast rays from the viewer reference space. This will typically be either the camera or where the user is looking 'plane' // Only hit test against detected planes ) useFrame(() => { if (hitTestPosition && previewRef.current) { previewRef.current.position.copy(hitTestPosition) } }) return ( {/* Renders a sphere where the hit test intersects with the plane */} ) } 87:T819, The useXRHitTestSource hook provides lower-level access to hit test sources, giving you more control over when and how hit tests are performed. It is the same as the useXRHitTest hook, the only difference being that you have to manually check for hit test results; typically every frame, or every few frames. What it does: Does the same thing as the useXRHitTest hook, but does not automatically hit test every frame. When to use it: In most cases you should use either useXRHitTest or useXRRequestHitTest, but you can use this hook when you have a static hit test source that you only want to occasionally perform constant hit tests from. Or if you want to recreate the useXRHitTest behavior manually. Parameters: relativeTo - The object, XR space, or reference space to cast rays from trackableType - Optional parameter specifying what types of surfaces to hit test against Returns: A hit test source object that you can use with frame.getHitTestResults() function ManualHitTest() { const meshRef = useRef(null) const hitTestSource = useXRHitTestSource(meshRef) const [someCondition, setSomeCondition] = useState(false) const [hitResults, setHitResults] = useState([]) useFrame((_, __, frame: XRFrame | undefined) => { // Only perform hit testing when certain conditions are met if (frame && hitTestSource && someCondition) { const results = frame.getHitTestResults(hitTestSource.source) setHitResults(results) } }) return ( {/* Render hit test results. This will put spheres everywhere the hit test succeeds. In a real app don't use index as the key */} {hitResults.map((result, index) => { const matrix = new Matrix4() hitTestSource?.getWorldMatrix(matrix, result) const position = new Vector3().setFromMatrixPosition(matrix) return ( ) })} ) } 88:T63c, The useXRRequestHitTest hook provides a function for one-time hit test requests. Useful for event-driven hit testing. Cannot be called in the useFrame hook. What it does: Returns a function that can perform a single hit test request when called. When to use it: Use this for event-driven hit testing, such as when a user taps the screen, clicks a button, or performs a gesture. It's ideal for placing objects or checking intersections at specific moments. Returns: A function that takes the same parameters as other hit test hooks and returns a promise with hit test results const matrixHelper = new Matrix4() function EventDrivenHitTest() { const requestHitTest = useXRRequestHitTest() const [placedObjects, setPlacedObjects] = useState([]) const handleTap = async () => { const hitTestResult = await requestHitTest('viewer', ['plane', 'mesh']) const { results, getWorldMatrix } = hitTestResult if (results?.length > 0) { getWorldMatrix(matrixHelper, results[0]) const position = new Vector3().setFromMatrixPosition(matrixHelper) setPlacedObjects((prev) => [...prev, position]) } } return ( <> {/* Render placed objects */} {placedObjects.map((position, index) => ( ))} ) } 89:T7a5, Here's a complete example combining multiple hooks for a robust object placement system: const matrixHelper = new Matrix4() const hitTestPositionHelper = new Vector3() function ObjectPlacement() { const [placedObjects, setPlacedObjects] = useState([]) const [previewPosition, setPreviewPosition] = useState(null) const controllerRef = useRef(null) // Continuous hit testing for preview useXRHitTest( (results, getWorldMatrix) => { if (results.length > 0) { getWorldMatrix(matrixHelper, results[0]) const position = hitTestPositionHelper.setFromMatrixPosition(matrixHelper) setPreviewPosition(position) } else { setPreviewPosition(null) } }, 'viewer', // Use viewer space for screen-based hit testing ) const placeObject = async () => { if (previewPosition) { setPlacedObjects((prev) => [...prev, previewPosition.clone()]) } } return ( <> {/* Preview object at hit test position */} {previewPosition && ( )} {/* Placed objects */} {placedObjects.map((position, index) => ( ))} {/* Placement trigger */} ) } Alternatively, for devices that provide mesh detection -- such as newer Meta Quest devices -- you can also add normal pointer event listeners to an XR Mesh to achieve the same behavior. Check out this tutorial for more information about mesh detection.93:T80a, Rendering to a WebGLRenderTarget during an immersive XR session needs one extra step compared to a non-XR render loop. Three.js replaces the active camera and framebuffer while gl.xr.enabled and gl.xr.isPresenting are active, so an offscreen pass should temporarily disable XR rendering, render into the target, and then restore the previous renderer state. The important part is to save and restore the render target, viewport, and XR flags around the offscreen render: import { useFrame, useThree } from '@react-three/fiber' import { useMemo } from 'react' import { PerspectiveCamera, Scene, Vector4, WebGLRenderTarget } from 'three' const viewport = new Vector4() function RenderTargetPass() { const { gl } = useThree() const target = useMemo(() => new WebGLRenderTarget(1024, 1024), []) const scene = useMemo(() => new Scene(), []) const camera = useMemo(() => new PerspectiveCamera(50, 1, 0.1, 100), []) useFrame(() => { const previousTarget = gl.getRenderTarget() const previousXrEnabled = gl.xr.enabled const previousIsPresenting = gl.xr.isPresenting gl.getViewport(viewport) gl.xr.enabled = false gl.xr.isPresenting = false gl.setRenderTarget(target) gl.setViewport(0, 0, target.width, target.height) gl.render(scene, camera) gl.setRenderTarget(previousTarget) gl.setViewport(viewport) gl.xr.enabled = previousXrEnabled gl.xr.isPresenting = previousIsPresenting }) return null } If you are rendering content for an XRLayer, prefer the layer API instead of wiring this manually. XRLayer accepts children for dynamic content and uses the same state-preserving offscreen render pattern internally. Use a manual render target when you need the resulting texture for a material, post-processing pass, portal, minimap, or another non-layer effect. Use XRLayer when the goal is to display high-quality flat, cylinder, or equirect content in XR.97:Ta4d, Handles are everywhere, from scrollbar thumbs to window bars to door handles. Handles make it possible to move, rotate, and scale 2D or 3D objects using intuitive gestures. @react-three/handle makes it super simple to build these intuitive 3D handles for XR and non-XR devices with only a few lines of code. Let's showcase that while building a 3D door. Door model from witnessk To build our door, we have two components: the door handle and the door body, which the handle should rotate when grabbed. Therefore, the door body is the handle target, on which the transformations from the handle should be applied. We can build this door by downloading the GLTF model from Sketchfab and transforming the model into its individual parts using gltfjsx. This separates the door frame, the door body, and the door handle, allowing us to wrap the door handle with the component and the door body with the component. export function Door() { const { nodes, materials } = useGLTF('/door.glb') return ( ) } Next, we need to configure the handle to rotate the door when grabbed. We instruct it to use the target from the context using targetRef="from-context", making sure the transformations are applied to the door body. Additionally, we ensure that moving the handle is translated into a rotation using the translate="as-rotate" property. Lastly, we disable rotations on all axes except for the z axis and limit the rotation between -180° and 0°. Learn more about all the available properties for the handle component here. The final result looks like this (I added an additional handle around the door handle that allows it to rotate on its own y-axis). 9b:T4d7, 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. For everybody that is transitioning from v5 to v6, we have created a small compatibility layer that includes XRButton, ARButton, VRButton, useInteraction, useXREvent, Interactive, and RayGrab. However, we recommend transitioning away from the compatibility layer as the new recommended way of building with @react-three/xr is more aligned with the whole react-three ecosystem. For the Controllers and Hands components there are not correspondances in @react-three/xr v6 since input methods such as controllers, hands, but also transient-pointers are added by default. Users can configure the default implementation of those input methods as described here. The teleportation feature of @react-three/xr v5 has also slightly changed. The new API is explained here.9f:Tcd3, handleRef Allows overriding to pass a custom handle object. targetRef Allows to pass in a ref to an object that should be the target of the handle. Alternatively targetRef can be set to "from-context" use the target provided by a surrounding HandleTarget component. getHandleOptions Allows passing a function that dynamically generates options to override the current handle options. bind Allows disabling automatic binding of the event listeners to the provided handle, which can be necessary when capturing pointers manually. apply The apply function is used to apply a state modification that originates from a user interaction to the state. This property allows overriding the default apply function, giving the developer complete control over how modifications affect the state. For instance, instead of applying the modification directly, the developer can apply it to their own state management solution. The state management solution can then apply the modification to the handle target. projectRays Allows to configure whether rays from input devices should be projected onto the interaction space (3D plane or 3D Line). alwaysUpdate In situations where the handle target is placed inside a constantly changing group, the alwaysUpdate flag ensures that the handle target's transformation is updated every frame to reflect the current state of the handle. multitouch By default, handles can be interacted with using multiple input devices. By setting multitouch to false, only the first input device will be used. filter Allows to filter interactions based on the event. Return false to ignore the event. stopPropagation By default, events that occur on handles are not propagated upwards and therefore do not reach their ancestors. Setting stopPropagation to false will re-enable event propagation for events that occur on the handle. rotate The rotate property allows configuring if and how the user can rotate the target. Setting rotate to false disables rotation. Setting rotate to x restricts rotation to the x-axis. Setting rotate to { x: false, y: [0, Math.PI] } disables rotation on the x-axis and restricts rotation on the y-axis to be between 0 and 180°, while rotation on the z-axis is enabled. scale The scale property allows configuring if and how the user can scale the target. Setting scale to false disables scaling. Setting scale to x restricts scaling to the x-axis. Setting scale to { x: false, y: [1, 2] } disables scaling on the x-axis and restricts the scaling factor on the y-axis to be between 1 and 2, while scaling on the z-axis is enabled. translate The translate property allows configuring if and how the user can translate the target. Setting translate to false disables translation. Setting translate to x restricts translation to the x-axis. Setting translate to { x: false, y: [-1, 1] } disables translation on the x-axis and restricts translation on the y-axis to be between -1 and 1, while translation on the z-axis is enabled. Furthermore, the translate property can be configured to transform translations into rotations and/or scalings using translate="as-scale", allowing the user to scale the target by grabbing and moving the handle. ref Allows retrieval of a reference to the internal handle store (). a6:T451, 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. Using the TransformHandles and PivotHandles in React Three Fiber requires disabling the built-in event system and adding the event system of @react-three/xr. import { TransformHandles } from '@react-three/handle' import { noEvents, PointerEvents } from '@react-three/xr'

a7:T92b, alwaysUpdate In situations where the transform handles are placed inside a constantly changing group, the alwaysUpdate flag ensures that the transform handles' transformation is updated every frame to reflect the current state of the handle. apply Allows overriding the default apply function, giving the developer complete control over how modifications affect the state. For instance, instead of applying the modification directly, the developer can apply it to their own state management solution. The state management solution can then apply the modification to the handle target. stopPropagation Setting stopPropagation to false will re-enable event propagation for events that occur on the handles. space Allows configuring whether the transformations should happen in "local" or "world" space. This property has no effect when the mode property is set to scale, as scaling must occur on the local axis. mode Allows configuring whether the transformation should be "translate", "rotate", or "scale", which also changes the visualization of the transform handles. x Allows configuring the transformation on the x-axis. Setting x to false disables transformations on the x-axis and also hides the respective user interface. y Allows configuring the transformation on the y-axis. Setting y to false disables transformations on the y-axis and also hides the respective user interface. z Allows configuring the transformation on the z-axis. Setting z to false disables transformations on the z-axis and also hides the respective user interface. e The e axis represents the axis for rotating the transform handles in screen space, which is only available when mode is set to rotation. Setting e to false disables rotation in screen space and also hides the respective user interface. disabled Setting disabled to true momentarily disables the transform handles, which stay visible but greyed out. hidden Setting hidden to true hides the transform handles and disables them. fixed By default, the transform handles have a fixed size independent of their distance from the camera, which means they scale up when they move away from the camera. Setting fixed to false will make them appear smaller when further away from the camera. size The size property allows configuring the size of the transform handles, which has no effect on their contents. a8:Ta9b, scale The scale property allows configuring if and how the user can scale the pivot handles. Setting scale to false disables scaling. Setting scale to x restricts scaling to the x-axis and only shows the user interface elements for scaling on the x-axis. Similarly, setting scale to { x: false } hides the user interface elements for scaling on the x-axis and only allows scaling on the y- and z-axes. When scaling is allowed on all axes, a uniform scale handle is shown in addition to the per-axis handles. Scale limits such as { x: [0.5, 2] } are also respected by the uniform scale handle. translation The translation property allows configuring if and how the user can translate the pivot handles. Setting translation to false disables translation. Setting translation to x restricts translation to the x-axis and only shows the user interface elements for translation on the x-axis. Similarly, setting translation to { x: false } hides the user interface elements for translation on the x-axis and only allows translation on the y- and z-axes. rotation The rotation property allows configuring if and how the user can rotate the pivot handles. Setting rotation to false disables rotation. Setting rotation to x restricts rotation to the x-axis and only shows the user interface elements for rotating on the x-axis. Similarly, setting rotation to { x: false } hides the user interface elements for rotating on the x-axis and only allows rotation on the y- and z-axes. alwaysUpdate In situations where the pivot handles are placed inside a constantly changing group, the alwaysUpdate flag ensures that the pivot handles' transformation is updated every frame to reflect the current state of the handle. apply Allows overriding the default apply function, giving the developer complete control over how modifications affect the state. For instance, instead of applying the modification directly, the developer can apply it to their own state management solution. The state management solution can then apply the modification to the handle target. stopPropagation Setting stopPropagation to false will re-enable event propagation for events that occur on the handles. disabled Setting disabled to true momentarily disables the pivot handles, which stay visible but greyed out. hidden Setting hidden to true hides the pivot handles and disables them. fixed By default, the pivot handles have a fixed size independent of their distance from the camera, which means they scale up when they move away from the camera. Setting fixed to false will make them appear smaller when further away from the camera. size The size property allows configuring the size of the pivot handles, which has no effect on their contents.ae:T605, store The screen camera store contains the current state of the camera, including the position of the origin, the yaw and pitch of the camera, and the distance of the camera to the origin. By passing an external store to the Orbit Handles, you can take control of the current state of the camera from multiple sources. apply The apply function applies the modifications to the screen camera state that occurred based on user interactions to the screen camera store. Overriding this function allows you to manually modify the screen camera store and prevent or restrict certain modifications, such as the maximum pitch angle. disabled Allows you to disable the orbit handles momentarily by setting disabled to true. damping Allows you to configure how much the camera movement should be smoothed. Set to true for the default damping and false to disable damping. camera Allows you to configure the camera on which the transformation should be applied. Not setting the camera will apply the transformations to the default camera of the scene. rotate Allows you to configure the rotation speed and a filter function to disable rotation on certain input devices. Setting rotate to false will disable rotation entirely. zoom Allows you to configure the zoom speed and a filter function to disable zooming on certain input devices. Setting zoom to false will disable zooming entirely. pan Allows you to configure the pan speed and a filter function to disable panning on certain input devices. Setting pan to false will disable panning entirely. 10b:T42c, target Either a THREE.Group ref, or a callback function. Recieves movement input (required). RefObject> | (velocity, rotationVelocityY, deltaTime, state, frame?) => void translationOptions XRControllerLocomotionTranslationOptions = {} Options that control the translation of the user. Set to false to disable. translationOptions.speed The speed at which the user moves. rotationOptions XRControllerLocomotionRotationOptions = {} Options that control the rotation of the user. Set to false to disable. rotationOptions.deadZone How far the joystick must be pushed to trigger a turn. rotationOptions.type Controls how rotation using the controller functions. Can be either 'smooth' or 'snap'. rotationOptions.degrees If type is 'snap', this specifies the number of degrees to snap the user's view by. rotationOptions.speed If type is 'smooth', this specifies the speed at which the user's view rotates. translationControllerHand Specifies which hand will control the movement. Can be either 'left' or 'right'. "left" | "right" 148:T46b, src Property for displaying images and videos onto the layer. For rendering dynamic content to the layer, leave the src empty and put the dynamic (3D) content into the children, so that the layer acts as a render target. shape Property to configure the shape of the layer ("quad", "cylinder", "equirect"). layout Property to configure the layout of the display content for stereo content ("default", "mono", "stereo-left-right", "stereo-top-bottom"). centralAngle Property to configure the central angle in case the layer shape is a "cylinder". centralHorizontalAngle Property to configure the central horizontal angle in case the layer shape is "equirect". upperVerticalAngle Property to configure the upper vertical angle in case the layer shape is "equirect". lowerVerticalAngle Property to configure the lower vertical angle in case the layer shape is "equirect". chromaticAberrationCorrection Property to configure whether chromatic abberration should be corrected by the layer. quality Property to configure for what type of content the layer should be optimized ("default", "text-optimized", "graphics-optimized").c:["$","$L22",null,{"value":{"docs":[{"slug":["getting-started","introduction"],"url":"/getting-started/introduction","editURL":"https://github.com/pmndrs/xr/edit/main/docs/getting-started/introduction.md","sourcecode":"","sourcecodeURL":"https://github.com/pmndrs/xr/tree/main/","title":"Introduction","description":"🤳 XR for react-three-fiber","metadata":{"title":"Introduction","description":"🤳 XR for react-three-fiber"},"image":"https://github.com/pmndrs/xr/raw/main/docs/logo.png","nav":0,"content":["$undefined","\n",["$","$L23",null,{"pnpm":"pnpm add three @react-three/fiber @react-three/xr@latest","npm":"npm install three @react-three/fiber @react-three/xr@latest","yarn":"yarn add three @react-three/fiber @react-three/xr@latest","bun":"bun add three @react-three/fiber @react-three/xr@latest","className":"language-bash","children":["$","code",null,{"className":"language-bash code-highlight","children":["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token function","children":"npm"}]," ",["$","span",null,{"className":"token function","children":"install"}]," three @react-three/fiber @react-three/xr@latest\n"]}]}]}],"\n",["$","a",null,{"href":"#what-does-it-look-like?","className":"tracking-light my-6 mt-8 block text-balance text-3xl font-bold text-on-surface no-underline hover:underline","children":["$","h2",null,{"id":"what-does-it-look-like?","children":"What does it look like?"}]}],"\n",["$","div",null,{"className":"my-8 overflow-hidden rounded-2xl border *:data-[slot=table-container]:scroll-fade-x *:data-[slot=table-container]:no-scrollbar","children":["$","$L24",null,{"children":["$","$L25",null,{"children":["$","$L26",null,{"children":[["$","$L27",null,{"className":"whitespace-normal","children":["A simple scene with a mesh that toggles its material color between ",["$","code",null,{"className":"bg-surface-container-high text-on-surface rounded-sm px-1.5 py-0.5 font-mono","children":"\"red\""}]," and ",["$","code",null,{"className":"bg-surface-container-high text-on-surface rounded-sm px-1.5 py-0.5 font-mono","children":"\"blue\""}]," when clicked through touching or pointing."]}],["$","$L27",null,{"className":"whitespace-normal","children":"$L28"}]]}]}]}]}],"\n",["$","$L23",null,{"className":"language-tsx","children":["$","code",null,{"className":"language-tsx code-highlight","children":[["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token keyword","children":"import"}]," ",["$","span",null,{"className":"token imports","children":[["$","span",null,{"className":"token punctuation","children":"{"}]," ",["$","span",null,{"className":"token maybe-class-name","children":"Canvas"}]," ",["$","span",null,{"className":"token punctuation","children":"}"}]]}]," ",["$","span",null,{"className":"token keyword","children":"from"}]," ",["$","span",null,{"className":"token string","children":"'@react-three/fiber'"}],"\n"]}],["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token keyword","children":"import"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}]," ",["$","span",null,{"className":"token constant","children":"XR"}],["$","span",null,{"className":"token punctuation","children":","}]," createXRStore ",["$","span",null,{"className":"token punctuation","children":"}"}]," ",["$","span",null,{"className":"token keyword","children":"from"}]," ",["$","span",null,{"className":"token string","children":"'@react-three/xr'"}],"\n"]}],["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token keyword","children":"import"}]," ",["$","span",null,{"className":"token imports","children":[["$","span",null,{"className":"token punctuation","children":"{"}]," useState ",["$","span",null,{"className":"token punctuation","children":"}"}]]}]," ",["$","span",null,{"className":"token keyword","children":"from"}]," ",["$","span",null,{"className":"token string","children":"'react'"}],"\n"]}],["$","span",null,{"className":"code-line","children":"\n"}],["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token keyword","children":"const"}]," store ",["$","span",null,{"className":"token operator","children":"="}]," ",["$","span",null,{"className":"token function","children":"createXRStore"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":")"}],"\n"]}],"$L29","$L2a","$L2b","$L2c","$L2d","$L2e","$L2f","$L30","$L31","$L32","$L33","$L34","$L35","$L36","$L37"]}]}],"\n","$L38","\n","$L39","\n","$L3a","\n","$L3b","\n","$L3c","\n","$L3d","\n","$L3e","\n","$L3f","\n","$L40","\n","$L41","\n","$L42","\n","$L43","\n","$L44","\n","$L45"],"boxes":[],"tableOfContents":[{"id":"introduction","level":0,"label":"Introduction","url":"/getting-started/introduction#introduction","title":"Introduction","content":"\nnpm install three @react-three/fiber @react-three/xr@latest\n\n","parent":null},{"id":"what-does-it-look-like?","level":1,"label":"Introduction","url":"/getting-started/introduction#what-does-it-look-like?","title":"What does it look like?","content":"\n\n\n\nA simple scene with a mesh that toggles its material color between \"red\" and \"blue\" when clicked through touching or pointing.\n\n\n\n\nimport { Canvas } from '@react-three/fiber'\nimport { XR, createXRStore } from '@react-three/xr'\nimport { useState } from 'react'\n\nconst store = createXRStore()\n\nexport function App() {\n const [red, setRed] = useState(false)\n return <>\n \n

\n \n}\n\n","parent":"$c:props:value:docs:0:tableOfContents:0"},{"id":"turn-any-@react-three/fiber-app-into-an-xr-experience","level":2,"label":"Introduction","url":"/getting-started/introduction#turn-any-@react-three/fiber-app-into-an-xr-experience","title":"Turn any @react-three/fiber app into an XR experience","content":"\n\nconst store = createXRStore() create a xr store\nstore.enterAR() call enter AR when clicking on a button\n... wrap your content with the XR component\n\n... or read this guide for converting a react-three/fiber app to XR.\n","parent":"$c:props:value:docs:0:tableOfContents:1"},{"id":"tutorials","level":1,"label":"Introduction","url":"/getting-started/introduction#tutorials","title":"Tutorials","content":"\n\n💾 Store\n👆 Interactions\n👌 Handles\n🧊 Object Detection\n✴ Origin\n🪄 Teleport\n🕹️ Gamepad\n➕ Secondary Input Sources\n📺 Layers\n🎮 Custom Controller/Hands/...\n⚓️ Anchors\n📱 Dom Overlay\n🎯 Hit Test\n⛨ Guards\n🖼️ Render Targets\n\n","parent":"$c:props:value:docs:0:tableOfContents:0"},{"id":"external-tutorials","level":1,"label":"Introduction","url":"/getting-started/introduction#external-tutorials","title":"External Tutorials","content":"\n\n🥇 WebXR First Steps React by Meta Quest\n\n","parent":"$c:props:value:docs:0:tableOfContents:0"},{"id":"roadmap","level":1,"label":"Introduction","url":"/getting-started/introduction#roadmap","title":"Roadmap","content":"\n\n🤳 XR Gestures\n🕺 Tracked Body\n\n","parent":"$c:props:value:docs:0:tableOfContents:0"},{"id":"migration-guides","level":1,"label":"Introduction","url":"/getting-started/introduction#migration-guides","title":"Migration guides","content":"\n\nfrom @react-three/xr v5\nfrom natuerlich\n\n","parent":"$c:props:value:docs:0:tableOfContents:0"},{"id":"sponsors","level":1,"label":"Introduction","url":"/getting-started/introduction#sponsors","title":"Sponsors","content":"\nThis project is supported by a few companies and individuals building cutting-edge 3D Web & XR experiences. Check them out!\n","parent":"$c:props:value:docs:0:tableOfContents:0"}]},{"slug":["getting-started","convert-to-xr"],"url":"/getting-started/convert-to-xr","editURL":"https://github.com/pmndrs/xr/edit/main/docs/getting-started/convert-to-xr.md","sourcecode":"","sourcecodeURL":"https://github.com/pmndrs/xr/tree/main/","title":"$L46","description":"$L47","metadata":{"title":"Convert to XR","description":"How to convert an existing react-three-fiber app into an interactive immersive experience."},"image":"https://github.com/pmndrs/xr/raw/main/docs/logo.png","nav":1,"content":"$L48","boxes":[],"tableOfContents":[{"id":"convert-to-xr","level":0,"label":"Convert to XR","url":"/getting-started/convert-to-xr#convert-to-xr","title":"Convert to XR","content":"$49","parent":null}]},{"slug":["getting-started","development-setup"],"url":"/getting-started/development-setup","editURL":"https://github.com/pmndrs/xr/edit/main/docs/getting-started/development-setup.md","sourcecode":"","sourcecodeURL":"https://github.com/pmndrs/xr/tree/main/","title":"$L4a","description":"$L4b","metadata":{"title":"Development Setup","description":"Setup your development environment for building XR experiences."},"image":"https://github.com/pmndrs/xr/raw/main/docs/logo.png","nav":2,"content":"$L4c","boxes":[],"tableOfContents":[{"id":"development-setup","level":0,"label":"Development Setup","url":"/getting-started/development-setup#development-setup","title":"Development Setup","content":"\nBuilding WebXR experiences has all the advantages of building for the web, with a lot of tool chains, debugging tools, and resources available.\nBecause there are so many tools available, it is often hard to choose a development setup. Therefore, we would like to recommend you a development setup for developing with react-three/xr.\n","parent":null},{"id":"1.-build-tool:-vite","level":1,"label":"Development Setup","url":"/getting-started/development-setup#1.-build-tool:-vite","title":"1. Build tool: vite","content":"\nVite is easy to set up and has all the features we need. We recommend using the packages @vitejs/plugin-react to enable hot module reloading and @vitejs/plugin-basic-ssl to enable https, which is required for any WebXR experience.\nA basic vite.config.ts would look like this:\nimport { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\nimport basicSsl from '@vitejs/plugin-basic-ssl'\n\nexport default defineConfig({\n plugins: [react(), basicSsl()],\n})\n\nNow with vite and ssl setup, we can host out application by starting executing vite --host. The --host argument makes sure that the server is exposed to your local network, so you can access the app from your headset or smartphone. When starting the server, vite also shows you your local IP. Now type in this IP including the port number into your smartphone's or headset's browser (e.g. https://192.168.0.43:5173).\n","parent":"$c:props:value:docs:2:tableOfContents:0"},{"id":"2.-emulator:-iwer/devui","level":1,"label":"Development Setup","url":"/getting-started/development-setup#2.-emulator:-iwer/devui","title":"2. emulator: iwer/devui","content":"$4d","parent":"$c:props:value:docs:2:tableOfContents:0"},{"id":"3.-adb","level":1,"label":"Development Setup","url":"/getting-started/development-setup#3.-adb","title":"3. ADB","content":"\nSometimes, a WebXR experience works flawlessly in the emulator but fails on the actual device. In this case we recommend using Android Device Bridge (ADB) to debug your experience from another device. For example, to remotely debug a WebXR experience on a Meta Quest 3, the Meta Quest 3 must be in developer mode, and remote debugging must be enabled. Then, the Meta Quest 3 must be connected to a PC via a USB cable with ADB installed. With this setup, the Chrome browser can now be used to access chrome://inspect to inspect specific tabs on the device remotely.\nIf you are using the Apple Vision Pro, there are similar features to remotely debug a WebXR experience on the Apple Vision Pro from a Safari browser on another device.","parent":"$c:props:value:docs:2:tableOfContents:0"}]},{"slug":["getting-started","examples"],"url":"/getting-started/examples","editURL":"https://github.com/pmndrs/xr/edit/main/docs/getting-started/examples.md","sourcecode":"","sourcecodeURL":"https://github.com/pmndrs/xr/tree/main/","title":"$L4e","description":"$L4f","metadata":{"title":"Examples","description":"Examples made with @react-three/xr"},"image":"https://github.com/pmndrs/xr/raw/main/docs/logo.png","nav":3,"content":"$L50","boxes":[],"tableOfContents":[{"id":"examples","level":0,"label":"Examples","url":"/getting-started/examples#examples","title":"Examples","content":"\n\nby Sung Powley\n","parent":null}]},{"slug":["getting-started","showcases"],"url":"/getting-started/showcases","editURL":"https://github.com/pmndrs/xr/edit/main/docs/getting-started/showcases.md","sourcecode":"","sourcecodeURL":"https://github.com/pmndrs/xr/tree/main/","title":"$e:0:props:children:0:props:children:0:props:children","description":"$e:0:props:children:1:props:children","metadata":{"title":"Showcases","description":"Public products build with @react-three/xr"},"image":"https://github.com/pmndrs/xr/raw/main/docs/logo.png","nav":4,"content":"$L51","boxes":[],"tableOfContents":[{"id":"showcases","level":0,"label":"Showcases","url":"/getting-started/showcases#showcases","title":"Showcases","content":"\n\nSpatial development hub\n\nAre we missing your public product? Please message us via Twitter or Discord.","parent":null}]},{"slug":["getting-started","faq"],"url":"/getting-started/faq","editURL":"https://github.com/pmndrs/xr/edit/main/docs/getting-started/faq.md","sourcecode":"","sourcecodeURL":"https://github.com/pmndrs/xr/tree/main/","title":"$L52","description":"$L53","metadata":{"title":"FAQ","description":"Frequently asked questions about react-three/xr."},"image":"https://github.com/pmndrs/xr/raw/main/docs/logo.png","nav":7,"content":"$L54","boxes":[],"tableOfContents":[{"id":"faq","level":0,"label":"FAQ","url":"/getting-started/faq#faq","title":"FAQ","content":"\n","parent":null},{"id":"how-can-i-read-the-camera-position-or-rotation-in-xr?","level":1,"label":"FAQ","url":"/getting-started/faq#how-can-i-read-the-camera-position-or-rotation-in-xr?","title":"How can I read the camera position or rotation in XR?","content":"\nThe current global camera transformation can be accessed through getWorldPosition or getWorldQuaternionn This works inside of XR, as well as, outside of XR.\nuseFrame((state) => console.log(state.camera.getWorldPosition(new Vector3())))\n\n","parent":"$c:props:value:docs:5:tableOfContents:0"},{"id":"how-can-i-change-the-camera-position-in-xr?","level":1,"label":"FAQ","url":"/getting-started/faq#how-can-i-change-the-camera-position-in-xr?","title":"How can I change the camera position in XR?","content":"\nIn contrast to non-immersive 3D applications, the camera transformation in MR/VR/AR applications should never be directly controlled by the developer since the user's head movement must control the camera's transformation. Therefore, pmndrs/xr provides the XROrigin component, which allows to control where the session's origin is placed inside the 3D scene. The session origin is at the users' feet once they recenter their session. This allows to implicitly control the camera position but prevents the user from getting motion sick when their movement is not reflected in the camera's movement.\n","parent":"$c:props:value:docs:5:tableOfContents:0"},{"id":"","level":1,"label":"FAQ","url":"/getting-started/faq#","title":"","content":"\n","parent":"$c:props:value:docs:5:tableOfContents:0"},{"id":"having-problems-accessing-the-camera-position-or-rotation.","level":1,"label":"FAQ","url":"/getting-started/faq#having-problems-accessing-the-camera-position-or-rotation.","title":"Having problems accessing the camera position or rotation.","content":"\nCheck if you have OrbitControls, CameraControls from @react-three/drei, or other controls in your scene and make sure to place an guard around them when in XR or replace them with OrbitHandles or MapHandles from @react-three/handle. This prevents overwriting the camera transformation which is controlled through WebXR when inside an immersive session and allows to access the correct transformation.\nimport { OrbitHandles } from '@react-three/handle'\nimport { noEvents, PointerEvents } from '@react-three/xr'\n\n

\n\n","parent":"$c:props:value:docs:5:tableOfContents:0"},{"id":"i-cannot-enter-the-xr-session!","level":1,"label":"FAQ","url":"/getting-started/faq#i-cannot-enter-the-xr-session!","title":"I cannot enter the XR session!","content":"\n\n\nMissing Https\nIf you are trying to enter the AR or VR modus and nothing is happening, make sure that you are accessing the website using https://.\nIn case you are using vite, we recommend using the @vitejs/plugin-basic-ssl to try out your vite application on your device while developing.\n\n\nMissing XR component\nIf you made sure that the website is accessed using https:// and still nothing happens when executing enterAR or enterVR, it is likely that the component is missing. Be sure to add the component directly into the