Exploring the realm of mapping out controls for the Oculus Quest and other devices using three.js and webXR is an intriguing challenge I am currently facing. The current code I have developed successfully allows me to manipulate the controller, attach cylinders to each control, and alter the color of the cylinders by using the trigger controls. However, I am stuck when it comes to implementing axis controls for the joystick, grip, and other buttons as there is a lack of documentation on this specific topic. It seems like the solution could be as simple as knowing which event to call, but without knowledge of all available events, progress is hindered.
For reference, I followed a tutorial which served as the foundation for my current work. You can find the tutorial at this link: https://github.com/as-ideas/webvr-with-threejs
It's important to note that the existing code is functional and meets expectations, but I am eager to enhance it further and explore additional possibilities.
function createController(controllerID, videoinput) {
//RENDER CONTROLLER AS YELLOW TUBE
const controller = renderer.vr.getController(controllerID);
const cylinderGeometry = new CylinderGeometry(0.025, 0.025, 1, 32);
const cylinderMaterial = new MeshPhongMaterial({ color: 0xffff00 });
const cylinder = new Mesh(cylinderGeometry, cylinderMaterial);
cylinder.geometry.translate(0, 0.5, 0);
cylinder.rotateX(-0.25 * Math.PI);
controller.add(cylinder);
cameraFixture.add(controller);
//TRIGGER
controller.addEventListener('selectstart', () => {
if (controllerID === 0) {
cylinderMaterial.color.set('pink')
} else {
cylinderMaterial.color.set('orange');
videoinput.play()
}
});
controller.addEventListener('selectend', () => {
cylinderMaterial.color.set(0xffff00);
videoinput.pause();
console.log('I pressed play');
});
}