ng3-gui

Angular Three version of lil-gui

For use in threejs scenes built using angular-three. Uses ng3-flat-ui controls and theme.

Interface matches lil-gui, so easy drop-in replacement for use within a three scene. Supports onChange event.

Updated to support multi-line text input.

import { Ng3GUI } from 'ng3-gui'; 

selectable = new InteractiveObjects();
basic!: Ng3GUI;

ngOnInit(): void {
  const gui = new Ng3GUI();

  const myObject = {
	  myBoolean: true,
	  myFunction: function() { ... },
	  myString: 'lil-gui',
	  myNumber: 1
  };

  gui.add( myObject, 'myBoolean' );  // Checkbox
  gui.add( myObject, 'myFunction' ); // Button
  gui.add( myObject, 'myString' );   // Text Field
  gui.add( myObject, 'myNumber' );   // Number Field

  this.basic = gui;
}

<ng3-gui [position]="[1.7, 1, -2]"  [gui]="basic" [selectable]="selectable"></ng3-gui>

Component works in browser window using touch or mouse. GUI windows can be moved along x-y plane.

Component also work in VR using ray caster to provide an in-scene user interface. Windows can be dragged around scene.

Roadmap

In no particular order, add support for

• lighting properties
• geometry properties
• material properties
• material picker
• mesh picker
• performance stat panels