dat.gui

개발시 다양한 파라미터들의 설정 정보를 변경할경우 매번 값을 수정해서 실행하기 쉽지가 않다. dat.gui를 사용하면 간단한 설정정보를 관리할 수 UI을 제공하고 변경사항을 적용할 수 있는 인터페이스를 제공하고 있다.
여기서는 angular에서 dat.gui를 설정하고 활용하는 방법에 대해서 설명드리려고 합니다.

Install

npm i dat.gui
npm i --save-dev @types/dat.gui

Import 및 정의

import * as dat from 'dat.gui';
..........
export class MyComponent {
  constructor() {
    this.gui = new dat.GUI();
  }
}

사용설명

숫자 값 설정

const setting1 = {
    key1: 0,
    key2: 0,
    checked: false,
    color1: "rgba(0,0,0,0)",
};
const f1 = this.gui.addFolder('Foo'); // 폴더설정

f1.add(setting1, "key1", 10, 100)
  .step(10)
  .name("KEY1")
  .onChange(() => {
  });

const setting2 = {
  x: 0,
  y: 0,
  z: 0
}
const f2 = this.gui.addFolder('Bar'); // 폴더설정
f2.add(setting2, 'x').min(-6).max(6).step(0.01)
f2.add(setting2, 'y').min(-5).max(5).step(0.01)
f2.add(setting2, 'z').min(-5).max(5).step(0.01)

컬러설정

const mycolor = {
  color: 0x8ff
}
light2.addColor(mycolor, 'color')
  .onChange(() => {
    console.log(mycolor.color);
  }
)