Three.js - GUI (dat.gui)

여태까지는 코드를 통해 메쉬나 카메라 등의 위치를 조절했다고 한다면,
GUI를 통해서도 조절할 수 있다.

이 역시도 외부 패키지다! dat.gui를 이용한다.

npm i dat.gui

GUI추가는 객체 추가로 한다.

const gui - new dat.GUI();

//gui.add(mesh.position,'y',-5,5,0.01);
//(조종할 객체 ,객체 속성, min , max , step)

//윗 줄을 다르게 바꿔볼 수 있다.
gui
	.add(mesh.position,'z')
	.min(-10)
	.max(3)
	.step(0.01)
	.name('메쉬의 Z 위치');

씬에는 따로 추가할 필요는 없다.
하지만 gui객체를 선언하고 모형,메테리얼(즉, 메쉬),카메라, 조명 등을 설정한 뒤 마지막에 gui의 파라미터값을 조절하도록 하자.