Skip to content

lil-gui

Import

import { GUI } from 'lil-gui'

Description

Using lil-gui with React Three Fiber.

lil.gui is now the default GUI used in the official Three.js examples. We can also use lil-gui in a React Three Fiber application.

The process to use lil-gui is very similar to how you can do it with Dat.GUI.

This is because lil-gui is essentially a drop-in replacement for Dat.GUI.

We can install lil.GUI from its official repository.

npm install lil-gui --save-dev

The type declarations are already included with the installation.

To import in your script,

import { GUI } from 'lil-gui'

And in your component, you can create and use it in a useEffect.

function Box({ gui }) {
  const ref = useRef()

  useEffect(() => {
    const gui = new GUI()
    gui.add(ref.current.rotation, 'x', 0, Math.PI * 2)
    gui.add(ref.current.rotation, 'y', 0, Math.PI * 2)
    gui.add(ref.current.rotation, 'z', 0, Math.PI * 2)
    return () => {
      gui.destroy()
    }
  }, [])

  return (
    <mesh ref={ref}>
      <boxGeometry />
      <meshBasicMaterial color={0x00ff00} wireframe />
    </mesh>
  )
}

Be sure to destroy the GUI, as shown in the above example, in case the component JSX is ever refreshed. Otherwise, you could have multiple GUIs instantiated into your document.

Working Example

<>

Sharing lil-gui Among Several Components

The above example is great if only one of your components need the lil-gui and you can create it complete in the useEffect.

Below is an example where each component manages its own folder within one shared lil-gui.

Working Example

<>

Some examples using lil-GUI
R3F Environment Three r163 sbedit.net

Comments