GUI | ngx3js

Gui

const gui = new GUI();
gui.add( document, 'title' );

obj = {
    myBoolean: true,
    myString: 'lil-gui',
    myNumber: 1,
    myFunction: function() { alert( 'hi' ) }
}
gui.add( obj, 'myBoolean' ); // checkbox
gui.add( obj, 'myString' ); // text field
gui.add( obj, 'myNumber' ); // number field
gui.add( obj, 'myFunction' ); // button

Hierarchy

Index

Constructors

constructor

Properties

Methods

Constructors

constructor

new GUI(param?: GUIParameters): I3JS.GUI

- Defined in lib/threejs-library/types/three/examples/libs.ts:1451
Creates a panel that holds controllers.
```
new GUI();
new GUI( { container: document.getElementById( 'custom' ) } );
```
Parameters
- Optional param: GUIParameters
Returns I3JS.GUI

Properties

_closed

_closed: boolean

Used to determine if the GUI is closed. Use gui.open() or gui.close() to change this.

_hidden

_hidden: boolean

Used to determine if the GUI is hidden. Use gui.show() or gui.hide() to change this.

_title

_title: string

title.

children

children: (I3JS.GUI | GUIController)[]

The list of controllers and folders contained by this GUI.

controllers

controllers: GUIController[]

The list of controllers contained by this GUI.

domElement

domElement: HTMLElement

The outermost container element.

folders

folders: I3JS.GUI[]

The list of folders contained by this GUI.

parent

parent: I3JS.GUI

The GUI containing this folder, or undefined if this is the root GUI.

root

root: I3JS.GUI

The top level GUI containing this folder, or this if this is the root GUI.

Methods

add

add(object: object, property: string, min?: number | object | any[], max?: number, step?: number): GUIController

- Defined in lib/threejs-library/types/three/examples/libs.ts:1469
Adds a controller to the GUI, inferring controller type using the typeof operator.
```
gui.add( object, 'property' );
gui.add( object, 'number', 0, 100, 1 );
gui.add( object, 'options', [ 1, 2, 3 ] );
```
Parameters
- object: object
  
  The object the controller will modify.
- property: string
  
  Name of the property to control.
- Optional min: number | object | any[]
  
  Minimum value for number controllers, or the set of selectable values for a dropdown.
- Optional max: number
  
  Maximum value for number controllers.
- Optional step: number
  
  Step value for number controllers.
Returns GUIController
add

addColor

addColor(object: object, property: string, rgbScale?: number): GUIController

Adds a color controller to the GUI.

params = {
    cssColor: '#ff00ff',
    rgbColor: { r: 0, g: 0.2, b: 0.4 },
    customRange: [ 0, 127, 255 ],
};
gui.addColor( params, 'cssColor' );
gui.addColor( params, 'rgbColor' );
gui.addColor( params, 'customRange', 255 );

Parameters

object: object

The object the controller will modify.
property: string

Name of the property to control.
Optional rgbScale: number

Returns GUIController

color

addFolder

addFolder(title: string): I3JS.GUI

- Defined in lib/threejs-library/types/three/examples/libs.ts:1498
Adds a folder to the GUI, which is just another GUI. This method returns the nested GUI so you can add controllers to it.

Parameters
- title: string
  
  Name to display in the folder's title bar.
Returns I3JS.GUI
folder

close

close(): I3JS.GUI

- Defined in lib/threejs-library/types/three/examples/libs.ts:1536
Closes the GUI.

Returns I3JS.GUI
close

controllersRecursive

controllersRecursive(): GUIController[]

- Defined in lib/threejs-library/types/three/examples/libs.ts:1587
Returns an array of controllers contained by this GUI and its descendents.

Returns GUIController[]
recursive

destroy

destroy(): void

- Defined in lib/threejs-library/types/three/examples/libs.ts:1580
Destroys all DOM elements and event listeners associated with this GUI

Returns void

foldersRecursive

foldersRecursive(): I3JS.GUI[]

- Defined in lib/threejs-library/types/three/examples/libs.ts:1594
Returns an array of folders contained by this GUI and its descendents.

Returns I3JS.GUI[]
recursive

hide

hide(): I3JS.GUI

- Defined in lib/threejs-library/types/three/examples/libs.ts:1543
Hides the GUI.

Returns I3JS.GUI
hide

load

load(obj: object, recursive?: boolean): I3JS.GUI

- Defined in lib/threejs-library/types/three/examples/libs.ts:1507
Recalls values that were saved with gui.save().

Parameters
- obj: object
- Optional recursive: boolean
Returns I3JS.GUI
load

onChange

onChange(callback: GUICallBack): I3JS.GUI

- Defined in lib/threejs-library/types/three/examples/libs.ts:1567
Pass a function to be called whenever a controller in this GUI changes.

Parameters
- callback: GUICallBack
Returns I3JS.GUI
change

onFinishChange

onFinishChange(callback: GUICallBack): I3JS.GUI

- Defined in lib/threejs-library/types/three/examples/libs.ts:1575
Pass a function to be called whenever a controller in this GUI has finished changing.

Parameters
- callback: GUICallBack
Returns I3JS.GUI
finish change

open

open(open?: boolean): I3JS.GUI

- Defined in lib/threejs-library/types/three/examples/libs.ts:1529
Opens a GUI or folder. GUI and folders are open by default.
```
gui.open(); // open
gui.open( false ); // close
gui.open( gui._closed ); // toggle
```
Parameters
- Optional open: boolean
Returns I3JS.GUI
open

reset

reset(recursive?: boolean): I3JS.GUI

- Defined in lib/threejs-library/types/three/examples/libs.ts:1559
Resets all controllers to their initial values.

Parameters
- Optional recursive: boolean
Returns I3JS.GUI
reset

save

save(recursive?: boolean): object

- Defined in lib/threejs-library/types/three/examples/libs.ts:1515
Returns an object mapping controller names to values. The object can be passed to gui.load() to recall these values.

Parameters
- Optional recursive: boolean
Returns object
save

title

title(title: string): I3JS.GUI

- Defined in lib/threejs-library/types/three/examples/libs.ts:1551
Change the title of this GUI.

Parameters
- title: string
Returns I3JS.GUI
title

Hierarchy

Index

Constructors

Properties

Methods

Constructors

constructor

Parameters

Optional param: GUIParameters

Returns I3JS.GUI

Properties

_closed

_hidden

_title

children

controllers

domElement

folders

parent

root

Methods

add

Parameters

object: object

property: string

Optional min: number | object | any[]

Optional max: number

Optional step: number

Returns GUIController

addColor

Parameters

object: object

property: string

Optional rgbScale: number

Returns GUIController

addFolder

Parameters

title: string

Returns I3JS.GUI

close

Returns I3JS.GUI

controllersRecursive

Returns GUIController[]

destroy

Returns void

foldersRecursive

Returns I3JS.GUI[]

hide

Returns I3JS.GUI

load

Parameters

obj: object

Optional recursive: boolean

Returns I3JS.GUI

onChange

Parameters

callback: GUICallBack

Returns I3JS.GUI

onFinishChange

Parameters

callback: GUICallBack

Returns I3JS.GUI

open

Parameters

Optional open: boolean

Returns I3JS.GUI

reset

Parameters

Optional recursive: boolean

Returns I3JS.GUI

save

Parameters

Optional recursive: boolean

Returns object

title

Parameters

title: string

Returns I3JS.GUI