three.js
6 - GUI

GUI

Nous souhaitons pouvoir modifier les propriétés de notre objet 3d en temps réel, avec une interface graphique.

Nous allons ajouter "lil-gui" à notre projet.

Documentation :

Installation

npm install lil-gui

Configuration

// script.js
 
import { GUI } from 'lil-gui'
 
// GUI
const gui = new GUI()
 
// ...
 
// A la fin de notre code
// GUI
gui.add(mesh.position, 'x').min(-3).max(3).step(0.01)

⚠️ Nous devons forcement ajouter un objet à notre GUI !

Ajouter des propriétés

La méthode add prend 2 paramètres :

  • l'objet que l'on souhaite modifier (Objet obligatoire !)
  • la propriété de l'objet que l'on souhaite modifier

Exemple

// GUI
gui.add(mesh.position, 'x').min(-3).max(3).step(0.01)

Types de propriétés

En fonction du type de la propriété passée, l'interface graphique sera différente.

  • Booléen : checkbox
  • Nombre : slider
  • Chaîne de caractères : input
  • Function : button
  • Tableau : Dropdown

Méthodes spéciales

Lorsque nous ajouter des nombres, nous pouvons utiliser les méthodes suivantes :

  • min() : Valeur minimale
  • max() : Valeur maximale
  • step() : Pas
// GUI
gui.add(mesh.position, 'x').min(-3).max(3).step(0.01)

Couleurs

Pour les couleurs, nous devons utiliser la méthode ✅ addColor plutôt que ❌ add.

obj = {
	colorObject: { r: 0.667, g: 0, b: 1 },
	colorArray: [ 0.667, 0, 1 ]
}
 
 
gui.addColor( obj, 'colorObject' );
gui.addColor( obj, 'colorArray' );

Dossier

Nous pouvons ajouter un dossier pour ranger nos propriétés.

// GUI
 
const cameraGUI = gui.addFolder('Camera')
cameraGUI.add(camera.position, 'x').min(-5).max(5).step(0.01).name('CameraX')
cameraGUI.add(camera.position, 'y').min(-5).max(5).step(0.01).name('CameraY')
cameraGUI.add(camera.position, 'z').min(0).max(10).step(0.01).name('CameraZ')

Ouvrir ou fermer le GUI

// GUI
gui.open();
gui.close();

Code GUI pour nos projets

import { GUI } from 'lil-gui';
 
// GUI
const gui = new GUI();
 
// ... Tout en bas
 
// GUI controls
const cameraGUI = gui.addFolder('Camera');
cameraGUI.add(camera.position, 'x').min(-5).max(5).step(0.01).name('cameraX');
cameraGUI.add(camera.position, 'y').min(-5).max(5).step(0.01).name('cameraY');
cameraGUI.add(camera.position, 'z').min(0).max(10).step(0.01).name('cameraZ');
 
const groupGUI = gui.addFolder('GROUP');
groupGUI.add(group.position, 'x').min(-3).max(3).step(0.01).name('Mesh3 X Position');
groupGUI.add(group.position, 'y').min(-3).max(3).step(0.01).name('Mesh3 Y Position');
groupGUI.add(group.position, 'z').min(-3).max(3).step(0.01).name('Mesh3 Z Position');
 
const mesh1åGUI = gui.addFolder('MESH 1');
mesh1GUI.add(mesh.position, 'x').min(-3).max(3).step(0.01).name('Mesh3 X Position');
mesh1GUI.add(mesh.position, 'y').min(-3).max(3).step(0.01).name('Mesh3 Y Position');
mesh1GUI.add(mesh.position, 'z').min(-3).max(3).step(0.01).name('Mesh3 Z Position');
mesh1GUI.close();
 
const mesh2GUI = gui.addFolder('MESH 2');
mesh2GUI.add(mesh2.position, 'x').min(-3).max(3).step(0.01).name('Mesh3 X Position');
mesh2GUI.add(mesh2.position, 'y').min(-3).max(3).step(0.01).name('Mesh3 Y Position');
mesh2GUI.add(mesh2.position, 'z').min(-3).max(3).step(0.01).name('Mesh3 Z Position');
mesh2GUI.close();
 
const mesh3GUI = gui.addFolder('MESH 3');
mesh3GUI.add(mesh3.position, 'x').min(-3).max(3).step(0.01).name('Mesh3 X Position');
mesh3GUI.add(mesh3.position, 'y').min(-3).max(3).step(0.01).name('Mesh3 Y Position');
mesh3GUI.add(mesh3.position, 'z').min(-3).max(3).step(0.01).name('Mesh3 Z Position');
mesh3GUI.close();
 
// GUI Properties (A mdoifier en fonction du besoin)
const propertyGUI = gui.addFolder('Properties')
// propertyGUI.close();
// propertyGUI.open();
propertyGUI.add(property, "speed").min(-5).max(5).step(0.01).name('Speed');
5 - Animation7 - Géométrie