Drei + using KeyboardControls


I’m trying to implement a simple camera-following controller, and am basing this off of Drei’s Minecraft example Minecraft - CodeSandbox but without the raycasting or the laser. I’m noticing however, that the keys stop working after an arbitrary amount of time (if I switch windows or release pointer lock controls). Is there something that could be causing this? This is my player script and in my App, the Canvas is wrapped in the KeyboardControls. Any help would be much appreciated!!

side note, I kept getting errors with state.camera.position.set(…ref.current.translation()) which is why I’m setting the x and y separately.

const SPEED = 4
const direction = new THREE.Vector3()
const frontVector = new THREE.Vector3()
const sideVector = new THREE.Vector3()
const rotation = new THREE.Vector3()

export function Player({ }) {
const ref = useRef()
const rapier = useRapier()
const [, get] = useKeyboardControls()

useFrame((state) => {
const { left, right, up, down, } = get()

if (ref.current) {
  const velocity = ref.current.linvel()
  // update camera
  state.camera.position.x = ref.current.translation().x;
  state.camera.position.y = ref.current.translation().y;

  // movement
  frontVector.set(0, up - down, 0)
  sideVector.set(left - right, 0, 0)
  direction.subVectors(frontVector, sideVector).normalize().multiplyScalar(SPEED).applyEuler(state.camera.rotation)
  ref.current.setLinvel({ x: direction.x, y: direction.y, z: direction.z })


return (
<RigidBody ref={ref} colliders={false} mass={1} type=“dynamic” position={[-2, 0.3, 0]} enabledRotations={[false, false, false]}>
<CapsuleCollider args={[0.75, 0.5]} />