A ReactXR controller for perpendicular sideways movement

StrafeController.js

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

import { Vector3 } from 'three';

import { useRef } from 'react';

export default function StrafeController({
	hand = 'right',
	sensitivity = 0.05,
	zeroY = true,
}) {
	const { player } = useXR();
	const controller = useController(hand);
	const forward = useRef(new Vector3());
	const strafe = 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();
			strafe.current.copy(forward.current);
			strafe.current.cross(camera.up).normalize();

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

			player.position.add(strafe.current.multiplyScalar(axes[2] * sensitivity));
		}
	});

	return <></>;
}