Unable to move in VR mode

[NithinChepuri]

I am unable to move using my controllers.

App.js code : "import { Canvas } from "@react-three/fiber" import { Loader, PointerLockControls, KeyboardControls, Text, Sparkles, Html, Stars } from "@react-three/drei" import { Debug, Physics, RigidBody } from "@react-three/rapier" import { Player } from "./Player" import { Suspense } from "react"

import { Planetest } from './Planetest'

import { VRButton, ARButton, XR, Controllers, Hands } from '@react-three/xr'

import React from 'react'; import { BrowserRouter as Router, Route, Switch, Routes, BrowserRouter } from 'react-router-dom';

export default function App() { const queryParams = new URLSearchParams(window.location.search) const gravity = queryParams.get("gravity") || -9.8 const flycontrol = queryParams.get("flycontrol") || false console.log(gravity) console.log(flycontrol)

return (<> {/ /} <KeyboardControls map={[ { name: "forward", keys: ["ArrowUp", "w", "W"] }, { name: "backward", keys: ["ArrowDown", "s", "S"] }, { name: "left", keys: ["ArrowLeft", "a", "A"] }, { name: "right", keys: ["ArrowRight", "d", "D"] }, { name: "jump", keys: ["Space"] }, ]}>

    <Suspense>
      <Canvas camera={{ fov: 45 }}>
      <XR>
      <Controllers />
        <directionalLight position={[10, 10, 5]} intensity={0.5} />
        <Physics gravity={[0, gravity, 0]}>

          <Routes>
            <Route path="/" element={<Planetest/>} />
            {/* <Route path="/Finalcampusmap" element={<Finalcampusmap/>} /> */}
          </Routes>

          <Player flycontrol={flycontrol} />
          <Debug />

        </Physics>
        <PointerLockControls />
        <ambientLight intensity={0.5} />
        </XR>
      </Canvas>
    </Suspense>
    <Loader />
  </KeyboardControls>

</> ) } "

Player.js code "import as THREE from "three"; import as RAPIER from "@dimforge/rapier3d-compat"; import { useRef, useState, useEffect } from "react"; import { useThree, useFrame, Canvas } from "@react-three/fiber"; import { useKeyboardControls } from "@react-three/drei"; import { CapsuleCollider, RigidBody, useRapier } from "@react-three/rapier"; // const { gl, camera } = useThree() // var step = new Audio('step.mp3'); let pos = [0, 0, 0]; const SPEED = 50;

export function Player(props) { const flycontrol = props.flycontrol; const ref = useRef(); const rapier = useRapier(); const { camera, gl } = useThree(); const [, get] = useKeyboardControls();

useEffect(() => { const { forward, backward, left, right, jump } = get(); const velocity = ref.current.linvel(); const xrCamera = gl.xr.getCamera();

const updateCameraPosition = () => {
  if (gl.xr.isPresenting) {
    const [x, y, z] = ref.current.translation();
    xrCamera.position.set(x, y, z);
  }
};

if (gl.xr.isPresenting) {
  updateCameraPosition();
  gl.xr.addEventListener('sessionend', updateCameraPosition);
}
else{
  camera.position.set(...ref.current.translation());
}

console.log("Player's location:", ref.current.translation());
console.log("Player's linvel:", ref.current.linvel());

// Movement
let direction = new THREE.Vector3();
direction.set(40, 0, 0);

if (gl.xr && gl.xr.isPresenting) {
  const controller = gl.xr.getController(0);

  const handleSelectStart = () => {
    ref.current.setLinvel(direction);
    xrCamera.position.copy(new THREE.Vector3(100,-1,0));
  };
  controller.addEventListener('selectstart', handleSelectStart);

  // Handle selectend event
  const handleSelectEnd = () => {
    console.log("ended");
  };
  controller.addEventListener('selectend', handleSelectEnd);

}

// Handle non-VR movement
else {
  direction.set(0, 0, 0);
  const frontVector = new THREE.Vector3(0, 0, backward - forward);
  const sideVector = new THREE.Vector3(left - right, 0, 0);
  direction.subVectors(frontVector, sideVector).normalize().multiplyScalar(SPEED).applyEuler(camera.rotation);

  if (flycontrol) ref.current.setLinvel(direction);
  else ref.current.setLinvel({ x: direction.x, y: velocity.y, z: direction.z });
}

});

return ( <> <RigidBody ref={ref} colliders={false} mass={1} type="dynamic" position={pos} enabledRotations={[false, false, false]}> <CapsuleCollider args={[7, 0.5]}/> </> ); } "