three.js GUI 그리기

npm i dat.gui

dat.gui라는 라이브러리를 통해서 GUI 컨트롤러를 그려보자.

 

// Dat GUI
const gui = new dat.GUI();
gui.add(mesh.position, 'y', -5, 5, 0.01)

dat.GUI를 통해 gui객체를 생성하면, add를 통해 특정 object의 값을 조정하는 컨트롤러 GUI를 만들 수 있다.

 

// Dat GUI
const gui = new dat.GUI();
gui
    .add(mesh.position, 'z')
    .min(-10)
    .max(3)
    .step(0.01)
    .name('메쉬의 Z 위치');

위와 같이 각 gui의 구성요소에 대한 값을 sequence로 설정할 수 있다.