Przejście z dat.GUI do lil-gui

Jeśli masz istniejący projekt wykorzystujący dat.GUI, migracja do lil-gui jest bardzo łatwa. Biblioteka została zaprojektowana jako niemal bezpośredni zamiennik, dlatego w większości przypadków wystarczy zmienić import.

Dlaczego warto przejść na lil-gui?

• dat.GUI nie jest już aktywnie rozwijane i wspierane,
• lil-gui jest lżejsze, nowocześniejsze i używane w oficjalnych przykładach Three.js,
• API jest niemal identyczne,
• lil-gui ma lepsze wsparcie TypeScript.

Krok 1 - Instalacja biblioteki

npm uninstall dat.gui
npm install lil-gui

Krok 2 - Zmiana importu

import { GUI } from 'dat.gui';

const gui = new GUI();

import GUI from 'lil-gui';

const gui = new GUI();

Krok 3 - Podstawowe kontrolki

const params = {
    speed:,
    visible: true
};

gui.add(params, 'speed', 0,0);
gui.add(params, 'visible');

const params = {
    speed:,
    visible: true
};

gui.add(params, 'speed', 0,0);
gui.add(params, 'visible');

Krok 4 - Kolory

gui.addColor(params, 'color');

gui.addColor(params, 'color');

Krok 5 - Foldery

const folder = gui.addFolder('Transform');

folder.add(mesh.position, 'x', -10,0);
folder.add(mesh.position, 'y', -10,0);

folder.open();

const folder = gui.addFolder('Transform');

folder.add(mesh.position, 'x', -10,0);
folder.add(mesh.position, 'y', -10,0);

folder.close();

Krok 6 - onChange()

gui.add(params, 'speed', 0,0)
   .onChange(value => {
       console.log(value);
   });

Krok 7 - Nazwy kontrolek

gui.add(params, 'speed')
   .name('Prędkość');

Krok 8 - Niszczenie GUI

gui.destroy();

window.addEventListener('beforeunload', () => {
    gui.destroy();
});

Najczęstsze problemy przy migracji

gui.__controllers

gui.__controllers

gui.controllers

gui.__folders

gui.__folders

gui.folders

• dat.GUI zwracało obiekt (mapę)
• lil-gui zwraca tablicę

remove()

gui.remove(controller);

controller.destroy();

removeFolder()

gui.removeFolder(folder);

folder.destroy();

Przykład Three.js

import * as THREE from 'three';
import GUI from 'lil-gui';

const scene = new THREE.Scene();

const cube = new THREE.Mesh(
    new THREE.BoxGeometry(),
    new THREE.MeshNormalMaterial()
);

scene.add(cube);

const gui = new GUI();

const params = {
    rotationSpeed: 0.01,
    wireframe: false
};

gui.add(params, 'rotationSpeed', 0, 0.1, 0.001)
   .name('Rotation');

gui.add(params, 'wireframe')
   .onChange(value => {
       cube.material.wireframe = value;
   });

function animate() {
    requestAnimationFrame(animate);

    cube.rotation.x += params.rotationSpeed;
    cube.rotation.y += params.rotationSpeed;

    renderer.render(scene, camera);
}

animate();

1. Usuń dat.gui
2. Zainstaluj lil-gui
3. Zmień:

import { GUI } from 'dat.gui';

import GUI from 'lil-gui';