A ReactXR component for moving around. Forward will always move in the direction you are looking.

BasicMovementController.js

import { useXR, useController, useXRFrame } from '@react-three/xr';

import { Vector3 } from 'three';

import { useRef } from 'react';

export default function BasicMovementController ({
	hand = 'right',
	sensitivity = 0.05,
	zeroY = true,
}) {
	const { player } = useXR();
	const controller = useController(hand);
	const forward = useRef(new Vector3());

	useXRFrame(() => {
		if (controller && player) {
			const { axes } = controller.inputSource.gamepad;
			const camera = player.children[0];
			const cameraMatrix = camera.matrixWorld.elements;
			forward.current
				.set(-cameraMatrix[8], -cameraMatrix[9], -cameraMatrix[10])
				.normalize();

			if (zeroY) {
				forward.current.y = 0;
			}

			player.position.add(
				forward.current.multiplyScalar(-axes[3] * sensitivity),
			);

			player.rotation.y -= axes[2] * sensitivity;
		}
	});

	return <></>;
}