lil-gui 코드

공식 사이트는 https://lil-gui.georgealways.com/ 입니다.

패키지 설치는 다음과 같습니다.

npm i lil-gui

필요한 import 문은 다음과 같습니다.

import * as dat from "lil-gui"

참고로 three를 설치하면 lil-gui가 덤으로 제공됩니다. three 설치를 통해 제공되는 lil-gui를 가져다 쓰기 위한 import 문은 다음과 같습니다.

import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

사용 코드 예시는 다음과 같습니다.

const gui = new dat.GUI()

const obj = {
  value: 0.5,
  color: "#ff0000"
}

gui.add(obj, "value").min(0).max(1).step(0.01).name("title")
gui.addColor(obj, "color").onChange((v) => { console.log(v, obj.color) })

간단히 클릭해서 코드를 실행하는 버튼을 추가하는 코드입니다.

const toggle = {
  func: () => {
    toggle.flag = !toggle.flag;
    if(toggle.flag) {
      // 블라블라..
    } else {
      // 쁠라쁠라..
    }
  },
  flag: 1
}

gui.add(toggle, "func").name("toggle");