API and Examples

dat.GUIVR

Namespace for the module. Has a few methods:

.create( name )

Returns a GUI Object.

const gui = dat.GUIVR.create( name );

• name: what text will show up at the top of the gui tab

.addInputObject( object3D )

Takes any object3D and returns an Input (laser pointer) for dat.GUIVR.

• object3D: any THREE.Object3D object (mesh, group, camera, etc)

Example

This adds a camera as an input object.

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

This adds a Vive controller as an input object.

const guiInputRight = dat.GUIVR.addInputObject( controllers[ 0 ] );

Once created, you must add it to your scene to be visible

scene.add( guiInputRight );

See Input Objects.

.enableMouse() / .disableMouse()

Enables or disables mouse interaction.

---

GUI Object

Each GUI is a self contained list of controllers that can be moved around and minimized.

.add( object, property, arg3, arg4, ... )

Creates a new controller and returns it. See controllers and controllers and how to create them.

Each type of Controller has its own methods and properties. See Slider Controller, Dropdown Controller, Checkbox Controller, and Button Controller.

Example

gui.add( object, 'numericProperty', min, max );

This creates a Slider Controller that manipulates object.numericProperty.

.addSlider( min, max )

Adds a stateless slider controller where the value is implicit. Equivalent to doing:

gui.add( {x:0}, 'x', min, max );

• min/max: numbers

.addDropdown( options )

Adds a stateless dropdown controller. Equivalent to doing:

gui.add( {option:''}, [options...] );

• options: an array or object literal

.addCheckbox( defaultOption )

Adds a stateless checkbox controller. Equivalent to doing:

gui.add( {flag: false}, 'flag' );

• defaultOption: boolean, sets the initial state

.addButton( func )

Adds a stateless button controller. Equivalent to doing:

`gui.add( {f:function(){...}}, 'f' );

• func: any function that will be run when the button is pressed

---

Input Object

An input object represents the laser pointer for how you interact with dat.GUIVR. It's created when you add an input:

const guiInputRight = dat.GUIVR.addInputObject( controllers[ 0 ] );

An Input Object is a actually an Object3D, which means you can attach it to the scene for it to be rendered:

scene.add( guiInputRight );

You can also attach other things to it if you want:

guiInputRight.add( light );

The Input Object has the following properties and methods:

.cursor

A mesh representing where the laser pointer of the input ends.

.pressed( flag ) and .gripped( flag )

Manually set button presses for the input. Pressed represents a click or a Vive trigger pull. Gripped is when you squeeze the grip button on the Vive controller. This is used when you want to bind custom inputs (like gaze) to activate dat.GUIVR.

See Input Support for more details.

• flag: boolean, whether or not the button is pressed

Example

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

---

Slider Controller

.onChange( func )

Sets a callback that will be run whenever the value changes via interaction with the controller. The function will have an argument for the updated value. Called every frame when updating the value.

.listen()

Makes the controller update itself based on changes to the object property.

.name( name )

Sets the label for the controller.

.min( number )

Sets the min value for this slider.

.max( number )

Sets the max value for this slider.

.step( number )

Sets the "step" value for this slider. For example at step 1, the slider will only increment at integers (0, 1, 2, 3, up to max). At step 0.1, the slider will only increment at 0.1 steps (0, 0.1, 0.2, etc).

Example

const state = {        
  size: 12
};

var slider = gui.add( state, 'size', 0, 30 ).step( 0.1 ).onChange( function( value ){
  mesh.scale.setScalar( value );
});

---

Dropdown Controller

.onChange( func )

Sets a callback that will be run whenever the value changes via interaction with the controller. The function will have an argument for the updated value. Called every frame when updating the value.

.listen()

Makes the controller update itself based on changes to the object property.

.name( name )

Sets the label for the controller.

Example

const state = {        
  colors: ['0xff0000', '0x00ff00', '0x0000ff']
};

var dropdown = gui.add( state, 'colors' ).onChange( function( color ){
  material.color.setHex( color );
});

---

Checkbox Controller

.onChange( func )

Sets a callback that will be run whenever the value changes via interaction with the controller. The function will have an argument for the updated value. Called every frame when updating the value.

.listen()

Makes the controller update itself based on changes to the object property.

.name( name )

Sets the label for the controller.

Example

const state = {        
  wireframe: false
};

var dropdown = gui.add( state, 'wireframe' ).onChange( function( flag ){
  material.wireframe = flag;
});

---

Button Controller

.name( name )

Sets the label for the controller.

Example

const state = {        
  reset: function(){
    console.log( 'reset' );
  }
};

var button = gui.add( state, 'reset' );