Custom XRController for three.js

Extends the default WebXRController with functionality to handle gamepad button pressed and move update changes.

Usage

import { XRController } from 'three-vr-controller';

const renderer = new THREE.WebGPURenderer( { antialias: true, forceWebGL: true,  colorBufferType: THREE.UnsignedByteType, multiview: true } );
		

XRController.patchXRManager(renderer.xr);

const controller1 = renderer.xr.getController( 0 );

		

controller1.addEventListener( 'pressed', (event) => {
    console.log(`Button Pressed: ${event.button} index : ${event.index}`);
	switch (event.index) {
	    case 4:
		//handle button 4 changes
		break;
		case 5:
		//handle button 5 changes
		break;
	}
} );

controller1.addEventListener( 'pressedend', (event) => {
	console.log(`Button Pressed End: ${event.button} index : ${event.index}`);
} );

controller1.addEventListener('movechanged', (event) => {
    console.log("Left/Right ", event.axes[2]);
});


const controller2 = renderer.xr.getController( 1 );

controller2.addEventListener( 'pressed', (event) => {
    console.log(`Button Pressed: ${event.button} index : ${event.index}`);
	switch (event.index) {
	    case 4:
		//handle button 4 changes
		break;
		case 5:
		//handle button 5 changes
		break;
	}
} );

controller2.addEventListener( 'pressedend', (event) => {
	console.log(`Button Pressed End: ${event.button} index : ${event.index}`);
} );

controller2.addEventListener('movechanged', (event) => {
    console.log("Left/Right ", event.axes[2]);
});