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]}/> </> ); } "

[bbohlender]

In XR, you cannot control the camera position directly since the camera is controlled by the user's head movement. To achieve your goal, you want to control the session origin. In this tutorial, you can see how to implement simple locomotion by updating the session origin https://docs.pmnd.rs/xr/tutorials/gamepad

[NithinChepuri]

Dear sir When i tried with your reference it is showing that VR stores don't exist in react 3 fibre. Here is my error. "export 'createXRStore' (imported as 'createXRStore') was not found in @.***/xr' (possible exports: ARButton, Controllers, Hands, InteractionManager, Interactive, Ray, RayGrab, TeleportationPlane, VRButton, XR, XRButton, XRController, XRControllerModelFactory, startSession, stopSession, toggleSession, useController, useHitTest, useInteraction, useTeleportation, useXR, useXREvent)""

can u please help me in this sir

On Wed, 17 Jul 2024 at 12:49, Bela Bohlender @.***> wrote:

Closed #308 https://github.com/pmndrs/xr/issues/308 as completed.

— Reply to this email directly, view it on GitHub https://github.com/pmndrs/xr/issues/308#event-13532052632, or unsubscribe https://github.com/notifications/unsubscribe-auth/A2NMTIBG4K2C2TIWWRJALBLZMYLJFAVCNFSM6AAAAABFC6Z6BCVHI2DSMVQWIX3LMV45UABCJFZXG5LFIV3GK3TUJZXXI2LGNFRWC5DJN5XDWMJTGUZTEMBVGI3DGMQ . You are receiving this because you authored the thread.Message ID: @.***>