fix: setting and resetting xrSpace on current and previous origin

Author: bbohlender

examples/layers/app.tsx

@@ -1,5 +1,5 @@
 import { Canvas, useThree } from '@react-three/fiber'
-import { createXRStore, useHover, XR, XRLayer } from '@react-three/xr'
+import { createXRStore, useHover, XR, XRLayer, XROrigin } from '@react-three/xr'
 import { Text } from '@react-three/drei'
 import { useEffect, useMemo, useRef } from 'react'
 import { Mesh, SRGBColorSpace, VideoTexture } from 'three'
@@ -27,29 +27,30 @@ export function App() {
       <Canvas
         events={() => ({ enabled: false, priority: 0 })}
         style={{ width: '100%', flexGrow: 1 }}
-        camera={{ position: [0, 1.5, 0], rotation: [0, 0, 0] }}
+        camera={{ position: [0, 0, 0], rotation: [0, 0, 0] }}
       >
         <SwitchToXRPointerEvents />
         <XR store={store}>
-          <Text scale={0.03} color="black" position={[-0.6, 1.78, -0.5]}>
+          <Text scale={0.03} color="black" position={[-0.6, 0.28, -0.5]}>
             32x32 XRLayer with DPR=32
           </Text>
-          <XRLayer dpr={32} pixelWidth={32} pixelHeight={32} position={[-0.6, 1.5, -0.5]} scale={0.5} shape="quad">
+          <XROrigin position={[0, -1.5, 0]} />
+          <XRLayer dpr={32} pixelWidth={32} pixelHeight={32} position={[-0.6, 0, -0.5]} scale={0.5} shape="quad">
             <mesh>
               <boxGeometry />
               <meshBasicMaterial color="red" toneMapped={false} />
             </mesh>
           </XRLayer>
 
-          <Text scale={0.03} color="black" position={[0, 1.78, -0.5]}>
+          <Text scale={0.03} color="black" position={[0, 0.28, -0.5]}>
             With XRLayer
           </Text>
-          <XRLayer position={[0, 1.5, -0.5]} onClick={() => video.play()} scale={0.5} shape="quad" src={video} />
+          <XRLayer position={[0, 0, -0.5]} onClick={() => video.play()} scale={0.5} shape="quad" src={video} />
 
-          <Text scale={0.03} color="black" position={[0.6, 1.78, -0.5]}>
+          <Text scale={0.03} color="black" position={[0.6, 0.28, -0.5]}>
             Without XRLayer
           </Text>
-          <mesh position={[0.6, 1.5, -0.5]} scale={0.5}>
+          <mesh position={[0.6, 0, -0.5]} scale={0.5}>
             <planeGeometry />
             <meshBasicMaterial map={videoTexture} toneMapped={false} />
           </mesh>

packages/xr/src/store.ts

@@ -461,18 +461,22 @@ export function createXRStore<T extends XRElementImplementations>(options?: XRSt
       //update origin
       const origin = camera.parent ?? scene
       if (state.origin != origin) {
-        origin.xrSpace = referenceSpace
         update ??= {}
         update.origin = origin
       }
 
       //update reference space
       if (referenceSpace != state.originReferenceSpace) {
-        origin.xrSpace = referenceSpace
         update ??= {}
         update.originReferenceSpace = referenceSpace
       }
 
+      //set xr space on current origin (and reset on previous)
+      origin.xrSpace = referenceSpace
+      if (state.origin != origin && state.origin != null) {
+        state.origin.xrSpace = undefined
+      }
+
       if (frame != null) {
         if (xrManager != null) {
           updateSession(store, frame, xrManager)