title: WebXR controllers for button pressing in three.js
body: <p>I would like to figure out how to map out the controls for my oculus quest and other devices, using three.js and webXR. The code works, and allows me to move the controller, maps a cylinder to each control, and allows me to use the trigger to controls to change the color of the cylinders. This is great, but I can't find any documentation on how to use axis controls for the joy stick, the grip and the other buttons. Part of me wants to believe it's as simple as knowing which event to call, because I don't know what other events are available.</p>
  
  <p>Here is a link to the tutorial I based this off of. <a href="https://github.com/as-ideas/webvr-with-threejs" rel="noreferrer">https://github.com/as-ideas/webvr-with-threejs</a></p>
  
  <p>Please note that this code works as expected, but I don't know how totake it further and do more.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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', () =&gt; {
              if (controllerID === 0) {
                  cylinderMaterial.color.set('pink')
              } else {
                  cylinderMaterial.color.set('orange');
                  videoinput.play()
              }
          });
          controller.addEventListener('selectend', () =&gt; {
              cylinderMaterial.color.set(0xffff00);
              videoinput.pause();
              console.log('I pressed play');
          });
      }</code></pre>
  </div>
  </div>
  </p>