Input Support (Vive Controllers, Mouse, etc)

Because GUIVR lives entirely in WebGL, access to events and button presses are entirely custom-built.

Vive Controllers

  const input = dat.GUIVR.addInputObject( viveController );
  scene.add( input );

ViveController in this case is an instance of THREE.ViveController.

If a THREE.ViveController is given to gui.addInputObject(), then GUIVR will automatically bind the relevant interactivity (trigger, grip, haptic feedback).

Gaze (Cardboard, etc)

All you have to do is add the THREE.js camera as an input.

  const gazeInput = dat.GUIVR.addInputObject( camera );

You can avoid seeing the laser by only adding the cursor to the scene:

  scene.add( gazeInput.cursor );

And for press you can bind mouse or touch so GUIVR knows when they should happen:

  ['mousedown','touchstart']
  .forEach( function(e){
      window.addEventListener(e, function(){
        gazeInput.pressed( true );
      }, false );
  });

  ['mouseup','touchend']
  .forEach( function(e){
      window.addEventListener(e, function(){
        gazeInput.pressed( false );
      }, false );
  });

See examples/gaze.html for working sample.

Any Object3D

dat.GUIVR.addInputObject() can take anything of type THREE.Object3D. This means you can add cameras, lights, arbitrary 3D meshes as input objects to GUIVR.

gdat.GUIVR.addInputObject() returns an Input object which represents a laser pointer that gets internally updated. The laser is only shown when it crosses any of GUIVR's panels.

The Input object also has the following methods:

• pressed( flag )
• gripped( flag )

These allow you to bind anything to GUIVR's inputs. For example you can make a mouse click on the browser trigger an input 'press' by doing:

  document.addEventListener( 'mousedown', function(){ laser.pressed( true ); } );

This is useful for adding things like Google Cardboard which won't have native button presses but rely on touching the browser surface to emulate a press event.

Mouse

GUIVR can also take the mouse as a input. For that, you need to give it THREE.js' camera and renderer

dat.GUIVR.enableMouse( camera, renderer )