Debug UI. Il existe différents GUI mais celui qu'on utilise est lil-gui. Il n'est pas directement implémenter par three donc on doit le npm install. Pour l'instancier, c'est assez simple : une constante avec un new GUI() après l'avoir import GUI from 'lil-gui'. On peut créer un objet et ajouter certains paramètres pour le custom : title / si il est ouvert par défaut ou pas et pleins d'autres. On peut créer des folder et faire du nesting si on a de gros projets. gui.addFolder('nom du folder'). Pour ajouter un élément, la logique est souvent la même. On utilise notre const gui = new GUI() en utilisant une méthode qui se nomme add. Donc gui.add(le premier paramètre correspond à l'objet qu'on veut ajouter. Admettons ici : la position en x de notre mesh : mesh.position), (en deuxième paramètre, c'est la property à tweak 'y' dans notre cas). Dès que c'est fait, on va avoir un champs qui va apparaître dans notre GUI avec le nom y et une valeur qu'on va pouvoir changer en tapant le nombre (par défaut un champs texte). Nous on veut avoir une range donc on utilise la méthode.min(-0.5) pour exemple, un .max(0.5) et un step, c'est à dire de combien en combien on peut slider, en l'occurence on prend très large .step(0.01) (totalement arbitraire dans mon exemple). Ces 3 paramètres existent aussi dans notre gui.add (object property min max step) mais on les utilisent avec des méthodes c'est plus pertinent. Pour ajouter une couleur à tweak, c'est un poil différent, c'est gui.addColor mais toujours avec les mêmes paramètres. On aperçoit cependant assez vite que la couleur de lil-gui et du cube ne sont pas les mêmes. De ce que j'ai compris, c'est à cause du color space, notre navigateur renvoie du sRGB alors que l'espace 3D fonctionne en linear color space, les intensités lumineuses sont linéaires ce qui n'est pas le cas pour le sRGB sur notre écran, il s'adapte pour correspondre à la perception humaine. Et c'est là qu'une notion importante arrive, si on veut tweak un object qui existe comme un mesh, un matériaux ou une méthode contenu dans ces derniers, on peut directement les ajouter dans notre gui.add mais si notre méthode n'existe pas mais qu'on veut quand même effectuer une action comment on fait. On créé un objet vide debugObject par exemple et on créé des méthodes avec des fonctions à l'intérieur. admettons qu'on veut changer le nombre de subdivisions avec un slider debugObject.subdivision = 1. gui.add(debugObject, 'subdivision').onFinishChange (qui permet d'effectuer l'action lorsqu'on relache notre slider, pas durant toute la durée parce que ça demande pas mal de ressources) on déclare une fonction anonyme () => {mesh.geometry.dispode() qui sert à supprimer de la mémoire GPU les anciennes modifications qui seront remplacées par mesh.geometry = new THREE.BoxGeomety(1,1,1,debugObject.subdivision,debugObject.subdivision,debugObject.subdivision}. On ajoute un step, un min et un max et on est bon.