fix(app): controller locomotion with physics

kwaa · kwaa · commit 291ea187e438 · 2025-05-11T21:19:50.000+08:00
diff --git a/app/src/components/xr/player.tsx b/app/src/components/xr/player.tsx
@@ -1,39 +1,39 @@
 import type { RapierRigidBody } from '@react-three/rapier'
 import type { Vector3 } from 'three'
 
-import { CapsuleCollider, RigidBody } from '@react-three/rapier'
+import { CapsuleCollider, euler, quat, RigidBody } from '@react-three/rapier'
 import { useXRControllerLocomotion, XROrigin } from '@react-three/xr'
 import { useRef } from 'react'
 
 export const Player = () => {
   const userRigidBodyRef = useRef<RapierRigidBody>(null)
 
-  const userMove = (inputVector: Vector3) => {
-    if (!(userRigidBodyRef.current))
+  useXRControllerLocomotion((velocity: Vector3, rotationVelocityY: number) => {
+    if (!userRigidBodyRef.current)
       return
-    const currentLinvel = userRigidBodyRef.current.linvel()
-    const newLinvel = { x: inputVector.x, y: currentLinvel.y, z: inputVector.z }
-    userRigidBodyRef.current.setLinvel(newLinvel, true)
 
-    // const currentAngvel = userRigidBodyRef.current.angvel()
-    // const newAngvel = { x: currentAngvel.x, y: rotationVelocityY, z: currentAngvel.z }
-    // userRigidBodyRef.current.setAngvel(newAngvel, true)
-  }
+    userRigidBodyRef.current.setRotation(
+      quat(userRigidBodyRef.current.rotation())
+        .multiply(quat().setFromEuler(euler().set(0, rotationVelocityY, 0, 'YXZ'))),
+      true,
+    )
 
-  useXRControllerLocomotion(userMove)
+    userRigidBodyRef.current.setLinvel({ x: velocity.x, y: 0, z: velocity.z }, true)
+  })
 
   return (
     <RigidBody
       canSleep={false}
       colliders={false}
       enabledRotations={[false, false, false]}
+      includeInvisible
+      mass={1}
       position={[0, 2, 0]}
       ref={userRigidBodyRef}
-      restitution={2}
       type="dynamic"
     >
-      <CapsuleCollider args={[0.3, 0.5]} />
-      <XROrigin position={[0, -1, 0]} />
+      <CapsuleCollider args={[0.75, 0.5]} />
+      <XROrigin position={[0, -1.25, 0]} />
     </RigidBody>
   )
 }
