Creating stateless GUIs

[mflux]

Sometimes you just need one-off controllers that don't tie to any state, but other states need to react to that change.

Example of how you would do it now:

var dumbPointlessState = {
    scale: 1
};

gui.add( dumbPointlessState, 'scale', 0, 1 ).onChange( function( scale ){
    object.scale.setScalar( scale );
});

The only reason why that state exists is to create a controller that triggers onChange function that updates the object. Instead, it could be like this:

gui.addSlider( 0, 1 ).onChange( function( result ){
    object.scale.setScalar( result );
});

This creates gui with no associated object, and still calls onChange to manipulate objects in the callback. There could be several versions of these:

gui.addDropdown( ['option a', 'option b'] ).onChange( function( result ){
    object.text = result;
});

gui.addCheckbox( false ).onChange( function( result ){
    object.visible = result;
});

gui.addButton( function(){
    //  do something shiny
});