fix useControllerLocomotion: use camera.matrix.decompose instead of camera.getWorldQuaternion

Author: bbohlender

examples/rag-doll/src/App.jsx

@@ -4,8 +4,9 @@ import { Physics, usePlane } from '@react-three/cannon'
 import { Cursor } from './helpers/Drag.js'
 import { Guy } from './components/Guy.jsx'
 import { Mug, Chair, Table, Lamp } from './components/Furniture.jsx'
-import { createXRStore, XR, XROrigin } from '@react-three/xr'
-import { Suspense } from 'react'
+import { createXRStore, useControllerLocomotion, XR, XROrigin } from '@react-three/xr'
+import { useRef, Suspense } from 'react'
+import { Group } from 'three'
 
 const store = createXRStore({
   hand: { touchPointer: false },
@@ -55,14 +56,20 @@ export function App() {
             </Physics>
           </Suspense>
           <group position={[0, -5, 0]}>
-            <XROrigin scale={10} />
+            <ControlledXROrigin />
           </group>
         </XR>
       </Canvas>
     </>
   )
 }
 
+function ControlledXROrigin() {
+  const ref = useRef(null)
+  useControllerLocomotion(ref, { speed: 10 })
+  return <XROrigin ref={ref} scale={10} />
+}
+
 function Floor(props) {
   const [ref] = usePlane(() => ({ type: 'Static', ...props }))
   return (

packages/xr/src/controller-locomotion.ts

@@ -22,6 +22,8 @@ const thumbstickPropName = 'xr-standard-thumbstick'
 const vectorHelper = new Vector3()
 const quaternionHelper = new Quaternion()
 const eulerHelper = new Euler()
+const positionHelper = new Vector3()
+const scaleHelper = new Vector3()
 
 /**
  * function for handling controller based locomotion in VR
@@ -94,7 +96,8 @@ export function createControllerLocomotionUpdate() {
       }
       const { speed = defaultSpeed } = translationOptions
       vectorHelper.set(translationXAxis * speed, 0, translationYAxis * speed)
-      vectorHelper.applyQuaternion(camera.getWorldQuaternion(quaternionHelper))
+      camera.matrixWorld.decompose(positionHelper, quaternionHelper, scaleHelper)
+      vectorHelper.applyQuaternion(quaternionHelper)
 
       if (yRotationChange) {
         vectorHelper.applyEuler(eulerHelper.set(0, yRotationChange, 0, 'YXZ'))